译零 TransZero · TanStack Query v4 中文文档
主站

并行查询 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})

本页为 TanStack Query 文档(Vue 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

本页译文取自社区中文版 react-query-web-i18n(MIT),非本站翻译,已停止更新,内容可能与当前 API 有出入。

译自上游 (未记录版本)