并行查询

“并行”查询是指同时执行的查询，以最大化拉取并发性。

手动并行查询

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

1function App () {2  // The following queries will execute in parallel3  const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })4  const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })5  const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects })6  ...7}

在将 Preact Query 与 compat 的 Suspense 一起使用时，这种并行模式无法正常工作，因为第一个查询会在内部抛出 Promise，导致组件在其他查询运行前即被挂起。要规避此问题，你需改用 useSuspenseQueries Hook（推荐做法），或为每个 useSuspenseQuery 实例分别创建独立组件，自行编排并行逻辑。

使用 useQueries 动态执行并行查询

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

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

1function App({ users }) {2  const userQueries = useQueries({3    queries: users.map((user) => {4      return {5        queryKey: ['user', user.id],6        queryFn: () => fetchUserById(user.id),7      }8    }),9  })10}

在使用 TypeScript 时，若在传入 useQueries 的查询对象上内联编写 select，该 select 无法从同一对象的 queryFn 中推断其 data 参数类型，而会回退至 unknown。请显式标注 select 参数类型，或使用 queryOptions 辅助函数定义查询，以保持类型推断能力。参见 这一已知限制。