mirror of https://github.com/01-edu/public.git
5 changed files with 503 additions and 0 deletions
@ -0,0 +1,126 @@ |
|||||||
|
## GraphQL |
||||||
|
|
||||||
|
### Objectives |
||||||
|
|
||||||
|
The objective of this project is to learn graphql query language by creating your own profile. It will be provided,\ |
||||||
|
by the platform, a graphql endpoint that is connected to the database. So you can query this endpoint to obtain the information you desire.\ |
||||||
|
**Note** that for security reasons some tables are private and some are public, you will only be provided with certain content. |
||||||
|
|
||||||
|
Your profile must have at least: |
||||||
|
|
||||||
|
- Basic user identification |
||||||
|
- XP amount |
||||||
|
- level |
||||||
|
- grades |
||||||
|
- skills |
||||||
|
- statistics |
||||||
|
|
||||||
|
### Instructions |
||||||
|
|
||||||
|
> Here is a small introduction and advantages of graphQL, if you want to read more about graphQL you can visit there [site](https://graphql.org/) |
||||||
|
|
||||||
|
GraphQL is a query language for any API endpoint and runtime. The syntax lets you specify what data you want to receive from that API.\ |
||||||
|
You must have in mind that this language is used for API endpoints and not database. Unlike SQL,\ |
||||||
|
graphql query does not go to your database directly but to your graphql API endpoint which can connect to a database or any other data source. |
||||||
|
|
||||||
|
You are already familiar to REST, since REST is a robust methodology of creating APIs and not elastic/scalable.\ |
||||||
|
It can be at the same time painful, because it requires individual creation of each API, example: `v1/user/item/{id}`, `v1/post/item/{id}` and so on. |
||||||
|
|
||||||
|
The main feature of graphql compared to REST is that it lets you ask for specific information. And even better then that is the nesting feature. |
||||||
|
|
||||||
|
Lets take for instance the social network project, if the server had a Graphql API that was connected to the database we could query this API using graphql language: |
||||||
|
|
||||||
|
```js |
||||||
|
query { |
||||||
|
user { |
||||||
|
name |
||||||
|
} |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
This simple query will return an array with the name of the users. Imagine if you wanted the `date_of_birth`,\ |
||||||
|
you could just add this attribute to the query, example: |
||||||
|
|
||||||
|
```js |
||||||
|
query { |
||||||
|
user { |
||||||
|
name |
||||||
|
dateOfBirth |
||||||
|
} |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
Example for the nesting fetching: |
||||||
|
|
||||||
|
```js |
||||||
|
query { |
||||||
|
user(id: "13") { |
||||||
|
name |
||||||
|
dateOfBirth |
||||||
|
followers { |
||||||
|
id |
||||||
|
name |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
For this example we ask for the users followers and request their names and ids.\ |
||||||
|
The examples above are simple examples, **note** that this query is require the introduction of variables(arguments)\ |
||||||
|
so it will return just one user, the user that as the id equal to `13`. |
||||||
|
|
||||||
|
In graphql the usage of arguments can be specified in the schema of the API endpoint. Here is the *docs* for the graphql endpoint you are going to use, [Schema](https://01.alem.school/public/subjects/grapqhl) |
||||||
|
|
||||||
|
<!-- EXPLAIN WHAT IS GOING TO HAPPEN --> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
### Usage |
||||||
|
|
||||||
|
> Here are the list of tables that you are available to query: |
||||||
|
|
||||||
|
- **User table**: |
||||||
|
|
||||||
|
| id | githubLogin | |
||||||
|
| --- | ----------: | |
||||||
|
| 1 | person1 | |
||||||
|
| 2 | person2 | |
||||||
|
| 3 | person3 | |
||||||
|
|
||||||
|
- **Transactions table**: |
||||||
|
|
||||||
|
| id | type | amount | userId | createdAt | |
||||||
|
| --- | :--: | -----: | -----: | -------------------------------: | |
||||||
|
| 1 | xp | 234 | 1 | 2019-03-14T12:02:23.168726+00:00 | |
||||||
|
| 2 | xp | 1700 | 2 | 2019-03-14T12:02:23.168726+00:00 | |
||||||
|
| 3 | xp | 175 | 3 | 2019-03-14T12:02:23.168726+00:00 | |
||||||
|
|
||||||
|
- **Progress table**: |
||||||
|
|
||||||
|
| id | userId | attrs | bestResultId | objectId | |
||||||
|
| --- | :----: | -----------------------: | -----------: | -------: | |
||||||
|
| 1 | 1 | `{"name": "memory", ...` | s | 198 | |
||||||
|
| 2 | 2 | `{"name": "memory", ...` | s | 198 | |
||||||
|
| 3 | 3 | `{"name": "memory", ...` | s | 198 | |
||||||
|
|
||||||
|
- **Results table**: |
||||||
|
|
||||||
|
| id | grade | progressId | |
||||||
|
| --- | ----: | ---------: | |
||||||
|
| 1 | 0 | 58 | |
||||||
|
| 2 | 0 | 58 | |
||||||
|
| 3 | 1 | 58 | |
||||||
|
|
||||||
|
- **Object table**: |
||||||
|
|
||||||
|
| id | grade | progressId | |
||||||
|
| --- | ----: | ---------: | |
||||||
|
| 1 | 0 | 58 | |
||||||
|
| 2 | 0 | 58 | |
||||||
|
| 3 | 1 | 58 | |
||||||
|
|
||||||
|
This project will help you learn about: |
||||||
|
|
||||||
|
- [Graphql](https://graphql.org/) language |
||||||
@ -0,0 +1,119 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>Graphql Doc</title> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
||||||
|
<style> |
||||||
|
|
||||||
|
:root { |
||||||
|
--color: hsl(0, 0%, 65%); |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
background: hsl(0, 0%, 16%); |
||||||
|
font-family: sans-serif; |
||||||
|
letter-spacing: 1.5px; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
align-content: center; |
||||||
|
width: inherit; |
||||||
|
height: inherit; |
||||||
|
padding: 5rem; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
input { |
||||||
|
border: none; |
||||||
|
position: absolute; |
||||||
|
margin: 6px 24px 8px 15px; |
||||||
|
background: rgba(255, 255, 255, 0); |
||||||
|
border-bottom: 1px solid var(--color); |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
.docExplorerWrap { |
||||||
|
position: inherit; |
||||||
|
width: 80%; |
||||||
|
height: 100%; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
background-color: hsl(0, 1%, 35%); |
||||||
|
} |
||||||
|
|
||||||
|
.doc-title, .doc-explore-content { |
||||||
|
padding: 10px; |
||||||
|
margin: 10px; |
||||||
|
align-content: center; |
||||||
|
border-bottom: 1px solid var(--color); |
||||||
|
} |
||||||
|
|
||||||
|
.doc-title { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.back { |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
h3, h4 { |
||||||
|
font-weight: 300; |
||||||
|
width: 100%; |
||||||
|
margin: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
h3 { |
||||||
|
font-size: 1.25rem; |
||||||
|
} |
||||||
|
|
||||||
|
h4 { |
||||||
|
font-size: 0.8rem; |
||||||
|
white-space: pre; |
||||||
|
} |
||||||
|
|
||||||
|
b { |
||||||
|
padding: 4px; |
||||||
|
border-bottom: 1px solid var(--color); |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color:lightcoral; |
||||||
|
} |
||||||
|
|
||||||
|
a:hover { |
||||||
|
text-decoration: underline; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
cursor: pointer; |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<script type="module" src="./lib/schema.js"></script> |
||||||
|
<div class="docExplorerWrap"> |
||||||
|
<div class="doc-title"><h3 class="title">Schema Documentation</h3></div> |
||||||
|
<div class="doc-explore-content"> |
||||||
|
<label class="search-box"> |
||||||
|
<img src="https://cdn1.iconfinder.com/data/icons/thin-ui-1/100/Noun_Project_100Icon_1px_grid_thin_ic_cookie-512.png"> |
||||||
|
<input class="search" type="text" placeholder="Search Schema..."> |
||||||
|
</label> |
||||||
|
<div class="doc-type-description"> <h4 class="comment">A Graphql schema provides a root type for each kind of operation</h4><!-- description of... --></div> |
||||||
|
<br> |
||||||
|
<div class="doc-category"><h4><b class="doc-type">ROOT TYPES</b></h4></div> |
||||||
|
<br> |
||||||
|
<div class="display-doc"></h4></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,157 @@ |
|||||||
|
const backImg = |
||||||
|
'https://cdn1.iconfinder.com/data/icons/thin-ui-1/100/Noun_Project_100Icon_1px_grid_thin_ic_arrow_left_simple-512.png' |
||||||
|
const body = document.body |
||||||
|
const main = document.querySelector('.doc-explore-content') |
||||||
|
const docDisplay = document.querySelector('.display-doc') |
||||||
|
const exist = () => document.querySelector('.back') |
||||||
|
const removeComments = (obj) => |
||||||
|
Object.fromEntries(obj.filter((v) => v[0] !== 'comment')) |
||||||
|
|
||||||
|
const getData = async (pathToFile) => { |
||||||
|
const data = await fetch(pathToFile) |
||||||
|
.then((data) => data.json()) |
||||||
|
.catch(console.log) |
||||||
|
return data |
||||||
|
} |
||||||
|
|
||||||
|
const generateLinks = (k, v) => { |
||||||
|
const h4 = document.createElement('h4') |
||||||
|
const a = document.createElement('a') |
||||||
|
a.innerText = v |
||||||
|
h4.innerHTML = k |
||||||
|
h4.appendChild(a) |
||||||
|
docDisplay.appendChild(h4) |
||||||
|
return a |
||||||
|
} |
||||||
|
|
||||||
|
const generateAllQueries = (data) => { |
||||||
|
const docTitle = document.querySelector('.doc-title') |
||||||
|
docDisplay.innerHTML = '' |
||||||
|
const back = backArrow() |
||||||
|
docTitle.appendChild(back) |
||||||
|
for (let obj of data.types) { |
||||||
|
for (const [k, _] of Object.entries(removeComments(Object.entries(obj)))) { |
||||||
|
generateContent(k, obj) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const loadRootTypes = async () => { |
||||||
|
const data = await getData('./lib/schema.json') |
||||||
|
for (let v of data.root_types) { |
||||||
|
const h4 = document.createElement('h4') |
||||||
|
const a = document.createElement('a') |
||||||
|
a.addEventListener('click', (event) => changeContent(event, data)) |
||||||
|
|
||||||
|
for (const [k, value] of Object.entries(v)) { |
||||||
|
a.innerText = value |
||||||
|
h4.innerHTML = `${k}: ` |
||||||
|
h4.appendChild(a) |
||||||
|
docDisplay.appendChild(h4) |
||||||
|
} |
||||||
|
} |
||||||
|
const a = generateLinks('all: ', 'all_available_queries') |
||||||
|
a.addEventListener('click', () => generateAllQueries(data)) |
||||||
|
} |
||||||
|
|
||||||
|
const generateContent = (t, data) => { |
||||||
|
docDisplay.innerHTML += `type ${t.toUpperCase()} {` |
||||||
|
for (const [k, v] of Object.entries(data[t])) { |
||||||
|
generateLinks(` ${k}: `, v) |
||||||
|
} |
||||||
|
docDisplay.innerHTML += `}<br><br>` |
||||||
|
for (let v of document.getElementsByTagName('a')) { |
||||||
|
v.addEventListener('click', (e) => changeContent(e, data)) |
||||||
|
} |
||||||
|
} |
||||||
|
const backArrow = () => { |
||||||
|
const title = document.querySelector('.title') |
||||||
|
const typeDescription = document.querySelector('.comment') |
||||||
|
const contType = document.querySelector('.doc-type') |
||||||
|
const origType = contType.innerText |
||||||
|
const origTitle = title.innerText |
||||||
|
const origTypeDescription = typeDescription.innerText |
||||||
|
const back = document.createElement('img') |
||||||
|
back.className = 'back' |
||||||
|
back.src = backImg |
||||||
|
|
||||||
|
back.addEventListener('click', () => { |
||||||
|
back.remove() |
||||||
|
docDisplay.innerHTML = '' |
||||||
|
title.innerText = origTitle |
||||||
|
contType.innerText = origType |
||||||
|
typeDescription.innerText = origTypeDescription |
||||||
|
loadRootTypes() |
||||||
|
}) |
||||||
|
return back |
||||||
|
} |
||||||
|
|
||||||
|
const allArgs = (data) => { |
||||||
|
for (const [k, v] of Object.entries(data.arguments)) { |
||||||
|
docDisplay.innerHTML += `<h4>${k}: <a>(${v.description})</a> // ${v.comment}</h4>` |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const changeContent = ({ target }, data) => { |
||||||
|
const title = document.querySelector('.title') |
||||||
|
const typeDescription = document.querySelector('.comment') |
||||||
|
const contType = document.querySelector('.doc-type') |
||||||
|
const docTitle = document.querySelector('.doc-title') |
||||||
|
|
||||||
|
const t = target.innerText |
||||||
|
const back = backArrow() |
||||||
|
|
||||||
|
title.innerText = t.toUpperCase() |
||||||
|
contType.innerText = `${t.toUpperCase()} fields` |
||||||
|
docDisplay.innerHTML = '' |
||||||
|
if (/\[\w*\!\]\!/g.test(t)) { |
||||||
|
const b = t.replace(/\[|\]|\!/g, '') |
||||||
|
const obj = data.types.filter((v) => v[b])[0] |
||||||
|
typeDescription.innerText = obj.comment |
||||||
|
generateContent(b, obj) |
||||||
|
} else if (t === 'arguments') { |
||||||
|
allArgs(data) |
||||||
|
!exist() && docTitle.appendChild(back) |
||||||
|
} else { |
||||||
|
generateContent(t, data) |
||||||
|
!exist() && docTitle.appendChild(back) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
loadRootTypes() |
||||||
|
|
||||||
|
/* search */ |
||||||
|
const updateResult = (dataToSearch, { target }) => { |
||||||
|
docDisplay.innerHTML = '' |
||||||
|
|
||||||
|
dataToSearch.search.map((type) => |
||||||
|
target.value.split(' ').map((w) => { |
||||||
|
if (type.toLowerCase().indexOf(w.toLowerCase()) !== -1) { |
||||||
|
docDisplay.innerHTML += `<li><a class="query-result">${type}</a></li>` |
||||||
|
document |
||||||
|
.querySelectorAll('.query-result') |
||||||
|
.forEach((ele) => |
||||||
|
ele.addEventListener('click', (e) => changeContent(e, dataToSearch)) |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const initSearch = async () => { |
||||||
|
const data = await getData('./lib/schema.json') |
||||||
|
const input = document.querySelector('.search') |
||||||
|
|
||||||
|
input.addEventListener('focus', () => { |
||||||
|
const bg = document.querySelector('.back') |
||||||
|
if (!bg) { |
||||||
|
const back = backArrow() |
||||||
|
document.querySelector('.doc-title').appendChild(back) |
||||||
|
} |
||||||
|
docDisplay.innerHTML = '' |
||||||
|
}) |
||||||
|
input.oninput = (e) => updateResult(data, e) |
||||||
|
} |
||||||
|
|
||||||
|
initSearch() |
||||||
|
/*--------------*/ |
||||||
@ -0,0 +1,101 @@ |
|||||||
|
{ |
||||||
|
"search": [ |
||||||
|
"[user!]!", |
||||||
|
"[object!]!", |
||||||
|
"[transaction!]!", |
||||||
|
"[progress!]!", |
||||||
|
"[result!]!", |
||||||
|
"query", |
||||||
|
"arguments" |
||||||
|
], |
||||||
|
"root_types": [{ "query": "query" }, { "arguments": "arguments" }], |
||||||
|
"query": { |
||||||
|
"user": "[user!]!", |
||||||
|
"object": "[object!]!", |
||||||
|
"transaction": "[transaction!]!", |
||||||
|
"progress": "[progress!]!", |
||||||
|
"result": "[result!]!" |
||||||
|
}, |
||||||
|
"types": [ |
||||||
|
{ |
||||||
|
"user": { |
||||||
|
"id": "ID!", |
||||||
|
"attrs": "String!", |
||||||
|
"createdAt": "String!", |
||||||
|
"discordDMChannelId": "String!", |
||||||
|
"discordId": "String!", |
||||||
|
"discordLogin": "String!", |
||||||
|
"githubId": "String!", |
||||||
|
"githubLogin": "String!", |
||||||
|
"profile": "String!", |
||||||
|
"updatedAt": "String!" |
||||||
|
}, |
||||||
|
"comment": "Fetch data from the table: \"user\"" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"object": { |
||||||
|
"id": "ID!", |
||||||
|
"attrs": "String!", |
||||||
|
"authorId": "String!", |
||||||
|
"childrenAttrs": "String!", |
||||||
|
"createdAt": "String!", |
||||||
|
"externalRelationUrl": "String!", |
||||||
|
"name": "String!", |
||||||
|
"type": "String!", |
||||||
|
"status": "String!", |
||||||
|
"updatedAt": "String!" |
||||||
|
}, |
||||||
|
"comment": "Fetch data from the table: \"object\"" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"transaction": { |
||||||
|
"id": "ID!", |
||||||
|
"attrs": "String!", |
||||||
|
"amount": "Int!", |
||||||
|
"createdAt": "String!", |
||||||
|
"type": "String!", |
||||||
|
"userId": "Int!" |
||||||
|
}, |
||||||
|
"comment": "Fetch data from the table: \"transaction\"" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"progress": { |
||||||
|
"id": "ID!", |
||||||
|
"attrs": "String!", |
||||||
|
"bestResultId": "Int!", |
||||||
|
"createdAt": "String!", |
||||||
|
"eventId": "Int!", |
||||||
|
"groupId": "Int!", |
||||||
|
"objectId": "Int!", |
||||||
|
"updatedAt": "String!", |
||||||
|
"userId": "Int!" |
||||||
|
}, |
||||||
|
"comment": "Fetch data from the table: \"progress\"" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"result": { |
||||||
|
"id": "ID!", |
||||||
|
"progressId": "Int!", |
||||||
|
"attrs": "String!", |
||||||
|
"createdAt": "String!", |
||||||
|
"grade": "Int!", |
||||||
|
"updatedAt": "String!" |
||||||
|
}, |
||||||
|
"comment": "Fetch data from the table: \"result\"" |
||||||
|
} |
||||||
|
], |
||||||
|
"arguments": { |
||||||
|
"where": { |
||||||
|
"description": "bool_exp", |
||||||
|
"comment": "filter the rows returned" |
||||||
|
}, |
||||||
|
"order_by": { |
||||||
|
"description": "[order_by!]", |
||||||
|
"comment": "sort the rows by one or more columns" |
||||||
|
}, |
||||||
|
"limit": { |
||||||
|
"description": "Int", |
||||||
|
"comment": "limit the number of rows returned" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue