provideTanStackQuery
TypeScript
1function provideTanStackQuery(queryClient: 2 | QueryClient3 | InjectionToken<QueryClient>, ...features: QueryFeatures[]): Provider[];定义位置：packages/angular-query-experimental/src/providers.ts:96
为 Angular 应用设置启用 TanStack Query 功能所需的提供者（providers）。允许配置一个 QueryClient，以及可选功能（例如开发者工具）。
参数
queryClient
| QueryClient
| InjectionToken<QueryClient>
一个 QueryClient 实例，或一个提供 QueryClient 的 InjectionToken。
features
...QueryFeatures[]
用于配置额外 Query 功能的可选功能列表。
返回值
Provider[]
一组用于设置 TanStack Query 的提供者。
参见
示例
TypeScript
1import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental'2 3bootstrapApplication(AppComponent, {4 providers: [provideTanStackQuery(new QueryClient())],5})在基于 NgModule 的应用中效果相同：
TypeScript
1import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental'2 3@NgModule({4 declarations: [AppComponent],5 imports: [BrowserModule],6 providers: [provideTanStackQuery(new QueryClient())],7 bootstrap: [AppComponent],8})9export class AppModule {}通过添加 withDevtools 启用可选的开发者工具——默认情况下，这些工具会在你的应用处于开发模式时加载：
TypeScript
1import {2 provideTanStackQuery,3 withDevtools,4 QueryClient,5} from '@tanstack/angular-query-experimental'6 7bootstrapApplication(AppComponent, {8 providers: [provideTanStackQuery(new QueryClient(), withDevtools())],9})对 QueryClient 使用 InjectionToken —— 一种高级优化方式，可使 TanStack Query 不包含在主应用包中，适用于仅在懒加载路由中引入 TanStack Query 但仍需共享同一个 QueryClient 的场景。这是一种微小的优化；对于大多数应用，更推荐像上述示例那样，在主应用配置中提供 QueryClient：
TypeScript
1export const MY_QUERY_CLIENT = new InjectionToken('', {2 factory: () => new QueryClient(),3})4 5// In a lazy loaded route or lazy loaded component's providers array:6providers: [provideTanStackQuery(MY_QUERY_CLIENT)]