Vue Academy · Урок

useQuery для получения данных

useQuery(QUERY), result, loading, error, variables и параметры fetchPolicy

Урок 2 из 413 шагов

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

Запросы с помощью useQuery

Компонуемая функция useQuery выполняет запрос GraphQL и возвращает реактивное состояние. Она автоматически повторяет запрос при изменении переменных и обновляется при изменении кэша.

Базовое использование

Передайте документ gql. useQuery возвращает реактивные ссылки result, loading и error.

import { useQuery } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { result, loading, error } = useQuery(gql(
  'query { posts { id title } }'
))

Чтение результата

result — это реактивная ссылка. Получите доступ к данным через result.value: в нём хранится ответ запроса, имеющий точно такую же структуру, как и сам запрос.

const posts = computed(() => result.value?.posts ?? [])

Состояния загрузки и ошибки

Используйте loading, чтобы показать индикатор загрузки, а error — чтобы показать сообщение. Обе реактивные ссылки обновляются по мере выполнения запроса.

<template>
  <p v-if="loading">Loading...</p>
  <p v-else-if="error">{{ error.message }}</p>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

Переменные запроса

Передайте переменные вторым аргументом. Запрос выполняется снова при каждом изменении значения переменной.

const { result } = useQuery(
  gql('query($id: ID!) { post(id: $id) { title } }'),
  { id: 1 }
)

Реактивные переменные

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

const id = ref(1)
const { result } = useQuery(
  gql('query($id: ID!) { post(id: $id) { title } }'),
  () => ({ id: id.value })
)

Хук onResult

onResult срабатывает каждый раз при поступлении новых данных — это удобно для побочных эффектов, таких как аналитика или синхронизация с другим хранилищем.

const { onResult } = useQuery(QUERY)
onResult((res) => {
  console.log('Got', res.data)
})

Повторный запрос вручную

useQuery возвращает функцию refetch, чтобы при необходимости повторно выполнить запрос — например, после внешнего изменения или нажатия кнопки обновления.

const { result, refetch } = useQuery(QUERY)
function reload() { refetch() }

Постраничная загрузка с помощью fetchMore

fetchMore загружает дополнительные страницы и объединяет их с существующим результатом с помощью updateQuery — это основа бесконечной прокрутки.

const { result, fetchMore } = useQuery(QUERY, { offset: 0 })
function loadMore() {
  fetchMore({
    variables: { offset: result.value.posts.length },
    updateQuery: (prev, { fetchMoreResult }) => ({
      posts: [...prev.posts, ...fetchMoreResult.posts]
    })
  })
}

Политики загрузки

Параметр fetchPolicy управляет использованием кэша: cache-first (по умолчанию) читает кэш до обращения к сети, network-only всегда обращается к серверу, а cache-and-network сначала показывает кэш, а затем обновляет данные.

useQuery(QUERY, null, {
  fetchPolicy: 'cache-and-network'
})

Условные запросы

Используйте параметр enabled, чтобы отложить запрос до выполнения условия — например, не загружать данные, пока не выбран идентификатор.

const id = ref(null)
useQuery(QUERY, () => ({ id: id.value }), {
  enabled: computed(() => id.value !== null)
})

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

Проверьте свои знания о useQuery.

Ответь в интерактивном уроке

Итоги

Вы изучили useQuery:

Он возвращает реактивные результат, состояние загрузки и ошибку.
Данные читаются через result.value.
Переменные можно передавать объектом или функцией для обеспечения реактивности.
refetch() выполняет запрос снова, fetchMore() загружает следующие страницы, а fetchPolicy управляет использованием кэша.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

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

Урок «useQuery для получения данных» бесплатный?

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

Чему я научусь в уроке «useQuery для получения данных»?

useQuery(QUERY), result, loading, error, variables и параметры fetchPolicy Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «useQuery для получения данных»?

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

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

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

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

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

← Назад к Vue Academy