useQueries

useQueries Hook 可用于同时获取可变数量的查询：

const ids = [1, 2, 3]
const results = useQueries({
  queries: ids.map((id) => ({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
    staleTime: Infinity,
  })),
})

选项（Options）

useQueries 接收一个选项对象，其中必须包含一个 queries 键，其值是一个查询配置对象数组。这些配置对象与 useQuery Hook 所接受的选项完全一致（不包括 queryClient 选项，因为 QueryClient 可以在顶层传入）。

• queryClient?: QueryClient

  • 用于提供自定义的 QueryClient 实例。若未提供，则使用最近上下文中的 QueryClient。

• combine?: (result: UseQueriesResults) => TCombinedResult

  • 用于将多个查询结果合并为单个值。

如果在 queries 数组中多次使用相同的 queryKey，可能会导致多个查询之间共享数据。为避免此问题，建议对查询进行去重，并将结果重新映射回所需结构。

placeholderData

useQueries 也支持 placeholderData 选项，但它不会像 useQuery 那样接收来自先前渲染的查询信息，因为每次渲染时传给 useQueries 的查询数量可能不同。

返回值（Returns）

useQueries 返回一个数组，包含所有查询的结果，顺序与输入数组一致。

合并结果（Combine）

如果你希望将多个查询的 data（或其他查询信息）合并成一个单一值，可以使用 combine 选项。合并后的结果会尽可能保持引用稳定性（structural sharing）。

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 属性的对象。注意：原始查询结果中的其他属性将不会保留在合并后的对象中。

记忆化（Memoization）

combine 函数仅在以下情况下重新执行：

• combine 函数本身的引用发生变化；

• 任意一个查询结果发生变化。

这意味着，如果像上面那样内联定义 combine 函数，它会在每次组件渲染时都重新运行。为避免不必要的重复计算，你可以：

• 使用 useCallback 包裹 combine 函数；

• 或将其提取为一个稳定的函数引用（当它没有依赖项时）。