GraphQL: клиентские библиотеки

Клиентские GraphQL-библиотеки автоматизируют отправку запросов, кэширование результатов и синхронизацию состояния UI с сервером.

Зачем нужно

Без специализированной библиотеки разработчик сам пишет fetch + управление кэшем + обновление UI + обработку ошибок. Apollo Client, urql и аналоги берут всё это на себя: нормализуют кэш, инвалидируют его после мутаций, дают React-хуки и TypeScript-поддержку из коробки.

Где используется

  • React/Next.js приложения с GraphQL API (Apollo Client — самый распространённый выбор)
  • Лёгкие проекты, где Apollo избыточен (urql)
  • Vue/Angular приложения (Vue Apollo, Apollo Angular)
  • React Query + ручной fetch — когда хотят минимум зависимостей

Apollo Client (основной выбор)

// Установка
// npm install @apollo/client graphql

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

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache,
  headers: { Authorization: `Bearer ${token}` },
});

// React хук useQuery
const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

function UserProfile({ userId }) {
  const { data, loading, error } = useQuery(GET_USER, {
    variables: { id: userId },
  });

  if (loading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error.message}</p>;
  return <div>{data.user.name}</div>;
}

useMutation

import { useMutation, gql } from '@apollo/client';

const CREATE_USER = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
    }
  }
`;

function CreateUserForm() {
  const [createUser, { loading, error }] = useMutation(CREATE_USER, {
    // Обновляем кэш после мутации
    refetchQueries: [{ query: GET_USERS }],
  });

  const handleSubmit = async (formData) => {
    await createUser({ variables: { input: formData } });
  };
  // ...
}

urql — лёгкая альтернатива

// npm install urql graphql

import { createClient, Provider, useQuery } from 'urql';

const client = createClient({ url: '/graphql' });

// В React-компоненте
const [result] = useQuery({ query: GET_USER, variables: { id: '42' } });
const { data, fetching, error } = result;

graphql-request — минималистичный HTTP-клиент

// npm install graphql-request graphql
import { GraphQLClient, gql } from 'graphql-request';

const client = new GraphQLClient('/graphql', {
  headers: { Authorization: `Bearer ${token}` },
});

const data = await client.request(gql`
  query { users { id name } }
`);

Частые ошибки

  • Не настраивают нормализацию кэша Apollo — мутации не обновляют список
  • Используют Apollo везде, включая простые CRUD — urql или fetch проще
  • Не генерируют TypeScript-типы из схемы (graphql-codegen) — теряют типобезопасность
  • Запрашивают больше полей, чем отображают — кэш разрастается без пользы

Связанные темы

Ресурсы