OpenWikitanstack/query

Cross-framework Examples

Purpose and Scope

This page helps developers transfer TanStack Query concepts from one UI framework adapter to another, with the Angular example as the most concrete repository-backed walkthrough. The central idea is that each adapter exposes framework-native setup and consumption APIs while preserving the same server-state mental model: create or provide a query client, describe asynchronous work with query keys and query functions, and let TanStack Query manage caching, refetching, synchronization, and update timing. Use this page when comparing a non-React example to a React tutorial, or when deciding where framework-specific setup ends and shared query behavior begins.

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

The documentation navigation is organized by framework, so cross-framework learning starts by recognizing the available adapter sections rather than treating the React guide as the only source of truth. The supplied docs configuration lists separate areas for Solid, Vue, Svelte, and Lit, each with its own getting-started or installation material where applicable. That layout is important because it signals that examples should be read through the idioms of each framework. A Vue reader should look for composables and reactivity guidance, a Svelte reader should expect SvelteKit and store-oriented material, and a Lit reader should look for Lit-specific controller or element patterns in that framework section.

Sources: docs/config.json

Relevant Source Files

  • docs/framework/angular/reference/functions/provideTanStackQuery.md — Defines the Angular setup function, its signature, standalone bootstrap example, NgModule example, devtools feature usage, and InjectionToken optimization notes.
  • integrations/angular-cli-20/src/main.ts — Shows the Angular CLI example entry point bootstrapping the root application with an application configuration object.
  • integrations/angular-cli-20/package.json — Declares the Angular CLI integration scripts and dependencies, including Angular 20 packages and @tanstack/angular-query-experimental.
  • docs/community-resources.md — Provides first-party community links, media, and utilities that help readers continue learning patterns that often apply across adapters.
  • docs/config.json — Shows the documentation section structure and framework-specific navigation entries used to orient readers across React, Solid, Vue, Svelte, and Lit documentation areas.
  • docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md — Explains Angular-specific fetching choices, Promise-based query functions, HttpClient integration, and observable conversion.

Core Primitives Across Adapters

Across framework examples, focus first on the primitives that stay conceptually stable. A query client owns the cache and default behavior. A provider or framework integration makes that client available to components. A query function returns a Promise for the data to cache. A query key identifies the cached result and provides the handle for invalidation, refetching, and matching. The framework adapter decides whether those pieces are expressed as hooks, composables, signals, providers, controllers, or stores, but the reader task is the same: connect the application runtime to a QueryClient and describe asynchronous server-state operations declaratively.

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

The Angular reference gives the clearest example of this adapter contract. The provideTanStackQuery function accepts a QueryClient instance, or an Angular InjectionToken that produces one, followed by optional features. It returns Angular providers that enable TanStack Query functionality in the application. That shape is deliberately Angular-native: instead of a component wrapper, setup flows through Angular's provider system. When translating from another adapter, look for the equivalent setup boundary. In React and Preact it is usually a provider component; in Angular it is the application provider list; in other adapters it is whatever mechanism the framework uses to expose shared services to components.

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

Angular CLI Example Walkthrough

The Angular CLI integration demonstrates the shape of a minimal Angular application that has a framework-managed entry point. The main file imports bootstrapApplication from Angular, imports appConfig, imports the root App component, and then calls bootstrapApplication with App and appConfig. Errors are caught and logged. The TanStack Query provider is not shown in that entry file because Angular encourages application-wide providers to live in configuration. That split is useful when reading examples: the bootstrapping file may only prove how the app starts, while the query client setup may be one layer deeper in the framework's configuration object.

Sources: integrations/angular-cli-20/src/main.ts

The package manifest confirms that this integration is a real Angular 20 project rather than a generic TypeScript sample. Its scripts use ng serve for local development, ng build for production builds, and an Angular watch build for development rebuilds. Its dependencies include Angular platform, router, forms, RxJS, Zone.js, and the experimental Angular Query package. That combination gives readers a practical transfer pattern: when evaluating an adapter example, inspect both the code entry point and the package manifest. The code shows how the adapter is wired; the manifest shows which framework runtime, build tool, and TanStack package the example expects.

Sources: integrations/angular-cli-20/package.json, integrations/angular-cli-20/src/main.ts

Data Fetching Client Choices

TanStack Query's fetching model is Promise-based and intentionally backend-agnostic, so examples do not require a specific HTTP library. The Angular data-fetching guide explicitly says users can fetch with browser fetch, graphql-request, Angular HttpClient, or another asynchronous client. Angular HttpClient has framework-specific advantages: testing helpers, interceptors integrated with dependency injection, PendingTasks awareness for tests and server rendering, and server-side request caching. The adapter lesson is broader than Angular: choose the data client that best fits the framework's ecosystem, then adapt its result into the Promise-returning query function contract expected by TanStack Query.

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

Angular also highlights an edge case that appears whenever a framework's native async primitive is not already a Promise. HttpClient returns observables, so the guide converts them with lastValueFrom or firstValueFrom before returning from queryFn. That conversion is a concrete example of how to bridge framework-native data streams into TanStack Query's cache workflow. A similar rule applies in other adapters: keep framework idioms at the boundary, but make the query function resolve to data or reject with an error. The cache does not need to know whether the request came from REST, GraphQL, an interceptor pipeline, or a generated client.

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

Framework Navigation and Transfer Checklist

Use the docs navigation as the map for transferring examples. Start with the framework overview or installation page, then find quick-start material when it exists, then move to devtools, TypeScript, SSR, reactivity, or migration pages that match the target framework. The supplied configuration shows that framework docs are not identical: Solid includes overview, quick start, installation, devtools, and TypeScript; Vue adds reactivity and GraphQL; Svelte includes SSR and SvelteKit plus migration material; Lit includes its own overview, installation, and quick start entries. Differences in navigation usually reflect differences in adapter surface area and framework concerns.

Sources: docs/config.json

When adapting an example, follow a repeatable checklist. First, identify the package name used by the target adapter. Second, find the framework's provider or setup primitive and place the QueryClient where the framework expects shared application services. Third, translate the data-fetching client to a Promise-returning query function. Fourth, preserve query keys when transferring cache behavior, because keys are the stable identity mechanism across adapters. Fifth, add devtools only through the adapter-supported path. In Angular, the provider reference shows optional withDevtools integration and notes that developer tools load in development mode by default when enabled.

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

Community Learning and Next Steps

Cross-framework learning benefits from the community material because many cache, invalidation, pagination, and mutation lessons are adapter-independent. The community resources page lists maintainer-authored articles, talks, and utilities. Some utilities target React naming, but the underlying practices, such as standardized query keys, generated clients, GraphQL workflows, request batching, and normalization strategies, often inform non-React implementations too. Treat those resources as pattern references, then return to the target framework docs for exact APIs. For example, an article may explain why query keys matter, while the Angular, Vue, Solid, Svelte, Preact, or Lit guide shows how to express that idea idiomatically.

Sources: docs/community-resources.md, docs/config.json

Next, read the adapter-specific pages for the framework you are implementing, then compare them against this Angular-backed setup model. If you are evaluating Angular, start with provideTanStackQuery and the HttpClient guide. If you are evaluating another framework, use the docs navigation to locate its overview and quick-start entries, then map its provider, query consumption API, devtools package, and SSR or reactivity notes back to the shared primitives described here. That approach prevents copy-pasting React-specific syntax while still reusing the core TanStack Query concepts that make examples portable.

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

Ask a question...