Framework Adapters Overview
TanStack Query is organized around a shared server-state engine and framework adapters that expose that engine in the shape each UI runtime expects. A React user reaches for hooks, an Angular user reaches for dependency injection and signals, and other framework sections present similarly native entry points. The important architectural point is that framework differences are mostly at the integration boundary: cache identity, promise-based query functions, refetching, background indicators, mutation state, and devtools concepts remain portable across adapters while the public API is adapted to local conventions.
Sources: docs/config.json, docs/framework/angular/reference/functions/provideTanStackQuery.md
Purpose and Scope
Use this page when you already understand TanStack Query at a high level and need to choose or navigate a framework-specific API. The repository docs configuration defines framework sections under Getting Started, including React, Solid, Vue, Svelte, and Lit entries in the supplied snippet, while the Angular docs show how an adapter can provide a strongly framework-native setup path. The overview is intentionally conceptual rather than a full reference: it maps the adapter pattern, identifies shared primitives, and points you toward the focused adapter pages for implementation details.
Relevant Source Files
docs/config.json- Defines the documentation section tree and shows the framework-specific documentation spine used by the public site.docs/framework/angular/reference/functions/provideTanStackQuery.md- Documents the Angular adapter provider function, its parameters, return type, and setup examples.docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md- Explains how Angular Query remains promise-based while interoperating with Angular HttpClient and other clients.docs/framework/angular/devtools.md- Describes Angular devtools integration through optional provider features and development or production loading behavior.docs/framework/angular/guides/background-fetching-indicators.md- Shows Angular status and fetching indicators through signal-style adapter APIs.docs/community-resources.md- Lists ecosystem learning resources and utilities that can help teams apply TanStack Query patterns beyond one framework.
Shared Adapter Model
A framework adapter should be read as a thin, ergonomic layer over common Query behavior. The shared model starts with a QueryClient, query keys, query functions that return promises, and observers that surface status such as pending, success, error, fetching, and stale. The adapter’s job is to connect those concepts to rendering, dependency injection, reactivity, lifecycle cleanup, and developer tooling in the host framework. This lets teams transfer mental models between React, Angular, Vue, Solid, Svelte, Lit, Preact, and React Native without treating each package as a different data layer.
The docs navigation reinforces that portability by giving each framework its own getting-started path while keeping topic names recognizable. In the supplied configuration, React has overview, installation, quick start, devtools, comparison, TypeScript, GraphQL, and React Native entries; Solid, Vue, Svelte, and Lit also receive framework-specific sections. That layout tells readers to start with the adapter they use, then follow shared concepts through the local API vocabulary. Sources: docs/config.json
Core Primitives Across Frameworks
The recurring primitives are stable even when names change. A QueryClient owns cache and defaults. A provider or framework integration makes that client available to components. A query API subscribes UI code to cached asynchronous data. A status API reports whether data is pending, fetching in the background, successful, or failed. Optional devtools attach to the same client so developers can inspect queries and mutations. The official React reference illustrates this shared option vocabulary with keys, query functions, retry behavior, network mode, placeholders, selection, and refetch controls, while Angular expresses the same model through injection-oriented functions.
In Angular, the adapter’s root integration is the provider function. It accepts either a QueryClient instance or an Angular InjectionToken that resolves to one, then returns providers that enable TanStack Query functionality for the application. The docs show standalone bootstrap and NgModule usage, which means the same adapter can fit newer standalone Angular applications and module-based codebases. The InjectionToken option is presented as an advanced optimization for lazy-loaded routes that want to keep Query out of the main bundle while still sharing the client. Sources: docs/framework/angular/reference/functions/provideTanStackQuery.md
import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental'
bootstrapApplication(AppComponent, {
providers: [provideTanStackQuery(new QueryClient())],
})Data Fetching and Runtime Signals
Adapters do not require a special transport client. The Angular data-fetching guide states the fetching mechanism is promise-based and can work with browser fetch, GraphQL clients, Angular HttpClient, and other asynchronous clients. Angular HttpClient is valuable when you want Angular-native testing, interceptors, pending-task awareness, or SSR request caching, but its Observable results need conversion with RxJS helpers such as lastValueFrom or firstValueFrom before returning from a query function. That boundary is a good example of adapter design: preserve the framework’s strengths while satisfying Query’s promise contract. Sources: docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md
Framework adapters also translate query state into rendering-friendly signals or hooks. The Angular background-fetching guide shows a component that reads pending, error, success, fetching, and data states as callable signal-like properties, then renders loading, error, refreshing, and result branches. It also shows a global loading indicator through an adapter-specific is-fetching function. The concept maps directly to the broader TanStack Query model: local components can show background refresh state for one query, while app-level UI can observe aggregate fetching activity. Sources: docs/framework/angular/guides/background-fetching-indicators.md
Devtools and Optional Features
Devtools are another shared capability that adapters expose in framework-native form. In Angular, devtools are enabled by adding a devtools feature to the provider setup, not by mounting a React component. The Angular docs state that devtools are included only in development mode bundles by default, with a production subpath available when a team deliberately wants production or staging access. The loading behavior can be configured with an option that is evaluated through a callback, allowing reactive conditions such as environment flags or user-triggered lazy loading. Sources: docs/framework/angular/devtools.md, docs/framework/angular/reference/functions/provideTanStackQuery.md
The broader TanStack Devtools documentation follows the same split between core functionality and framework adapters. The React devtools adapter offers a component and plugin list while re-exporting lower-level utilities for teams that need them. That pattern is useful when comparing Query adapters too: start with the framework package because it handles lifecycle and rendering integration, then drop toward core utilities only when building custom infrastructure. Browser extensions and framework packages can provide similar inspection goals, but the installation and activation point should match the runtime you are using.
Docs Navigation and Ecosystem Handoff
When moving between adapters, read the local Getting Started pages first, then return to shared topics such as query keys, query functions, invalidation, mutation workflows, and hydration. The docs configuration is the source of truth for where those framework sections appear on the site, while community resources provide broader learning material, code generators, key factories, batching utilities, and related ecosystem tools. Treat community utilities as complements rather than replacements for the adapter contract: they may generate hooks, standardize keys, or improve transport layers, but the QueryClient and adapter integration still define application behavior. Sources: docs/config.json, docs/community-resources.md
Next Steps
Choose the page that matches your runtime before copying setup code. React readers should continue to the React hooks and examples pages; Angular readers should continue to the Angular experimental page and function reference; Vue, Solid, Svelte, Preact, and Lit readers should use their adapter-specific overviews. After setup, learn the shared Query concepts once and reuse them everywhere: query keys for identity, query functions for async work, filters for cache operations, mutations for writes, and devtools for understanding runtime state.