GraphQL клиенты

SvelteKit не имеет встроенной поддержки GraphQL, однако существует несколько эффективных библиотек-клиентов для работы с этим протоколом. Наиболее популярные решения включают Apollo Client, urql и graphql-request. Выбор конкретного клиента зависит от сложности проекта, необходимости кэширования, SSR и интеграции с SvelteKit.

В SvelteKit GraphQL-клиент обычно инициализируется в src/lib или отдельном модуле, чтобы обеспечить повторное использование и централизованное управление состоянием запросов.

Apollo Client

Apollo Client — мощная библиотека для работы с GraphQL, поддерживающая кэширование, подписки и SSR. Основные шаги интеграции:

Установка

npm install @apollo/client graphql

Настройка клиента

Создается файл src/lib/apolloClient.js:

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

export const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://example.com/graphql', // URL GraphQL сервера
  }),
  cache: new InMemoryCache(),
});

Использование в SvelteKit

SvelteKit поддерживает SSR, поэтому Apollo Client можно использовать как в серверных, так и в клиентских компонентах.

<script context="module">
  import { client } from '$lib/apolloClient';
  import { gql } from '@apollo/client';

  export async function load() {
    const { data } = await client.query({
      query: gql`
        query GetUsers {
          users {
            id
            name
            email
          }
        }
      `
    });

    return { props: { users: data.users } };
  }
</script>

<script>
  export let users;
</script>

<ul>
  {#each users as user}
    <li>{user.name} — {user.email}</li>
  {/each}
</ul>

Ключевой момент: Apollo автоматически управляет кэшированием, поэтому повторные запросы к тем же данным происходят мгновенно.

urql

urql — более легковесная альтернатива Apollo, ориентированная на простые и быстрые проекты. Поддерживает SSR через SvelteKit adapters.

Установка

npm install @urql/svelte graphql

Настройка клиента

Создается src/lib/urqlClient.js:

import { createClient } from '@urql/svelte';

export const client = createClient({
  url: 'https://example.com/graphql',
  fetchOptions: {
    credentials: 'include'
  }
});

Использование в компонентах

<script>
  import { client } from '$lib/urqlClient';
  import { query } from '@urql/svelte';

  const GET_USERS = `
    query {
      users {
        id
        name
        email
      }
    }
  `;

  const usersQuery = query(client, GET_USERS);
</script>

{#if $usersQuery.fetching}
  <p>Загрузка...</p>
{:else if $usersQuery.error}
  <p>Ошибка: {$usersQuery.error.message}</p>
{:else}
  <ul>
    {#each $usersQuery.data.users as user}
      <li>{user.name} — {user.email}</li>
    {/each}
  </ul>
{/if}

Особенность urql: реактивная подписка на данные через $usersQuery, что делает обновление UI простым и предсказуемым.

graphql-request

graphql-request — минималистичный клиент, который идеально подходит для серверных запросов и статических генераций. Он не предоставляет кэширование, поэтому подходит для SSR и SSG сценариев.

Установка

npm install graphql-request

Пример запроса

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

const client = new GraphQLClient('https://example.com/graphql');

export async function load() {
  const query = gql`
    query GetPosts {
      posts {
        id
        title
      }
    }
  `;

  const data = await client.request(query);
  return { props: { posts: data.posts } };
}

Преимущество: простота и высокая скорость, отсутствие лишнего кода и зависимостей.

SSR и GraphQL

SvelteKit поддерживает server-side rendering, поэтому важно учитывать, как клиент GraphQL будет работать на сервере. Для этого:

  1. Apollo Client и urql можно инициализировать в load функциях, чтобы данные были доступны до рендеринга страницы.
  2. graphql-request идеально подходит для серверного load, так как он не зависит от браузера и не имеет реактивного состояния.
  3. При использовании кэширования нужно учитывать гидрацию на клиенте, чтобы избежать повторных запросов.

Подписки и реальное время

Для проектов с реальными обновлениями данных (чат, лента новостей) используется WebSocket-подключение:

  • Apollo Client поддерживает subscriptions-transport-ws или graphql-ws.
  • urql предоставляет subscriptionExchange для интеграции с WebSocket.

Пример Apollo Subscription:

import { split, HttpLink, ApolloClient, InMemoryCache } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';

const httpLink = new HttpLink({ uri: 'https://example.com/graphql' });
const wsLink = new WebSocketLink({ uri: 'wss://example.com/graphql', options: { reconnect: true } });

const link = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
  },
  wsLink,
  httpLink
);

export const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
});

Это позволяет интегрировать подписки в любой SvelteKit компонент с реактивным обновлением UI.

Организация структуры проекта

  • src/lib/graphql/ — хранение запросов и мутаций.
  • src/lib/clients/ — инициализация Apollo, urql или graphql-request.
  • routes/ — использование load функций для SSR-запросов.
  • Компоненты используют клиент через import, что обеспечивает централизованное управление.

Рекомендация: при большом количестве запросов лучше вынести GraphQL операции в отдельные .graphql файлы и импортировать их через graphql-tag.

Советы по производительности

  • Использовать InMemoryCache в Apollo для минимизации повторных запросов.
  • В urql применить cacheExchange или suspense mode, чтобы ускорить рендеринг.
  • Для graphql-request кэшировать данные на уровне SvelteKit load или использовать адаптеры типа adapter-static для SSG.
  • Подписки включать только на компонентах, где действительно требуется реальное время.

SvelteKit позволяет гибко выбирать подход к интеграции GraphQL: легковесные запросы через graphql-request, реактивные подписки через urql или полноценное кэширование и SSR через Apollo Client. Правильная организация структуры проекта и разделение запросов, мутаций и подписок обеспечивает масштабируемость и поддерживаемость приложений.

Оглавление