并行查询
“并行”查询是同时执行的查询，以最大限度地提高数据获取并发性。
手动并行查询
当并行查询的数量不变时，使用并行查询不会产生额外开销。只需并排使用任意数量的 TanStack Query 的 useQuery 和 useInfiniteQuery 钩子即可！
tsx
function App () {
// The following queries will execute in parallel
const usersQuery = useQuery(() => { queryKey: ['users'], queryFn: fetchUsers })
const teamsQuery = useQuery(() => { queryKey: ['teams'], queryFn: fetchTeams })
const projectsQuery = useQuery(() => { queryKey: ['projects'], queryFn: fetchProjects })
...
}
function App () {
// The following queries will execute in parallel
const usersQuery = useQuery(() => { queryKey: ['users'], queryFn: fetchUsers })
const teamsQuery = useQuery(() => { queryKey: ['teams'], queryFn: fetchTeams })
const projectsQuery = useQuery(() => { queryKey: ['projects'], queryFn: fetchProjects })
...
}
在使用 React Query 的 suspense 模式时，这种并行模式不起作用，因为第一个查询会在内部抛出一个 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),
}
}),
})
}
