并行查询 | TanStack Query React Docs

并行查询

“并行”查询是指并行执行或同时执行的查询，以便最大限度地提高获取并发性。

手动并行查询

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

tsx

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

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 并暂停组件，然后其他查询才会运行。要解决此问题，您要么需要使用 useSuspenseQueries 钩子（建议），要么需要为每个 useSuspenseQuery 实例使用单独的组件来编排您自己的并行性。

使用 useQueries 进行动态并行查询

如果您需要执行的查询数量在每次渲染时都会发生变化，则不能使用手动查询，因为这会违反钩子规则。相反，TanStack Query 提供了一个 useQueries 钩子，您可以使用它动态地并行执行任意数量的查询。

useQueries 接受一个选项对象，该对象具有一个queries 键，其值为一个查询对象数组。它返回一个查询结果数组：

tsx

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

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