Az Apollo Client egy teljes állapotkezelő könyvtár a JavaScript-alkalmazásokhoz. Ez egy hatékony eszköz, mivel mind a hátsó, mind az elülső oldalon használható.

Ebben az oktatóanyagban az elülső és a hátsó végén fogjuk használni egy Apollo GraphQL Server létrehozásával Node JS-sel. Ezután a React JS használatával fogyasztjuk az adatokat az ügyfél oldalon.

Ha még nem ismeri a GraphQl alkalmazást, ez az oktatóanyag segíthet. Ellenkező esetben kezdjük.

• A szerver felépítése Apollo, Node és GraphQl használatával
• GraphQl séma
• GraphQl felbontók
• Az Apollo szerver létrehozása
• Az ügyféloldali felépítés a React segítségével
• A React és az Apollo összekapcsolása
• Az adatok lekérése
• Az adatok megjelenítése

A szerver felépítése Apollo, Node és GraphQl használatával

Ebben az útmutatóban a Github API-t fogom használni az adatok megjelenítéséhez, és ezt a műveletet az Apollo és a Node JS segítségével felépített GraphQl szerver fogja elvégezni.

Ennek megvalósításához a következő parancsot kell futtatnunk a terminálon egy új Node JS projekt beállításához:

 yarn init 

A beállítás befejezése után a következő parancs futtatásával telepíthetjük a szükséges csomagokat:

 yarn add apollo-server graphql axios 

Remek, most már minden megvan a szerver felépítéséhez. Tehát először hozzunk létre egy új fájlt app.jsa gyökérben, amely a szerverünk belépési pontja lesz.

Ezután meg kell határoznunk egy Graphql sémát, amely tükrözi az adataink kinézetét.

GraphQl séma

Egy séma írja le az adatdiagram alakját. Meghatározza a háttérkészletekből kitöltött mezőkkel rendelkező típusokat. Tehát adjunk hozzá egy új sémát a app.jsfájlba.

• app.js

const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` 

Mint láthatja, nem használjuk fel a Github API által biztosított összes adatot. Szükségünk van arra az azonosítóra, amelyet referenciakulcsként használunk a React alkalmazásban, a bejelentkezést és az avatar_url fájlt. Van egy lekérdezésünk is users, amely a felhasználók tömbjét adja vissza.

Most, hogy van egy GraphQL sémánk, itt az ideje, hogy elkészítsük a megfelelő megoldókat a lekérdezési művelet befejezéséhez.

GraphQl felbontók

A felbontó olyan funkciók gyűjteménye, amelyek segítenek választ létrehozni egy GraphQL lekérdezésből. Tehát adjunk hozzá egy új felbontót a app.jsfájlba.

• app.js

const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } 

A megoldásnak név szerint meg kell egyeznie a megfelelő sémával. Ezért itt usersa userssémánkban definiált lekérdezésre utalunk. Ez egy olyan függvény, amely az API segítségével gyűjti be az adatokat, axiosés a várakozásoknak megfelelően adja vissza az azonosítót, a bejelentkezési nevet és az avatar_url szót.

Ennek a műveletnek az elvégzése időbe telhet. Ezért használjuk az async / await alkalmazást itt.

Ezzel most létrehozhatjuk az Apollo szervert a következő szakaszban.

Az Apollo szerver létrehozása

Ha emlékszel, a app.jsfájlban ApolloServera apollo-servercsomagból importáltunk . Ez egy konstruktor, amely objektumot kap érvként. Ennek az objektumnak tartalmaznia kell a sémát és a felbontót, hogy létrehozhassa a szervert.

Szóval, csípjünk app.jsegy kicsit ApolloServer.

• app.js

const server = new ApolloServer({ typeDefs, resolvers, }) // typeDefs: typeDefs, // resolvers: resolvers server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

Itt paraméterként átadunk egy objektumot, amely a sémát és a felbontót megtartja ApolloServera szerver létrehozásához, majd meghallgatja azt. Ezzel a helyünkön most már működőképes szerver működik.

Már játszhat vele, és lekérdezéseket küldhet a GraphQL játszótér segítségével a következő parancs futtatásával:

 yarn start 

Most megtekintheti a következőn: //localhost:400

• A teljes app.jsfájl

const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } const server = new ApolloServer({ typeDefs, resolvers, }) server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

Egy szerver önmagában nem sokat tesz. Hozzá kell adnunk egy start szkriptet a package.jsonfájlhoz a szerver indításához, amint kitalálta.

• package.json

 // first add nodemon: yarn add nodemon --dev "scripts": { "start": "nodemon src/index.js" } 

Ezzel van egy szerverünk, amely adatokat akar lekérni a Github API-ból. Tehát itt az ideje, hogy áttérjen az ügyfél oldalra és felhasználja az adatokat.

Csináljuk.

Az ügyféloldali felépítés a React segítségével

Az első dolog, amit meg kell tennünk, hogy hozzon létre egy új React alkalmazást a következő parancs futtatásával a terminálon:

npx create-react-app client-react-apollo 

Ezután telepítenünk kell az Apollo és a GraphQl csomagokat:

 yarn add apollo-boost @apollo/react-hooks graphql 

Most összekapcsolhatjuk az Apollo-t a React alkalmazással a index.jsfájl frissítésével .

A React és az Apollo összekapcsolása

• index.js

import React from 'react'; import ReactDOM from 'react-dom'; import ApolloClient from 'apollo-boost' import { ApolloProvider } from '@apollo/react-hooks'; import App from './App'; import './index.css'; import * as serviceWorker from './serviceWorker'; const client = new ApolloClient({ uri: '//7sgx4.sse.codesandbox.io' }) ReactDOM.render(     , document.getElementById('root') ); serviceWorker.unregister(); 

As you can see, we start by importing ApolloClient and ApolloProvider. The first helps us inform Apollo about which URL to use when fetching data. And if no uri is passed to ApolloClient, it will take the current domain name plus /graphql.

The second is the Provider which expects to receive the client object to be able to connect Apollo to React.

That said, we can now create a component that shows the data.

Fetching the data

• App.js

import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` 

Here, we have a simple GraphQL query that fetches the data. That query will be passed later to useQuery to tell Apollo which data to fetch.

• App.js

const User = ({ user: { login, avatar_url } }) => ( 
{login}
 See profile ) 

This presentational component will be used to display a user. It receives the data from the App component and displays it.

Showing the data

• App.js

function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return 
Something went wrong!
 if (loading) return 
Loading...
 return (  
Github | Users
 {data.users.map(user => (  ))}  ) } export default App 

The useQuery hook provided by Apollo receives the GraphQL query and returns three states: the loading, the error, and the data.

If the data are successfully fetched, we pass it to the User component. Otherwise we throw an error.

• The complete App.js file

import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` const User = ({ user: { login, avatar_url } }) => ( 
{login}
 See profile ) function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return 
Something went wrong!
 if (loading) return 
Loading...
 return (  
Github | Users
 {data.users.map(user => (  ))}  ) } export default App 

Great! With that, we are now done building a full-stack Apollo GraphQL app using React and Node JS.

Preview the Apollo GraphQL Server here

Preview the React App here

Find the source code here

You can find other great content like this on my blog

Thanks for reading!