Какие подходы существуют для кэширования запросов GraphQL на клиенте?

Введение в кэширование GraphQL на клиенте

GraphQL-запросы часто возвращают вложенные и связанные данные, поэтому простое кэширование по URL, как в REST, не работает. На клиенте нужно решать, как хранить ответы, чтобы избежать лишних сетевых вызовов и поддерживать актуальность UI. Существует несколько подходов, различающихся по сложности и автоматизации.

Нормализованный кэш (Apollo Client, Relay)

Этот подход разбивает ответ на отдельные объекты по типу и id, сохраняя их в плоской структуре. При повторном запросе Apollo собирает данные из кэша, а при мутации автоматически обновляет связанные объекты. Пример настройки Apollo:

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

const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          todos: {
            merge(existing, incoming) {
              return incoming; // замена списка
            }
          }
        }
      }
    }
  })
});

Плюсы: автоматическая инвалидация, удобно для сложных связей. Минусы: сложнее конфигурация, требует понимания идентификации объектов.

Ручное кэширование с ключами (react-query, SWR)

Здесь каждый запрос получает строковый ключ, а библиотека управляет временем жизни и повторной загрузкой. Пример с react-query:

import { useQuery } from '@tanstack/react-query';

const fetchTodos = async () => {
  const res = await fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: '{ todos { id title } }' })
  });
  return res.json();
};

function Todos() {
  const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos });
  return ...;
}

Подход прост, легко контролировать staleTime и refetch. Но нет автоматической нормализации, поэтому при изменении одного объекта нужно вручную обновлять связанные запросы.

Persisted queries и HTTP-кэш

Для GET-запросов с persisted query hash можно использовать стандартный HTTP-кэш (CDN, браузер). Это снижает нагрузку на сервер, но не решает проблему консистентности на клиенте. Применяется как дополнение к основному кэшу.

Вывод

Для крупных приложений с множеством связанных сущностей выбирайте нормализованный кэш (Apollo/Relay). Для небольших проектов или когда нужен полный контроль над обновлениями — ручное кэширование с react-query/SWR. Persisted queries полезны для ускорения загрузки, но не заменяют клиентский кэш.