useQueries
1function useQueries<T extends any[], TCombinedResult = T extends [] ? [] : T extends [Head] ? [GetUseQueryResult<Head>] : T extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseQueryResult<Head>, GetUseQueryResult<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseQueryResult<Head>, GetUseQueryResult<Head>, GetUseQueryResult<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...(...)[]] extends [] ? [] : ... extends ... ? ... : ... : [...{ [K in (...)]: (...) }[]] : [...{ [K in string | number | symbol]: GetUseQueryResult<Tails[K]> }[]] : { [K in string | number | symbol]: GetUseQueryResult<T[K]> }>(options: ShallowOption & object, queryClient?: QueryClient): Readonly<Ref<TCombinedResult>>;定义于：packages/vue-query/src/useQueries.ts:354
useQueries 组合式函数可用于拉取可变数量的查询。
queries 选项接受一个查询选项对象数组，其结构与 useQuery 的选项基本相同。该数组可以是普通数组、一个 ref/响应式数组（每个条目单独追踪），或一个 getter 函数——若该数组本身（其长度，或其中包含哪些查询）依赖于其他响应式状态，请传入 getter。
若在查询对象数组中多次使用相同的查询键，可能导致部分数据在多个查询之间共享。为避免此问题，建议先对查询去重，再将结果映射回所需的结构。
combine 选项可用于将各查询的结果合并为单个值。该结果会在结构上尽可能保持引用稳定性。
placeholderData 在此处同样受支持，但与 useQuery 不同，它不会接收先前渲染的查询信息，因为每次渲染时查询数量可能不同。
类型参数
T
T extends any[]
TCombinedResult
TCombinedResult = T extends [] ? [] : T extends [Head] ? [GetUseQueryResult<Head>] : T extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseQueryResult<Head>, GetUseQueryResult<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseQueryResult<Head>, GetUseQueryResult<Head>, GetUseQueryResult<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...(...)[]] extends [] ? [] : ... extends ... ? ... : ... : [...{ [K in (...)]: (...) }[]] : { [K in string | number | symbol]: GetUseQueryResult<Tails[K]> }[]] : { [K in string | number | symbol]: GetUseQueryResult<T[K]> }
参数
options
ShallowOption & object
要执行的 queries 数组，以及可选的 combine 和 shallow 选项。
queryClient?
使用此参数可指定自定义 QueryClient；否则将使用由 VueQueryPlugin 提供的 QueryClient。
返回值
Readonly<Ref<TCombinedResult>>
一个指向合并后结果的 ref。若未提供 combine，则该结果为一个数组，其元素顺序与输入数组一致，且每个元素均为对应查询的结果；若提供了 combine，则该结果即为 combine 所返回的值。
示例
1<script setup lang="ts">2import { useQueries } from '@tanstack/vue-query'34const props = defineProps<{ ids: Array<number> }>()56const postQueries = useQueries({7 queries: () =>8 props.ids.map((id) => ({9 queryKey: ['post', id],10 queryFn: () => fetchPost(id),11 staleTime: Infinity,12 })),13})14</script>15 16<template>17 <ul>18 <li v-for="(query, index) in postQueries" :key="props.ids[index]">19 <span v-if="query.isPending">Loading...</span>20 <span v-else-if="query.isError">Error: {{ query.error.message }}</span>21 <span v-else>{{ query.data.title }}</span>22 </li>23 </ul>24</template>将结果合并为单个值：
1<script setup lang="ts">2import { useQueries } from '@tanstack/vue-query'34const props = defineProps<{ ids: Array<number> }>()56const combined = useQueries({7 queries: () =>8 props.ids.map((id) => ({9 queryKey: ['post', id],10 queryFn: () => fetchPost(id),11 })),12 combine: (postQueries) => ({13 data: postQueries.map((query) => query.data),14 isPending: postQueries.some((query) => query.isPending),15 isError: postQueries.some((query) => query.isError),16 }),17})18</script>19 20<template>21 <span v-if="combined.isPending">Loading...</span>22 <span v-else-if="combined.isError">Error!</span>23 <ul v-else>24 <li v-for="post in combined.data" :key="post.id">{{ post.title }}</li>25 </ul>26</template>通过 queryOptions 对 select 进行类型标注。注意：直接展开 queryOptions 的结果并在内联中覆盖 select，仍将回退至 unknown —— 应再次将展开操作包裹在 queryOptions 中，以确保覆盖项在传入 useQueries 前即被解析：
1<script setup lang="ts">2import { queryOptions, useQueries } from '@tanstack/vue-query'34const props = defineProps<{ id: number }>()56const postOptions = (id: number) =>7 queryOptions({8 queryKey: ['post', id],9 queryFn: () => fetchPost(id),10 })1112const [{ data: broken }] = useQueries({13 queries: () => [14 {15 ...postOptions(props.id),16 // ❌ `data` is `unknown` here17 select: (data) => data.title,18 },19 ],20})2122const [{ data: fixed }] = useQueries({23 queries: () => [24 queryOptions({25 ...postOptions(props.id),26 // ✅ `data` is `Post`27 select: (data) => data.title,28 }),29 ],30})31</script>32 33<template>34 <h1>{{ fixed }}</h1>35</template>