Можно ли использовать Apollo GraphQL не только для запросов к серверу, но и для локального управления состоянием (client-only fields, reactive fields)? Как это устроено?

Введение в локальное состояние Apollo

Apollo GraphQL изначально создавался для работы с удалёнными данными, но его возможности выходят далеко за пределы простых запросов к серверу. Начиная с версии 3, Apollo Client предоставляет полноценный механизм для управления локальным состоянием, который интегрируется с кэшем и позволяет обрабатывать данные так же, как и серверные. Это особенно полезно, когда нужно хранить UI-состояние, настройки пользователя или временные данные без обращения к бэкенду.

Client-only поля и reactive variables

Основой локального управления являются client-only поля. Они объявляются в GraphQL-запросах с директивой @client и не отправляются на сервер. Например, можно добавить поле isLoggedIn к типу User, которое будет храниться только в кэше Apollo. Для работы с такими полями используются reactive variables — специальные объекты, которые автоматически обновляют все компоненты, подписанные на них.

import { makeVar, useReactiveVar } from '@apollo/client';

// Создаём reactive variable
export const isLoggedInVar = makeVar(false);

// Используем в компоненте
function App() {
  const isLoggedIn = useReactiveVar(isLoggedInVar);
  return <div>{isLoggedIn ? 'Добро пожаловать' : 'Войдите'}</div>;
}

// Обновляем значение
isLoggedInVar(true);

Такой подход позволяет избежать лишних библиотек вроде Redux или MobX, так как Apollo уже управляет кэшем и реактивностью. Client-only поля можно комбинировать с серверными данными в одном запросе, что упрощает архитектуру приложения.

Практическое применение

Локальное состояние Apollo особенно полезно в средних и крупных React-приложениях, где уже используется GraphQL. Например, можно хранить корзину покупок, фильтры поиска или модальные окна. Apollo автоматически кэширует результаты и обеспечивает согласованность данных между компонентами.

const GET_USER = gql`
  query GetUser {
    user {
      id
      name
      isLoggedIn @client
    }
  }
`;

В этом примере isLoggedIn не существует на сервере, но Apollo вернёт его из локального кэша. Для этого нужно настроить поле в кэше через typePolicies или использовать reactive variables.

Вывод

Apollo GraphQL — это не только клиент для серверных запросов, но и мощный инструмент для управления локальным состоянием. Если ваше приложение уже использует Apollo, стоит рассмотреть его для хранения UI-состояния, чтобы уменьшить количество зависимостей и упростить синхронизацию данных. Однако для очень сложных состояний с большим количеством бизнес-логики может быть удобнее специализированное решение вроде Redux Toolkit.