📄 tanstack/query/latest/docs/framework/angular/reference/functions/providetanstackquery

File: providetanstackquery.md | Updated: 11/15/2025

Source: https://tanstack.com/query/latest/docs/framework/angular/reference/functions/providetanstackquery



TanStack

Query v5v5

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Angular logo

Angular

Version

Latest

Search...

+ K

Menu

Getting Started

Guides & Concepts

API Reference

ESLint

Examples

Framework

Angular logo

Angular

Version

Latest

Menu

Getting Started

Guides & Concepts

API Reference

ESLint

Examples

On this page

provideTanStackQuery

Copy Markdown

Function: provideTanStackQuery()
================================

ts

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


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

Defined in: providers.ts:105

Sets up providers necessary to enable TanStack Query functionality for Angular applications.

Allows to configure a QueryClient and optional features such as developer tools.

Example - standalone

ts

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())],
})

Example - NgModule-based

ts

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 {}

You can also enable optional developer tools by adding withDevtools. By default the tools will then be loaded when your app is in development mode.

ts

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())\
    ]
  }
)

Example: using an InjectionToken

ts

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

Using an InjectionToken for the QueryClient is an advanced optimization which allows TanStack Query to be absent from the main application bundle. This can be beneficial if you want to include TanStack Query on lazy loaded routes only while still sharing a QueryClient.

Note that this is a small optimization and for most applications it's preferable to provide the QueryClient in the main application config.

Parameters
----------
### queryClient

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

QueryClient | InjectionToken<QueryClient>

### features

...QueryFeatures []

Optional features to configure additional Query functionality.

Returns
-------

Provider[]

A set of providers to set up TanStack Query.

See
---

Edit on GitHub

Home

Partners Become a Partner

Code RabbitCode Rabbit CloudflareCloudflare AG GridAG Grid NetlifyNetlify NeonNeon WorkOSWorkOS ClerkClerk ConvexConvex ElectricElectric SentrySentry PrismaPrisma StrapiStrapi UnkeyUnkey

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)

scarf analytics