并行查询
“并行”查询是同时执行的查询，以最大限度地提高数据获取并发性。
手动并行查询
当并行查询的数量不发生变化时，使用并行查询无需额外工作。只需并排使用任意数量的 TanStack Query 的 useQuery 和 useInfiniteQuery 钩子即可！
vue
<script setup lang="ts">
// 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,
})
</script>
<script setup lang="ts">
// 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,
})
</script>
使用 useQueries 的动态并行查询
如果需要执行的查询数量在每次渲染之间发生变化，则不能使用手动查询，因为这会违反钩子的规则。因此，TanStack Query 提供了一个 useQueries 钩子，您可以使用它来动态地并行执行任意数量的查询。
useQueries 接受一个包含 查询对象数组 的 queries 键 的 options 对象。它返回一个 查询结果数组。
js
const users = computed(...)
const queries = computed(() => users.value.map(user => {
return {
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
}
})
);
const userQueries = useQueries({queries: queries})
const users = computed(...)
const queries = computed(() => users.value.map(user => {
return {
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
}
})
);
const userQueries = useQueries({queries: queries})
