Apollo Client - це повна бібліотека управління станом для програм JavaScript. Це потужний інструмент, оскільки його можна використовувати як на задній, так і на передній стороні.
У цьому підручнику ми будемо використовувати його на передньому та задньому кінці, будуючи Apollo GraphQL Server із Node JS. Тоді ми будемо споживати дані на стороні клієнта за допомогою React JS.
Якщо ви новачок у GraphQl, цей посібник може вам допомогти. В іншому випадку давайте почнемо.
- Побудова сервера за допомогою Apollo, Node та GraphQl
- Схема GraphQl
- Розв'язувачі GraphQl
- Створення сервера Apollo
- Побудова на стороні клієнта за допомогою React
- Підключення React до Аполлона
- Отримання даних
- Показ даних
Побудова сервера за допомогою Apollo, Node та GraphQl
У цьому посібнику я буду використовувати API Github, щоб мати дані для показу, і цю операцію буде виконувати сервер GraphQl, побудований за допомогою Apollo та Node JS.
Щоб це сталося, нам потрібно виконати таку команду на терміналі, щоб створити новий проект Node JS:
yarn init
Після завершення налаштування ми можемо встановити необхідні пакети, виконавши цю команду:
yarn add apollo-server graphql axios
Чудово, тепер у нас є все, що нам потрібно для створення сервера. Отже, давайте спочатку створимо новий файл app.js
у кореневій системі, який буде точкою входу нашого сервера.
Далі нам потрібно визначити схему Graphql, яка відображає те, як повинні виглядати наші дані.
Схема GraphQl
Схема описує форму вашого графіку даних. Він визначає набір типів з полями, які заповнюються із ваших внутрішніх сховищ даних. Отже, давайте додамо нову схему у app.js
файл.
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] } `
Як бачите, ми не використовуємо всі дані, надані API Github. Нам просто потрібен ідентифікатор, який буде використовуватися як контрольний ключ у React App, логін та avatar_url. У нас також є запит, users
який повертає масив користувачів.
Тепер, коли ми маємо схему GraphQL, настав час створити відповідні розв'язувачі для завершення операції запиту.
Розв'язувачі GraphQl
Резольвер - це сукупність функцій, яка допомагає генерувати відповідь із запиту GraphQL. Отже, давайте додамо новий вирішувач у app.js
файл.
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 } }, }, }
Резолютор повинен відповідати відповідній схемі за іменем. Отже, тут users
йдеться про users
запит, визначений у нашій схемі. Це функція, яка отримує дані з API за допомогою axios
і повертає, як очікувалося, ідентифікатор, логін та аватар_url.
І ця операція може зайняти час. Ось чому для обробки тут використовується async / await.
Завдяки цьому ми можемо створити Apollo Server у наступному розділі.
Створення сервера Apollo
Якщо ви пам’ятаєте, у app.js
файлі ми імпортували ApolloServer
з apollo-server
пакета. Це конструктор, який отримує об'єкт як аргумент. І цей об’єкт повинен містити схему та вирішувач, щоб мати можливість створити сервер.
Отже, давайте app.js
трохи налаштуємо ApolloServer
.
app.js
const server = new ApolloServer({ typeDefs, resolvers, }) // typeDefs: typeDefs, // resolvers: resolvers server.listen().then(({ url }) => console.log(`Server ready at ${url}`))
Тут ми передаємо як параметр об’єкт, який містить схему та розподільник ApolloServer
для створення сервера, а потім прослуховує його. Завдяки цьому ми маємо функціональний сервер для роботи.
Ви вже можете грати з ним і надсилати запити за допомогою GraphQL playground, виконуючи цю команду:
yarn start
Тепер ви можете переглянути його на //localhost:400
- Повний
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] } ` 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}`))
Сам по собі сервер мало що робить. Нам потрібно додати у package.json
файл скрипт запуску, щоб, як ви здогадалися, запустити сервер.
package.json
// first add nodemon: yarn add nodemon --dev "scripts": { "start": "nodemon src/index.js" }
З цим ми маємо сервер для отримання даних із Github API. Отже, настав час перейти на сторону клієнта та спожити дані.
Давайте зробимо це.

Побудова на стороні клієнта за допомогою React
Перше, що нам потрібно зробити, це створити нову програму React, запустивши в терміналі таку команду:
npx create-react-app client-react-apollo
Далі нам потрібно встановити пакети Apollo та GraphQl:
yarn add apollo-boost @apollo/react-hooks graphql
Тепер ми можемо підключити Apollo до нашої програми React, оновивши index.js
файл.
Підключення React до Аполлона
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
useQuery
Крюк при умови Аполлона приймає запит GraphQL і повертає три стану: навантаження, помилка, і дані.
Якщо дані успішно отримані, ми передаємо їх користувацькому компоненту. В іншому випадку ми видаємо помилку.
- Повний
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 } } ` 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
Чудово! З цим ми вже закінчили створювати повнофункціональний додаток Apollo GraphQL за допомогою React та Node JS.
Попередньо перегляньте Apollo GraphQL Server тут
Попередньо перегляньте додаток React тут
Знайдіть тут вихідний код
Ви можете знайти інший чудовий вміст, подібний до цього, у моєму блозі
Дякуємо за читання!
