File: providetanstackquery.md | Updated: 11/15/2025
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
Angular
Version
Latest
Search...
+ K
Menu
Getting Started
Guides & Concepts
API Reference
ESLint
Examples
Framework
Angular
Version
Latest
Menu
Getting Started
Guides & Concepts
API Reference
ESLint
Examples
On this page
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>
...QueryFeatures []
Optional features to configure additional Query functionality.
Provider[]
A set of providers to set up TanStack Query.
[###### 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)
