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

并行查询

更新于 2026-11-02 Angular 查看英文原文 ↗

“并行”查询是指同时执行的查询,以最大限度地提升拉取并发度。

手动并行查询

当并行查询的数量固定不变时,使用并行查询无需额外工作。只需并排使用任意数量的 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 辅助函数定义查询,以保持类型推断能力。参见 此已知限制。

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

译自上游 59d11de