并行查询 Parallel Queries
“并行”查询是指并行执行的查询,或者是同时执行的查询。用以最大化查询并发性。
手动并行查询
如果并行查询的数量没有变化,则无需付出额外的努力即可使用并行查询。
只需并排使用任意数量的 Vue Query 的useQuery和useInfiniteQueryHooks 即可!
HTML
1<script setup lang="ts">2 // 下面的查询将自动地并行执行3 const usersQuery = useQuery({ queryKey: ["users"], queryFn: fetchUsers });4 const teamsQuery = useQuery({ queryKey: ["teams"], queryFn: fetchTeams });5 const projectsQuery = useQuery({6 queryKey: ["projects"],7 queryFn: fetchProjects,8 });9</script>使用useQueries的动态并行查询
如果你需要执行的查询数量在每次渲染之间会变化,则不能使用手动查询,因为这将违反 hook 的规则。
相反,Vue Query 提供了useQueries的 Hook,你可以使用它来动态地并行执行尽可能多的查询。
useQueries接受一组作为查询配置的对象,并以数组形式返回查询的结果:
TypeScript
1const users = computed(...)2const queries = computed(() => users.value.map(user => {3 return {4 queryKey: ['user', user.id],5 queryFn: () => fetchUserById(user.id),6 }7 })8);9const userQueries = useQueries({queries: queries})