Начало работы с React и клиентом Apollo
Что такое клиент Аполлона
Apollo Client — это полная библиотека управления состоянием для приложений JavaScript.
Он использует API GraphQL для обработки выборки данных. Это означает, что для использования Apollo Client вам необходимо иметь GraphQL API, к которому вы будете подключаться.
Что такое GraphQL
GraphQL — это открытый язык запросов и обработки данных для API, а также среда выполнения для выполнения запросов с существующими данными. GraphQL использует Mutation и Query для достижения этой цели.
Что такое запрос и мутация
- Запрос: запрос GraphQL используется для чтения или выборки данных.
Пример запроса GraphQL показан в примере ниже.
{
query getUserDetails {
users {
id
name
email
}
}
}
Примечание. Приведенный выше запрос называется
getUserDetailsи он возвращает поля идентификатора, имени и электронной почты.
- Мутация: Мутации используются для любого типа запроса, который изменяет данные, создает, обновляет и удаляет операции.
Пример мутации GraphQL выглядит так, как показано в примере ниже.
{
mutation addUser(name: String!, email: String!){
addUser(name: $name, email: $email){
id
name
email
created_at
}
}
}
Примечание. В приведенном выше примере мутации он получает
nameа также
Настроить React-приложение
Я буду использовать шаблон create-react-app для настройки моего приложения для реагирования. На вашем терминале выполните приведенную ниже команду, чтобы сгенерировать шаблон реакции.
npx create-react-app rick-and-morty
после выполнения вышеуказанной команды откройте сгенерированную папку в интегрированной среде разработки.
Установить зависимости
npm install apollo-boost graphql react-apollo
Подключить клиент
Чтобы подключить реагирующее приложение к Graphql API, в index.js файл вашего реагирующего приложения, добавьте следующий код ниже.
import ApolloClient from "apollo-boost";
import { ApolloProvider } from 'react-apollo';
const client = new ApolloClient({
uri: 'https://rickandmortyapi.com/graphql/',
});
… затем оберните ваши подкомпоненты с помощью ApolloProvider, передав клиент, который мы определили выше как prop. Пример показан ниже.
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root")
);
После того, как все вышеперечисленное выполнено, мы успешно настроили базовое клиентское соединение apollo с внутренним API GraphQL.
Примечание: найти больше здесьдля более сложной настройки и конфигурации клиента Apollo.
Существуют различные методы использования Graphql API при использовании клиента Apollo:
- Рендер реквизит
- Крючки
- Компонент высшего порядка (HOC)
Все различные методы использования GraphQL API можно реализовать с помощью react-apollo пакет, который мы установили ранее.
Запросы
Рендер реквизит
Чтобы делать запросы с помощью метода Render Prop, нам нужно использовать метод Query компонент из react-apollo. Пример показан ниже.
import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";
const GET_CHARACTERS = gql`
query getCharacters {
characters {
results {
id
name
image
}
}
}
`;
export default function CharacterWithRender() {
return (
<Query query={GET_CHARACTERS}>
{({ loading, error, data }) => {
if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
return (
<div className="characters">
{data.characters.results.map(character => (
<div key={character.name} className="character">
<img src={character.image} alt={character.name} />
<p>{character.name}</p>
</div>
))}
</div>
);
}}
</Query>
);
}
Крючки
Чтобы делать запросы с помощью метода Hooks, нам нужно использовать метод useQuery крючок из react-apollo. Пример показан ниже.
Пример показан ниже
import React from "react";
import { gql } from "apollo-boost";
import { useQuery } from "react-apollo";
const GET_CHARACTERS = gql`
query getCharacters {
characters {
results {
id
name
image
}
}
}
`;
function CharacterWithHook() {
const { loading, error, data } = useQuery(GET_CHARACTERS);
if (error) {
return <div>Error</div>;
}
if (loading) {
return (
<div className="App">
<h2>Loading...</h2>
</div>
);
}
if (data) {
if (data.characters.results.length > 0) {
return (
<div className="characters">
{data.characters.results.map(character => (
<div key={character.name} className="character">
<img src={character.image} alt={character.name} />
<p>{character.name}</p>
</div>
))}
</div>
);
}
}
}
export default CharacterWithHook;
Компонент высшего порядка (HOC)
Мы также можем использовать withApollo Компонент более высокого порядка для выполнения запросов, вы можете сделать это, просто обернув экспорт вашего компонента с помощью withApollo. Это внедряет клиентскую поддержку в компонент, что позволяет вам выполнять запросы GraphQL.
Пример показан ниже
import React, { useState } from "react";
import { gql } from "apollo-boost";
import { withApollo } from "react-apollo";
const GET_CHARACTERS = gql`
query getCharacters {
characters {
results {
id
name
image
}
}
}
`;
function CharacterWithHOC({ client }) {
const [characters, setCharacters] = useState([]);
client
.query({ query: GET_CHARACTERS })
.then(res => setCharacters(res.data.characters.results))
.catch(err => console.log(err));
if (characters.length > 0) {
return (
<div className="characters">
{characters.map(character => (
<div key={character.name} className="character">
<img src={character.image} alt={character.name} />
<p>{character.name}</p>
</div>
))}
</div>
);
}
return (
<div className="App">
<h2>Loading...</h2>
</div>
);
}
export default withApollo(CharacterWithHOC);
Мутации
Рендер реквизит
Чтобы произвести мутации с помощью метода Render Prop, нам нужно использовать Mutation компонент из react-apollo. Пример показан ниже.
import React, { useState } from 'react';
import { Mutation } from 'react-apollo';
import { gql } from 'apollo-boost';
const LOGIN_MUTATION = gql`
mutation userLogin($email: String!, $password: String!) {
userLogin(email: $email, password: $password) {
username
email
id
token
}
}
`;
export default function MutationWithRender() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<Mutation mutation={LOGIN_MUTATION}>
{(loginUser, { loading, error, data }) => {
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
return (
<form
id="signinForm"
className="text-center p-4"
onSubmit={e => {
e.preventDefault();
loginUser({ variables: { email, password } });
}}
>
<p className="h4 mb-4 f-1">Sign In</p>
<input
title="Email"
id="email"
name="email"
value={email}
onChange={e => setEmail(e.target.value)}
type="email"
required
/>
<input
title="Password"
id="password"
name="password"
type="password"
value={password}
onChange={e => setPassword(e.target.value)}
required
/>
<div className="form-group my-4">
<button className="btn btn-block" type="submit">
Sign In
</button>
</div>
</form>
);
}}
</Mutation>
);
}
Крючки
Чтобы произвести мутации с помощью метода Hooks, нам нужно использовать useMutation крючок из react-apollo. Пример показан ниже.
Пример показан ниже
import React, { useState } from 'react';
import { useMutation } from 'react-apollo';
import { gql } from 'apollo-boost';
const LOGIN_MUTATION = gql`
mutation userLogin($email: String!, $password: String!) {
userLogin(email: $email, password: $password) {
username
email
id
token
}
}
`;
export function MutationWithHook() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loginUser, { data, error, loading }] = useMutation(LOGIN_MUTATION);
if (error) {
alert('Error Logging In User');
}
if (data) {
alert('Successfully Logged In');
}
return (
<form
id="signinForm"
className="text-center p-4"
onSubmit={e => {
e.preventDefault();
loginUser({ variables: { email, password } });
}}
>
<p className="h4 mb-4 f-1">Sign In</p>
<input
title="Email"
id="email"
name="email"
value={email}
onChange={e => setEmail(e.target.value)}
type="email"
required
/>
<input
title="Password"
id="password"
name="password"
type="password"
value={password}
onChange={e => setPassword(e.target.value)}
required
/>
<div className="form-group my-4">
<button className="btn btn-block" type="submit">
Sign In
</button>
</div>
</form>
);
}
export default MutationWithHook;
Компонент высшего порядка (HOC)
Мы также можем использовать withApollo Компонент более высокого порядка для внесения изменений, вы можете сделать это, просто обернув экспорт вашего компонента с помощью withApollo. Это вводит клиентскую поддержку в компонент, что позволяет вам вносить изменения в GraphQL.
Пример показан ниже
import React, { useState } from 'react';
import { withApollo } from 'react-apollo';
import { gql } from 'apollo-boost';
const LOGIN_MUTATION = gql`
mutation userLogin($email: String!, $password: String!) {
userLogin(email: $email, password: $password) {
username
email
id
token
}
}
`;
export function MutationWithHOC({ client }) {
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const { mutate } = client;
const onSubmit = async e => {
try {
e.preventDefault();
const res = await mutate({
mutation: LOGIN_MUTATION,
variables: {
email,
password
}
});
setSuccess(res.data);
} catch (err) {
setError(err);
}
};
if(error) {
alert('Error Logging In User');
}
if (success) {
alert('Successfully Logged In');
}
return (
<form id="signinForm" className="text-center p-4" onSubmit={onSubmit}>
<p className="h4 mb-4 f-1">Sign In</p>
<input
title="Email"
id="email"
name="email"
value={email}
onChange={e => setEmail(e.target.value)}
type="email"
required
/>
<input
title="Password"
id="password"
name="password"
type="password"
value={password}
onChange={e => setPassword(e.target.value)}
required
/>
<div className="form-group my-4">
<button className="btn btn-block" type="submit">
Sign In
</button>
</div>
</form>
);
}
export default withApollo(MutationWithHOC);
Вывод
С помощью клиента Apollo можно сделать гораздо больше, например кэширование, повторную загрузку, подписки и многое другое.
В этой статье мы рассмотрели, как настроить базовый клиент apollo с помощью реакции, различные методы, которые мы можем использовать для создания запросов и мутаций, а также примеры того, как делать запросы и мутации в наших компонентах реакции.
Найдите код, используемый в этом проекте, на Гитхаб
Найдите дополнительную информацию о клиенте Apollo здесь
Если у вас есть какие-либо вопросы или отзывы об этой статье, не стесняйтесь оставлять комментарии.
Спасибо за чтение.
Эта статья изначально была опубликована на моем блог
