![](https://jezgra.online/wp-content/uploads/2022/09/graphql.jpg)
GraphQL je query (query=upit, google translate) jezik. Query znači u istom smislu kao i query za bazu podataka. Dakle, daj mi određenu tablicu, stupac i redove. Cilj i svrha ovoga je pojednostavniti rad sa REST API-jima. Sa GraphQL API-jem dolazi i vizualno sučelje gdje se može vidjeti schema odnosno arhitektura cijelog API-ja.
Primjer
Za primjer ćemo koristiti http://api.spacex.land/graphql/
Ako napišemo:
{capsules { id }}
Dobivamo listu svih “kapsula”.
{ "data": { "capsules": [ { "id": "C105" }, { "id": "C101" }, ...
Jednostavno! Hajdemo složiti malo kompliciraniji upit:
{ capsules { id landings status missions { name } } }
Rezultat:
{ "data": { "capsules": [ { "id": "C105", "landings": 1, "status": "unknown", "missions": [ { "name": "CRS-3" } ] }, { "id": "C101", "landings": 1, "status": "retired", "missions": [ { "name": "COTS 1" } ] }, ...
Kako koristiti u projektu?
React
npx create-react-app my-app cd my-app npm install @apollo/client graphql npm start
index.js
import React from "react"; import ReactDOM from "react-dom"; import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client"; import App from "./App"; const client = new ApolloClient({ uri: "https://api.spacex.land/graphql/", cache: new InMemoryCache() }); const rootElement = document.getElementById("root"); ReactDOM.render( <ApolloProvider client={client}> <App /> </ApolloProvider>, rootElement );
App.js
import React from "react"; import { useQuery, gql } from "@apollo/client"; const query = gql` { capsules { id landings status missions { name } } } `; export default function App() { const { data, loading, error } = useQuery(query); if (loading) return "Loading..."; if (error) return <pre>{error.message}</pre> console.log(data); return ( <div> <h1>SpaceX Capsules</h1> <ul> {data.capsules.map((capsule) => ( <li key={capsule.id}>{capsule.id} => {capsule.status}</li> ))} </ul> </div> ); }
Vanilla JS
Za obični JS koristimo lib:
https://github.com/f/graphql.js
Iz tog paketića potrebna nam je datoteka “graphql.min.js” i “index.html” ovog sadržaja:
<!doctype html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="graphql.min.js"></script> </head> <body onload="main()"> <h1>Hello World</h1> <main></main> </body> </html> <script> const main = async () => { var graph = graphql("https://api.spacex.land/graphql/", { alwaysAutodeclare: true, asJSON: true, debug: true }) var capsulesData = graph(` query { capsules { id landings status missions { name } } } `); const capsulesGql = await capsulesData(); const capsules = capsulesGql.capsules; let mainElement = document.getElementsByTagName('main')[0]; for (let i=0; i<capsules.length; i++){ let key = capsules[i].id; let status = capsules[i].status; let landings = capsules[i].landings; mainElement.innerHTML += ` <div key="${key}"> ${key} ${status} ${landings}</div> `; } } </script>