Vue Academy · 课时

使用 useQuery 获取数据

Q: 「使用 useQuery 获取数据」这节课中我会学到什么？

useQuery(QUERY)、结果、加载状态、错误、变量，以及 fetchPolicy 选项 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

useQuery(QUERY)、结果、加载状态、错误、变量，以及 fetchPolicy 选项

使用 useQuery 获取数据 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 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 是一个 ref。通过 result.value 访问数据；其中保存的查询响应结构与查询完全一致。

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

加载和错误状态

使用 loading 显示加载动画，使用 error 显示消息。它们都是响应式 ref，会随着请求进度更新。

<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 }
)

响应式变量

对于动态变量，请传入一个返回变量对象的函数，或者传入一个响应式 ref。当所引用的 ref 发生变化时，查询会自动重新获取。

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 会加载其他 page，并使用 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 选项将查询延迟到满足某个条件后再执行，例如在选定 id 之前不要获取数据。

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

快速检查

测试您对 useQuery 的掌握情况。

回顾

您已经学习了 useQuery：

它会返回响应式的 result、loading 和 error。
通过 result.value 读取数据。
将变量作为对象或函数传入，以实现响应式。
refetch() 会重新运行查询，fetchMore() 用于分页，fetchPolicy 控制缓存的使用方式。

常见问题解答

「使用 useQuery 获取数据」课时是免费的吗？

是的 — 「使用 useQuery 获取数据」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「使用 useQuery 获取数据」这节课中我会学到什么？

useQuery(QUERY)、结果、加载状态、错误、变量，以及 fetchPolicy 选项你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 useQuery 获取数据」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy