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.js
a 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.js
fá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.js
fá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 users
a users
sé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.js
fájlban ApolloServer
a apollo-server
csomagbó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.js
egy 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 ApolloServer
a 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.js
fá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.json
fá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.js
fá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!
