Angular Functions Reference

Purpose and Scope

This reference explains the Angular-facing functions and provider patterns documented for @tanstack/angular-query-experimental. In Angular Query, the important distinction is that TanStack Query remains a promise-based server-state cache, while the Angular adapter exposes that cache through Angular dependency injection, provider arrays, component injection functions, and signal-friendly state reads. Use this page when you need to wire a QueryClient into an Angular application, enable optional devtools, fetch with Angular-native clients, or display query activity without translating React hook terminology directly into Angular code.

Sources: docs/framework/angular/reference/functions/provideTanStackQuery.md, docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md, docs/framework/angular/devtools.md, docs/framework/angular/guides/background-fetching-indicators.md

The official TanStack Query product framing describes Query as a server-state manager: async data gets a cache, a lifecycle, declarative fetching APIs, mutation workflows, retries, garbage collection, and framework adapters. The Angular adapter participates in that model by letting Angular applications declare query dependencies from components and provide shared cache infrastructure through Angular providers. The files for this page focus on the Angular API surface rather than core cache internals, so the reference stays centered on the public Angular setup and consumption patterns.

Sources: docs/config.json, docs/framework/angular/reference/functions/provideTanStackQuery.md

Relevant Source Files

• docs/framework/angular/reference/functions/provideTanStackQuery.md - Generated function reference for the main Angular provider entry point, including its signature, accepted QueryClient or InjectionToken, optional feature list, return type, and standalone or NgModule examples.
• docs/framework/angular/devtools.md - Angular guide for enabling withDevtools, understanding development-only loading, using the production subpath, and deriving devtools options from reactive callbacks.
• docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md - Angular guide explaining that query functions are promise based, how to use Angular HttpClient, and when to convert observables with RxJS helpers.
• docs/framework/angular/guides/background-fetching-indicators.md - Angular guide examples for component-local query fetching state through injectQuery and global background activity through injectIsFetching.
• docs/config.json - Documentation navigation configuration showing Angular as one of the framework-specific documentation sections in the TanStack Query docs site.
• docs/community-resources.md - Community resource catalog that points readers beyond the API reference to talks, articles, and utilities useful for deeper TanStack Query practice.

Core Primitives

The first primitive is the QueryClient, the object that represents the shared TanStack Query cache and configuration for an application area. Angular applications make that client available by calling provideTanStackQuery, which returns Angular Provider[]. The documented signature is function provideTanStackQuery(queryClient, ...features): Provider[], and the queryClient parameter can be either a concrete QueryClient instance or an Angular InjectionToken<QueryClient>. The feature rest parameter accepts optional Query features, such as devtools integration, so setup stays centralized with Angular's provider system.

Sources: docs/framework/angular/reference/functions/provideTanStackQuery.md

The second primitive is the injected query function used inside Angular classes. The background fetching guide shows injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })) in a component, then reads status and data through callable signal-style accessors such as todosQuery.isPending(), todosQuery.isError(), todosQuery.isSuccess(), todosQuery.isFetching(), todosQuery.error(), and todosQuery.data(). This is the Angular adapter shape: query state is consumed through Angular-friendly reactive reads, while the query key and query function preserve the same TanStack Query cache contract used across frameworks.

Sources: docs/framework/angular/guides/background-fetching-indicators.md

The third primitive is injectIsFetching, a global activity selector for background fetches. The Angular guide demonstrates a GlobalLoadingIndicatorComponent where isFetching = injectIsFetching() and the template displays a message when isFetching() is truthy. This is different from checking one component's query result: it observes aggregate fetching activity, so it is suitable for app shells, top bars, route layouts, or any UI that should indicate work happening somewhere in the query cache.

Sources: docs/framework/angular/guides/background-fetching-indicators.md

Provider Setup Reference

For standalone Angular applications, configure Query in the bootstrapApplication call by including provideTanStackQuery(new QueryClient()) in the application providers array. For NgModule-based applications, the same provider expression belongs in the module providers array. Both examples establish a single shared QueryClient for the Angular dependency injection scope where the provider is registered. In most applications, the docs recommend providing the client in the main application config because it is simple and makes the cache available throughout the app.

Sources: docs/framework/angular/reference/functions/provideTanStackQuery.md

The advanced provider form accepts an Angular InjectionToken that creates or supplies a QueryClient. The documented example defines MY_QUERY_CLIENT = new InjectionToken('', { factory: () => new QueryClient() }) and then uses providers: [provideTanStackQuery(MY_QUERY_CLIENT)] in a lazy route or lazy component provider array. The purpose is bundle optimization: TanStack Query can be absent from the main application bundle and loaded only where a lazy feature needs it, while still sharing a configured client through the token.

Sources: docs/framework/angular/reference/functions/provideTanStackQuery.md

import {
  provideTanStackQuery,
  QueryClient,
} from '@tanstack/angular-query-experimental'
 
bootstrapApplication(AppComponent, {
  providers: [provideTanStackQuery(new QueryClient())],
})

Devtools Feature Reference

Devtools are enabled in Angular through the same provider composition point: pass withDevtools() as a feature to provideTanStackQuery. The Angular devtools guide says devtools help debug and inspect queries and mutations, and the example imports withDevtools from @tanstack/angular-query-experimental/devtools. By default, Angular Query Devtools are only included in development mode bundles, so the normal development setup does not require a production-exclusion guard in your app code.

Sources: docs/framework/angular/devtools.md, docs/framework/angular/reference/functions/provideTanStackQuery.md

Production behavior is explicit. If you want to make devtools loadable in production builds, import withDevtools from @tanstack/angular-query-experimental/devtools/production; the guide says that export is identical to the main one but is not excluded from production builds. The option callback can return loadDevtools: 'auto', true, or false. auto loads only in Angular development mode, true allows loading in both development and production, and false prevents loading. This gives teams a safe default plus an intentional staging or diagnostics path.

Sources: docs/framework/angular/devtools.md

import { QueryClient, provideTanStackQuery } from '@tanstack/angular-query-experimental'
import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
 
export const appConfig: ApplicationConfig = {
  providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
}

The devtools option is passed through a callback so Angular applications can derive it from reactive state. The guide describes a signal created from an RxJS observable for a keyboard shortcut, then uses the derived signal to lazy-load devtools on demand. That pattern matters because it keeps debugging UI out of the critical path while still integrating with Angular reactivity. Prefer the default withDevtools() for ordinary local development, and use the production subpath plus loadDevtools only when your deployment policy explicitly allows it.

Sources: docs/framework/angular/devtools.md

Query Functions and Angular Data Clients

Angular Query does not require a specific transport client. The Angular fetching guide states that TanStack Query's fetching mechanisms are built on Promises, so you can use the browser fetch API, graphql-request, Angular HttpClient, or other asynchronous clients. The query contract is therefore the promise returned by queryFn, not the library used to create it. This keeps Query backend-agnostic while letting Angular teams preserve their established HTTP stack, test utilities, interceptors, and SSR behavior.

Sources: docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md

Angular HttpClient is documented as especially well integrated with Angular. The guide calls out unit-test mocking with provideHttpClientTesting, framework interceptors for authentication headers or logging, PendingTasks integration for application stability in tests and SSR, and server-side request caching when using Angular SSR. The tradeoff is that HttpClient currently returns observables, while TanStack Query expects promises. The documented solution is to wrap the observable with RxJS lastValueFrom or firstValueFrom inside the queryFn.

Sources: docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md

@Component({
  // ...
})
class ExampleComponent {
  private readonly http = inject(HttpClient)
 
  readonly query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      lastValueFrom(
        this.http.get('https://api.github.com/repos/tanstack/query'),
      ),
  }))
}

The comparison in the guide is practical rather than prescriptive. Angular HttpClient is featureful and integrated but requires observable-to-promise conversion. Browser fetch adds no bundle-size dependency but is barebones. Specialized clients such as graphql-request can be the right choice for a particular protocol but may not integrate as deeply with Angular's dependency injection and runtime services. Choose the client based on your framework needs, then make sure the final queryFn returns a promise for the data TanStack Query should cache.

Sources: docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md

Runtime State and Background Fetching

Component-local loading state and background refetch state are deliberately separate. The guide example first renders Loading... while todosQuery.isPending() is true, then handles todosQuery.isError() and todosQuery.isSuccess(). Inside the success branch, it checks todosQuery.isFetching() to show Refreshing... while already-cached data is being updated. This distinction helps avoid replacing useful data with a full loading screen during background refreshes. It also matches TanStack Query's model of stale data, observers, and refetching as a normal lifecycle rather than a failure state.

Sources: docs/framework/angular/guides/background-fetching-indicators.md

Use injectIsFetching when the UI question is application-wide rather than resource-specific. A global loading indicator should not need to know which component declared which query key. It can subscribe to query-cache activity through the Angular function and display a top-level message when any query is fetching. This is useful alongside devtools: devtools let developers inspect exact query and mutation state, while injectIsFetching lets the product UI communicate background work to users in a lightweight way.

Sources: docs/framework/angular/guides/background-fetching-indicators.md, docs/framework/angular/devtools.md

Navigation, Learning Path, and Next Steps

The docs configuration places Angular in the framework-specific documentation structure alongside React, Solid, Vue, Svelte, and Lit sections. That matters because Angular Query should be learned as a framework adapter over the same TanStack Query ideas, not as a completely separate data layer. After wiring provideTanStackQuery, read the Angular quick-start and guides in the official documentation site, then return to shared Query concepts such as query keys, cache lifecycle, invalidation, mutations, and devtools inspection when you need to reason across frameworks.

Sources: docs/config.json

For deeper practice, use the community resources catalog as supplemental learning rather than API authority. It lists maintainer-authored articles, talks, and utilities such as query key helpers, OpenAPI or GraphQL code generation tools, and state visualization projects. Those resources can help teams standardize query keys, generate typed clients, or understand design tradeoffs, but the Angular API names and provider patterns should still come from the Angular reference and guide pages cited above. A good next implementation step is to create one shared QueryClient, add devtools for local development, and convert one Angular HttpClient request into an injectQuery call.

Sources: docs/community-resources.md, docs/framework/angular/reference/functions/provideTanStackQuery.md, docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md