0Pricing
Vue Academy · Урок

Настройка Apollo Client во Vue 3

Настройка ApolloClient, InMemoryCache, provideApolloClient() и @vue/apollo-composable

«Настройка Apollo Client во Vue 3» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

GraphQL с Vue

GraphQL позволяет клиенту запросить ровно те данные, которые ему нужны, одним запросом. Клиент Apollo — самый популярный клиент GraphQL, а @vue/apollo-composable интегрирует его с API композиции Vue 3.

Установка пакетов

Вам понадобятся ядро Apollo, анализатор GraphQL и слой компонуемых функций Vue.

npm install @apollo/client graphql @vue/apollo-composable

Создание клиента

Клиенту Apollo нужны адрес сервера uri и кэш. InMemoryCache хранит результаты запросов, поэтому повторное чтение происходит мгновенно.

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

const apolloClient = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
})

Назначение кэша

InMemoryCache нормализует ответы по идентификатору сущности. Если два запроса возвращают один и тот же объект, кэш сохраняет его один раз, а его обновление обновляет все представления, которые его используют.

Предоставление клиента

Зарегистрируйте клиент для всего приложения, чтобы каждый компонент мог выполнять запросы. Ключ внедрения DefaultApolloClient подключает его к API композиции.

import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApp, provide, h } from 'vue'

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
    return () => h(App)
  }
})

Несколько клиентов

Для нескольких конечных точек GraphQL предоставьте карту ApolloClients и задайте имя каждого клиента. Компоненты выбирают один из них с помощью параметра clientId.

import { ApolloClients } from '@vue/apollo-composable'

provide(ApolloClients, {
  default: apolloClient,
  analytics: analyticsClient
})

provideApolloClient

Вне setup компонента — например, внутри компонуемой функции — используйте provideApolloClient, чтобы сделать клиент доступным для вызовов useQuery.

import { provideApolloClient } from '@vue/apollo-composable'

provideApolloClient(apolloClient)
// now useQuery works in this composable

Добавление заголовков аутентификации

Реальным API нужен токен аутентификации. Настройте headers в параметрах клиента или используйте механизм связи Apollo, чтобы добавлять токен к каждому запросу.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'Bearer ' + token
  }
})

Настройка параметров по умолчанию

Поле defaultOptions настраивает поведение, например политику загрузки по умолчанию — можно всегда сначала читать данные из кэша.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: { fetchPolicy: 'cache-and-network' }
  }
})

Создание первого запроса

Определите запрос с помощью шаблонного тега gql из @apollo/client/core. Он преобразует строку GraphQL в документ, понятный Apollo.

import { gql } from '@apollo/client/core'

const GET_POSTS = gql(
  'query { posts { id title } }'
)

Проверка настройки

После предоставления клиента любой компонент может вызвать useQuery с этим документом. Если данные возвращаются, клиент и поставщик настроены правильно.

Быстрая проверка

Проверьте свои знания о настройке Apollo.

Итоги

Вы настроили Apollo во Vue 3:

  • Создали ApolloClient с адресом uri и InMemoryCache.
  • Кэш нормализует результаты по идентификатору сущности.
  • Предоставили его с помощью DefaultApolloClient (или ApolloClients для нескольких клиентов).
  • Использовали provideApolloClient внутри компонуемых функций и определяли запросы с помощью gql.

Часто задаваемые вопросы

Урок «Настройка Apollo Client во Vue 3» бесплатный?

Да — полный текст урока «Настройка Apollo Client во Vue 3» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка Apollo Client во Vue 3»?

Настройка ApolloClient, InMemoryCache, provideApolloClient() и @vue/apollo-composable Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Настройка Apollo Client во Vue 3»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка Apollo Client во Vue 3
  2. useQuery для получения данных
  3. useMutation для изменения данных
  4. Подписки в реальном времени с useSubscription
← Назад к Vue Academy