useQueries
可以使用 useQueries 钩子来获取可变数量的查询
tsx
const ids = [1, 2, 3]
const results = useQueries({
queries: ids.map((id) => ({
queryKey: ['post', id],
queryFn: () => fetchPost(id),
staleTime: Infinity,
})),
})
const ids = [1, 2, 3]
const results = useQueries({
queries: ids.map((id) => ({
queryKey: ['post', id],
queryFn: () => fetchPost(id),
staleTime: Infinity,
})),
})
选项
useQueries 钩子接受一个选项对象，其中包含一个 queries 键，其值是一个数组，其中包含与 useQuery 钩子 相同的查询选项对象（不包括 queryClient 选项 - 因为 QueryClient 可以在顶层传入）。
- queryClient?: QueryClient
- 使用此选项可提供自定义的 QueryClient。否则，将使用最近上下文中的 QueryClient。
- combine?: (result: UseQueriesResults) => TCombinedResult
- 使用此选项将查询结果组合成单个值。
在查询对象数组中多次使用相同的查询键可能会导致某些数据在查询之间共享。为了避免这种情况，请考虑对查询进行去重，并将结果映射回所需的结构。
placeholderData
placeholderData 选项也存在于 useQueries 中，但它不会像 useQuery 那样从先前渲染的查询中传递信息，因为 useQueries 的输入在每次渲染时可以是不同数量的查询。
返回值
useQueries 钩子返回一个包含所有查询结果的数组。返回的顺序与输入顺序相同。
组合
如果想将结果中的 data（或其他查询信息）组合成单个值，可以使用 combine 选项。结果将进行结构共享，以尽可能实现引用稳定。
tsx
const ids = [1, 2, 3]
const combinedQueries = useQueries({
queries: ids.map((id) => ({
queryKey: ['post', id],
queryFn: () => fetchPost(id),
})),
combine: (results) => {
return {
data: results.map((result) => result.data),
pending: results.some((result) => result.isPending),
}
},
})
const ids = [1, 2, 3]
const combinedQueries = useQueries({
queries: ids.map((id) => ({
queryKey: ['post', id],
queryFn: () => fetchPost(id),
})),
combine: (results) => {
return {
data: results.map((result) => result.data),
pending: results.some((result) => result.isPending),
}
},
})
在上面的示例中，combinedQueries 将是一个对象，其中包含 data 和 pending 属性。请注意，查询结果的所有其他属性都将丢失。
记忆化
只有在以下情况下，combine 函数才会重新运行：
- combine 函数本身的引用发生更改
- 任何查询结果发生更改
这意味着内联的 combine 函数（如上所示）将在每次渲染时运行。为了避免这种情况，您可以将 combine 函数包裹在 useCallback 中，或者如果它没有任何依赖项，则将其提取为稳定的函数引用。
