본문으로 건너뛰기

provideTanStackQuery

function provideTanStackQuery(queryClient, ...features): Provider[];

정의 위치: providers.ts:105

Angular 애플리케이션에서 TanStack Query 기능을 활성화하는 데 필요한 provider를 설정합니다.

QueryClient 및 개발자 도구와 같은 선택적 기능을 구성할 수 있습니다.

예제 - 독립 실행형

import {
  provideTanStackQuery,
  QueryClient,
} from '@tanstack/angular-query-experimental'

bootstrapApplication(AppComponent, {
  providers: [provideTanStackQuery(new QueryClient())],
})

예제 - NgModule 기반

import {
  provideTanStackQuery,
  QueryClient,
} from '@tanstack/angular-query-experimental'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [provideTanStackQuery(new QueryClient())],
  bootstrap: [AppComponent],
})
export class AppModule {}

withDevtools를 추가하여 선택적 개발자 도구를 활성화할 수도 있습니다. 다음을 통해 기본적으로 앱이 개발 모드일 때 도구가 로드됩니다.

import {
  provideTanStackQuery,
  withDevtools
  QueryClient,
} from '@tanstack/angular-query-experimental'

bootstrapApplication(AppComponent,
  {
    providers: [
      provideTanStackQuery(new QueryClient(), withDevtools())
    ]
  }
)

예제: InjectionToken 사용하기

export const MY_QUERY_CLIENT = new InjectionToken('', {
  factory: () => new QueryClient(),
})

// In a lazy loaded route or lazy loaded component's providers array:
providers: [provideTanStackQuery(MY_QUERY_CLIENT)]

QueryClient에 InjectionToken을 사용하는 것은 TanStack Query를 기본 애플리케이션 번들에서 제외할 수 있게 하는 고급 최적화입니다. QueryClient를 계속 공유하면서 지연 로드된 라우트에만 TanStack Query를 포함하려는 경우 유용할 수 있습니다.

이는 작은 최적화이며, 대부분의 애플리케이션에서는 기본 애플리케이션 구성에 QueryClient를 제공하는 편이 좋습니다.

매개변수​

queryClient​

QueryClient 인스턴스 또는 QueryClient를 제공하는 InjectionToken입니다.

QueryClient | InjectionToken<QueryClient>

기능​

...QueryFeatures[]

추가 Query 기능을 구성하기 위한 선택적 기능입니다.

반환값​

Provider[]

TanStack Query를 설정하기 위한 프로바이더 집합입니다.

참조​