并行查询

“并行”查询是指同时执行的查询，旨在最大化数据获取的并发性。

手动并行查询

当并行查询的数量保持不变时，使用并行查询无需额外操作。只需将任意数量的 TanStack Query 的 useQuery 和 useInfiniteQuery Hook 并排使用即可！

function App () {
  // 以下查询将并行执行
  const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
  const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
  const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects })
  ...
}

注意：当在 suspense 模式下使用 React Query 时，这种并行模式无法工作。因为第一个查询会内部抛出一个 Promise，导致组件在其他查询运行之前就被挂起（suspend）。要解决此问题，你需要使用 useSuspenseQueries Hook（推荐做法），或者为每个 useSuspenseQuery 实例创建单独的组件来手动协调并行性。

使用 useQueries 进行动态并行查询

如果需要执行的查询数量在每次渲染时都会变化，那么你不能使用手动查询的方式，因为这会违反 React Hook 的规则。为此，TanStack Query 提供了 useQueries Hook，你可以用它来动态地并行执行任意数量的查询。

useQueries 接收一个选项对象，该对象包含一个 queries 键，其值是一个查询对象的数组。它返回一个查询结果的数组：

function App({ users }) {
  const userQueries = useQueries({
    queries: users.map((user) => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id),
      }
    }),
  })
}