查询
查询基础
查询是一种声明式依赖于异步数据源，该数据源与一个唯一键绑定。查询可用于任何基于 Promise 的方法（包括 GET 和 POST 方法）从服务器获取数据。如果你的方法会修改服务器上的数据，我们建议使用Mutations。
要在组件或自定义 Hook 中订阅查询，请调用 useQuery Hook，并至少传入：
- **查询的唯一键**
- 一个返回 Promise 的函数，该 Promise 会
- 解析数据，或者
- 抛出错误
ts
import { useQuery } from '@tanstack/vue-query'
const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
import { useQuery } from '@tanstack/vue-query'
const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
您提供的**唯一键**在内部用于在整个应用程序中重新获取、缓存和共享您的查询。
useQuery 返回的查询结果包含您进行模板制作和数据其他用途所需的所有查询信息。
tsx
const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
result 对象包含一些你为了高效工作需要了解的非常重要的状态。查询在任何给定时刻只能处于以下状态之一：
- isPending 或 status === 'pending' - 查询尚无数据
- isError 或 status === 'error' - 查询遇到错误
- isSuccess 或 status === 'success' - 查询成功，数据可用。
除了这些主要状态之外，根据查询的状态，还可以获得更多信息：
- error - 如果查询处于 isError 状态，则可以通过 error 属性获取错误信息。
- data - 如果查询处于 isSuccess 状态，则可以通过 data 属性获取数据。
- isFetching - 无论处于何种状态，只要查询正在进行（包括后台重新获取），isFetching 都将为 true。
对于大多数查询，通常只需检查 isPending 状态，然后检查 isError 状态，最后假设数据可用并渲染成功状态即可。
vue
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isPending, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
</script>
<template>
<span v-if="isPending">Loading...</span>
<span v-else-if="isError">Error: {{ error.message }}</span>
<!-- We can assume by this point that `isSuccess === true` -->
<ul v-else-if="data">
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
</template>
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isPending, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
</script>
<template>
<span v-if="isPending">Loading...</span>
<span v-else-if="isError">Error: {{ error.message }}</span>
<!-- We can assume by this point that `isSuccess === true` -->
<ul v-else-if="data">
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
</template>
如果您不喜欢布尔值，也可以随时使用 status 状态。
vue
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { status, data, error } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
</script>
<template>
<span v-if="status === 'pending'">Loading...</span>
<span v-else-if="status === 'error'">Error: {{ error.message }}</span>
<!-- also status === 'success', but "else" logic works, too -->
<ul v-else-if="data">
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
</template>
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { status, data, error } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
</script>
<template>
<span v-if="status === 'pending'">Loading...</span>
<span v-else-if="status === 'error'">Error: {{ error.message }}</span>
<!-- also status === 'success', but "else" logic works, too -->
<ul v-else-if="data">
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
</template>
如果你在访问 data 之前已经检查了 pending 和 error 状态，TypeScript 也会正确地缩小 data 的类型。
FetchStatus
除了 status 字段外，你还将获得一个额外的 fetchStatus 属性，包含以下选项：
- fetchStatus === 'fetching' - 查询当前正在获取。
- fetchStatus === 'paused' - 查询本应进行获取，但已被暂停。有关详细信息，请参阅 Network Mode 指南。
- fetchStatus === 'idle' - 查询目前没有进行任何操作。
为什么有两种不同的状态？
后台重新获取和 stale-while-revalidate 逻辑使得 status 和 fetchStatus 的所有组合都可能出现。例如：
- 处于 success 状态的查询通常处于 idle 的 fetchStatus，但如果正在进行后台重新获取，也可能是 fetching 状态。
- 刚挂载且没有数据的查询通常处于 pending 状态和 fetching 的 fetchStatus，但如果网络连接不可用，也可能是 paused 状态。
因此，请记住，查询可能处于 pending 状态，但实际上并没有获取数据。根据经验法则：
- status 提供有关 data 的信息：我们是否有数据？
- fetchStatus 提供了关于 queryFn 的信息：它正在运行还是未运行？
