Настройка Apollo Client в React

Установите @apollo/client и graphql. Пакет graphql является зависимостью, необходимой Apollo Client для разбора документов запросов с помощью шаблонного тега gql.

В проектах TypeScript оба пакета содержат собственные определения типов, поэтому пакеты @types не нужны.

Создайте экземпляр ApolloClient с кэшем и связующим модулем. Простейшая настройка: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). Сокращённая запись uri создаёт HttpLink внутри.

Для большего контроля создайте цепочку связующих модулей вручную и передайте её параметру link вместо uri.

Оберните приложение React в ApolloProvider и передайте свойство client: ApolloProvider client={client}. Это делает экземпляр Apollo Client доступным всем дочерним компонентам через контекст React.

Каждый вызов useQuery и useMutation в дереве компонентов автоматически использует этот клиент без сквозной передачи свойств.

InMemoryCache — кэш Apollo Client по умолчанию. Он нормализует полученные данные по типу и ID, сохраняя каждую сущность под уникальным ключом кэша (например, User:1). Когда любой запрос получает User:1, все последующие чтения этой сущности возвращают обновлённые данные.

Благодаря нормализации обновление пользователя в одной мутации автоматически обновляет результаты всех запросов, содержащих этого пользователя, без дополнительного кода.

HttpLink отвечает за передачу данных по HTTP от Apollo Client к серверу GraphQL. Настройте его с помощью uri и при необходимости укажите fetch, headers и credentials.

В сложных случаях разделяющие связующие модули направляют разные операции к разным конечным точкам: подписки передаются через WebSocket (WebSocketLink), а запросы и мутации — через HTTP (HttpLink).

Импортируйте setContext из @apollo/client/link/context. Создайте связующий модуль авторизации: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Объедините его с HttpLink: authLink.concat(httpLink).

Связующий модуль setContext выполняется перед каждым запросом и динамически добавляет заголовки авторизации к каждой операции.

Объединяйте связующие модули с помощью ApolloLink.from([authLink, errorLink, httpLink]) или authLink.concat(httpLink). Связующие модули работают как промежуточный слой: каждый обрабатывает операцию и передаёт её в next(). Последний модуль цепочки отправляет фактический HTTP-запрос.

Распространённые цепочки: связующий модуль авторизации (добавляет заголовки) + связующий модуль ошибок (обрабатывает ошибки) + связующий модуль HTTP (отправляет запрос).

Импортируйте onError из @apollo/client/link/error. Связующий модуль ошибок глобально перехватывает ошибки GraphQL и сетевые ошибки. Используйте его для перенаправления на страницу входа при ошибках UNAUTHENTICATED или для отображения глобального всплывающего уведомления о сетевой ошибке.

Связующий модуль ошибок должен находиться перед связующим модулем HTTP в цепочке, но может вызвать forward(operation), чтобы повторить запрос.

cache-first (по умолчанию): немедленно вернуть данные из кэша; если они устарели, повторно получить их в фоновом режиме. network-only: всегда получать данные с сервера и обновлять кэш. cache-and-network: немедленно вернуть данные из кэша И выполнить запрос, обновив интерфейс после получения ответа. cache-only: читать только из кэша и выдавать ошибку, если данных в нём нет. no-cache: всегда получать данные и никогда не записывать их в кэш.

Выбирайте вариант с учётом требований к актуальности данных: для панелей мониторинга часто используют cache-and-network, а для форм профиля пользователя — network-only.

Задайте политику fetchPolicy по умолчанию в defaultOptions объекта InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Отдельные вызовы useQuery могут переопределить это значение для конкретного запроса.

Разумное глобальное значение по умолчанию сокращает количество шаблонного кода, необходимого для указания fetchPolicy в каждом вызове хука.

Расширение браузера Apollo Client DevTools добавляет панель Apollo в Chrome DevTools. Оно показывает все запросы в кэше и их текущие данные, позволяет изучать нормализованный кэш и повторно запускать запросы из панели DevTools.

Установите расширение из Chrome Web Store и инициализируйте клиент с параметром devtools: { enabled: true } (по умолчанию включённым в режиме разработки).

В цепочке связующих модулей Apollo Client где должен находиться errorLink относительно httpLink?

Установите @apollo/client и graphql, создайте ApolloClient с InMemoryCache и цепочкой связующих модулей, а затем оберните приложение в ApolloProvider. Цепочка связующих модулей объединяет authLink (добавляет токены), errorLink (глобально обрабатывает ошибки) и httpLink (передаёт данные по HTTP). Политика получения данных управляет приоритетом кэша и сети, а InMemoryCache нормализует сущности по типу и идентификатору.

Расширение браузера Apollo DevTools упрощает просмотр кэша и отладку.