TanStack Query

A thin Angular adapter for TanStack Query. Wrap the framework-agnostic QueryObserver and MutationObserver in signals so query and mutation state flows through Angular's reactivity — no RxJS subscriptions to manage, no manual change detection.

Overview

Examples

The adapter exposes three primitives. Register a QueryClient once with provideQueryClient(), then call injectQuery() to read cached server state and injectMutation() to write it. Both return signals, so templates can read query().data, query().isPending, and query().isError directly.

Each accepts an options function that is re-evaluated inside an Angular effect. Any signal read inside that function becomes a dependency: reading a signal-based queryKey makes the query re-fetch automatically when the signal changes, while previously loaded keys resolve instantly from cache (subject to staleTime).

provideQueryClient() — registers a QueryClient (or config) with Angular DI.
injectQuery() — subscribes to a query and returns a reactive result signal.
injectMutation() — creates a mutation with mutate, mutateAsync, and reset.

Both hooks must run in an injection context (a component field initializer or inside inject()), and clean up their observer subscriptions automatically via DestroyRef.

API

Exports

provideQueryClient, injectQuery, injectMutation, QUERY_CLIENT

provideQueryClient(clientOrConfig?)

Parameter	Type	Description
`clientOrConfig`	`QueryClient \| QueryClientConfig` (optional)	An existing client or a config to build one. Omit for defaults.
returns	`EnvironmentProviders`	Pass to `bootstrapApplication` or a route's providers.

injectQuery(optionsFn)

Name	Type	Description
`optionsFn`	`() => QueryObserverOptions`	Returns query options; may read signals (e.g. a reactive `queryKey`).
returns	`Signal<QueryObserverResult>`	Reactive result: `data`, `isPending`, `isError`, `error`, etc.

injectMutation(optionsFn)

Member	Type	Description
`result`	`Signal<MutationObserverResult>`	Reactive mutation state (idle, pending, success, error).
`mutate`	`(variables, options?) => void`	Fire-and-forget trigger; outcome is reflected through `result`.
`mutateAsync`	`(variables, options?) => Promise<TData>`	Triggers and returns a promise that resolves or rejects with the outcome.
`reset`	`() => void`	Resets the mutation observer back to idle.

Both hooks must run in an injection context and require a QUERY_CLIENT to be provided via provideQueryClient(). Generic parameters mirror TanStack Query: injectQuery<TQueryFnData, TError, TData> and injectMutation<TData, TError, TVariables, TContext>.