并行查询 Parallel Queries
“并行”查询是指并行执行的查询,或者是同时执行的查询。用以最大化查询并发性。
手动并行查询
如果并行查询的数量没有变化,则无需付出额外的努力即可使用并行查询。
只需并排使用任意数量的 React Query 的useQuery和useInfiniteQueryHooks 即可!
TypeScript
1function App () {2 // 下面的查询将自动地并行执行3 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}在 React 的 suspense 模式下使用 React Query 时,这种并行模式不起作用。 因为第一个查询将在内部抛出 Promise,并且将在其他查询运行之前挂起组件。 为了解决这个问题,你要么需要使用
useQueriesHook(这是建议的),要么为每个useQuery实例用单独的组件编排你自己的并行度(这很糟糕)。
使用useQueries的动态并行查询
如果你需要执行的查询数量在每次渲染之间会变化,则不能使用手动查询,因为这将违反 hook 的规则。
相反,React Query 提供了useQueries的 Hook,你可以使用它来动态地并行执行尽可能多的查询。
useQueries接受一组作为查询配置的对象,并以数组形式返回查询的结果:
TypeScript
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}