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 тут

Знайдіть тут вихідний код

Ви можете знайти інший чудовий вміст, подібний до цього, у моєму блозі

Дякуємо за читання!