前端
PythonJava运维数据库
TanStack Query
TanStack Query
  • getting started
    • 快速开始
    • 开发工具
    • Typescript
    • 默认配置
    • 网络模式
  • Query
    • 查询
    • 查询键
    • 查询函数
    • 查询选项
    • 并行查询
    • 有依赖的查询
    • 查询状态指示器
    • 窗口聚焦重新获取数据
    • 禁用/暂停查询
    • 查询重试
    • 分页查询
    • 无限查询
    • 初始化查询数据
  • 占位符
  • Mutation
    • 修改 Mutations
    • 主动查询失效 Query Invalidation
    • 修改导致的失效 Invalidation From Mutations
    • 通过修改的数据更新查询内容
    • 乐观更新
  • 取消查询
  • 默认查询函数
  • 过滤器
  • Suspense
  • 缓存数据
  • Api Reference
    • QueryClient
    • QueryCache
    • MutationCache
    • QueryObserver QueriesObserver
    • InfiniteQueryObserver
    • FocusManager
    • NotifyManager
    • useQuery
    • useQueries useInfiniteQuery
    • useMutation
    • useIsFetching
    • useIsMutating
    • useMutationState
    • useSuspenseQuery
    • useSuspenseInfiniteQuery
    • useSuspenseQueries
    • QueryClientProvider
    • useQueryClient
    • queryOptions
    • infiniteQueryOptions
    • QueryErrorResetBoundary
    • useQueryErrorResetBoundary
    • hydration
由 GitBook 提供支持
在本页
  • 手动并行查询
  • 使用 useQueries 并行查询

这有帮助吗?

  1. Query

并行查询

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

手动并行查询

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

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)
      };
    })
  });
}
上一页查询选项下一页有依赖的查询

最后更新于2个月前

这有帮助吗?