并行查询
“并行”查询是指同时执行的查询,以最大限度地提升拉取并发度。
手动并行查询
当并行查询的数量固定不变时,使用并行查询无需额外工作。只需并排使用任意数量的 TanStack Query 的 injectQuery 和 injectInfiniteQuery 函数即可!
TypeScript
1export class AppComponent {2 // The following queries will execute in parallel3 readonly usersQuery = injectQuery(() => ({4 queryKey: ['users'],5 queryFn: fetchUsers,6 }))7 readonly teamsQuery = injectQuery(() => ({8 queryKey: ['teams'],9 queryFn: fetchTeams,10 }))11 readonly projectsQuery = injectQuery(() => ({12 queryKey: ['projects'],13 queryFn: fetchProjects,14 }))15}使用 injectQueries 实现动态并行查询
TanStack Query 提供了 injectQueries,你可以用它动态地并行执行任意数量的查询。
injectQueries 接收一个选项对象,该对象包含一个 queries 键,其值为一个查询对象数组。它返回一个查询结果数组:
TypeScript
1export class AppComponent {2 users = signal<Array<User>>([])3 4 // Please note injectQueries is under development and this code does not work yet5 readonly userQueries = injectQueries(() => ({6 queries: users().map((user) => {7 return {8 queryKey: ['user', user.id],9 queryFn: () => fetchUserById(user.id),10 }11 }),12 }))13}在使用 TypeScript 时,若在传入
injectQueries的查询对象上内联编写select,则该select无法从同一对象的queryFn中推断其data参数类型——此时会回退为unknown。请显式标注select的参数类型,或使用queryOptions辅助函数定义查询,以保持类型推断能力。参见 此已知限制。