并行查询
“并行”查询是指同时执行的查询,以最大化拉取并发性。
手动并行查询
当并行查询的数量固定不变时,使用并行查询无需额外工作。只需并排使用任意数量的 TanStack Query 的 useQuery 和 useInfiniteQuery 原语即可!
TypeScript
1function App () {2 // The following queries will execute in parallel3 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}使用 useQueries 实现动态并行查询
如果需要执行的查询数量会发生变化,则无法使用手动查询方式,因为这会破坏响应性。为此,TanStack Query 提供了 useQueries 函数,你可以用它动态地并行执行任意数量的查询。
useQueries 接收一个返回选项对象的访问器函数,该选项对象需包含一个 queries 键,其值为一个查询对象数组;它返回一个查询结果数组:
TypeScript
1function App(props) {2 const userQueries = useQueries(() => () => ({3 queries: props.users.map((user) => {4 return {5 queryKey: ['user', user.id],6 queryFn: () => fetchUserById(user.id),7 }8 }),9 }))10}在使用 TypeScript 时,若在传入
useQueries的查询对象上内联编写select,则该select无法从同一查询对象的queryFn中推断出其data参数类型,而会回退至unknown。请显式标注select参数的类型,或使用queryOptions辅助函数定义查询,以保持类型推断能力。参见 此已知限制。