provideTanStackQuery

function provideTanStackQuery(queryClient: 
  | QueryClient
  | InjectionToken<QueryClient>, ...features: QueryFeatures[]): Provider[];

function provideTanStackQuery(queryClient: 
  | QueryClient
  | InjectionToken<QueryClient>, ...features: QueryFeatures[]): Provider[];

Defined in: packages/angular-query-experimental/src/providers.ts:96

Sets up providers necessary to enable TanStack Query functionality for Angular applications. Allows configuring a QueryClient and optional features such as developer tools.

Parameters

queryClient

| QueryClient | InjectionToken<QueryClient>

A QueryClient instance, or an InjectionToken which provides a QueryClient.

features

...QueryFeatures[]

Optional features to configure additional Query functionality.

Returns

Provider[]

A set of providers to set up TanStack Query.

See

https://tanstack.com/query/v5/docs/framework/angular/quick-start
withDevtools

Examples

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

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

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

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

The same, in an NgModule-based application:

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

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

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

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

Enabling optional developer tools by adding withDevtools — by default, the tools are then loaded when your app is in development mode:

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

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

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

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

Using an InjectionToken for the QueryClient — an advanced optimization that lets TanStack Query be absent from the main application bundle, useful for including it on lazy-loaded routes only while still sharing a QueryClient. This is a small optimization; for most applications it's preferable to provide the QueryClient in the main application config, as in the examples above:

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)]

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)]

Parameters

queryClient

features

Returns

See

Examples

Want to Skip the Docs?