Установка и настройка Apollo Client для работы с GraphQL

Установка Apollo Client

Первым шагом на пути к работе с GraphQL будет установка необходимых библиотек. Apollo Client берет на себя всю сложную магию взаимодействия с GraphQL API и делает это весьма элегантно. Для начала установим основные пакеты.

Выполним установку Apollo Client и дополнительных зависимостей:

npm install @apollo/client graphql

• @apollo/client — основной пакет для работы с Apollo в React.
• graphql — библиотека для парсинга и построения запросов.

Это всё, что нам нужно для начала. Простота радует, не правда ли?

Настройка Apollo Client

Теперь, когда зависимости установлены, давайте поработаем с нашим клиентом. Всё начинается с создания экземпляра Apollo Client и передачи ему базовых настроек.

Создадим файл apolloClient.ts (или .js, если что-то пойдет не так) в корне нашего проекта:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql', // URL вашего GraphQL-сервера
  cache: new InMemoryCache(), // Настройка кэша для клиента
});

export default client;

• uri: указывает на адрес GraphQL API. Замените https://your-graphql-endpoint.com/graphql на URL вашего сервера.
• cache: Apollo Client использует кэш для хранения данных, чтобы не делать лишние запросы. По умолчанию используется InMemoryCache, которого нам хватит для базовых задач.

Что это за магия?

Пара строк, а мы уже создали полноценный клиент для GraphQL. Этот клиент будет использоваться для отправки запросов и обработки ответов. Вся работа с сетью становится прозрачной и удобной.

Интеграция ApolloProvider

Apollo Client — это, конечно, мощно, но его нужно как-то подключить к React-приложению. Здесь в игру вступает компонент ApolloProvider.

Добавляем ApolloProvider в корень приложения

Открываем ваш файл index.tsx (или App.tsx, если вы не используете index.tsx). Импортируем созданный клиент, а также ApolloProvider:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ApolloProvider } from '@apollo/client';
import client from './apolloClient';

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

Что здесь происходит? Мы оборачиваем наше приложение компонентом ApolloProvider и передаем ему созданный ранее клиент. Теперь любой компонент внутри App имеет доступ к Apollo Client и может отправлять запросы к серверу.

Если вы привыкли к Redux, то это похоже на использование Provider для подключения глобального состояния. Удобно, согласитесь?

Что такое Apollo Provider?

ApolloProvider — это всего лишь хранилище, которое предоставляет наш клиент всей иерархии компонентов React. Это необходимо, чтобы каждый компонент мог использовать хуки вроде useQuery или useMutation, не задумываясь о том, как подключиться к клиенту.

Краткий обзор

• ApolloProvider обеспечивает доступ к клиенту для всей структуры React-приложения.
• Все дочерние компоненты могут использовать useQuery, useMutation и другие возможности Apollo.
• Конфигурация выполняется один раз и автоматически распространяется на всё приложение.

Обзор основных компонентов Apollo Client

Перед тем как углубляться в код, давайте рассмотрим, что еще предлагает Apollo Client.

Основные части

Мы будем использовать их на протяжении всех следующих лекций. Не переживайте, если что-то звучит сложно: всё станет понятнее, когда мы начнем писать код.

Проверка работоспособности

Перед тем как двигаться дальше, убедимся, что всё подключено правильно. Мы сейчас не будем добавлять запросы, просто проверим, что приложение запускается без ошибок.

Так что запустите приложение:

npm start

Если вы видите ваш прекрасный интерфейс, а в консоли браузера нет ошибок, значит, вы всё сделали правильно. Поздравляю! Ваш Apollo Client настроен и готов к работе.

Частые ошибки при настройке

На этом этапе может возникнуть несколько типичных проблем:

1. Ошибка "Cannot find module 'graphql' или аналогичная": это значит, что библиотека graphql не была установлена или не указана в package.json. Убедитесь, что вы выполнили команду npm install graphql.

2. ApolloProvider сообщает об отсутствии клиента: проверьте, что вы передали клиент через проп client в ApolloProvider.

3. Ошибка подключения к серверу GraphQL: убедитесь, что URL вашего API uri указан правильно.

Зачем всё это нужно?

На собеседовании часто спрашивают: "Почему бы не использовать fetch или axios для работы с GraphQL?" Вот два аргумента, которые позволяют заткнуть критиков за пояс:

• Apollo упрощает интеграцию с GraphQL. Вам не нужно думать о форматировании запросов, обработке кэша или обновлении данных — всё это делается автоматически.
• Apollo работает с хуками. Это делает код более декларативным и удобным.

Кроме того, в реальных проектах часто требуется кэширование, управление состоянием загрузки и обработка ошибок. Apollo справляется с этим из коробки.

Теперь ваше React-приложение полностью готово к работе с GraphQL. В следующих лекциях мы начнем отправлять запросы и создавать настоящие приложения, которые могут похвастаться идеальной интеграцией с сервером.