并行查询

并行查询是指同时执行多个查询,以最大化获取的并发性。

手动并行查询

当并行查询的数量不变时,只需要并排使用任意数量的 TanStack Query 的 useQueryuseInfiniteQuery 钩子即可!

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

当在 React Query 的悬挂模式(suspense mode)下使用时,这种并行模式将不起作用,因为第一个查询会抛出一个 Promise并在其他查询运行之前挂起组件。为了解决这个问题,你需要使用 useSuspenseQueries 钩子或者为每个useSuspenseQuery实例使用独立组件来协调并行查询。

使用 useQueries 并行查询

如果你需要执行的查询数量在渲染之间发生变化,则不能使用手动查询,因为那样会违反钩子的规则。相反,TanStack Query 提供了useQueries钩子,你可以使用它来动态执行任意数量的查询并行。

useQueries接受一个带有queries键的选项对象queries的值是一个查询对象的数组。它返回一个查询结果的数组:

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

最后更新于

这有帮助吗?