React Examples
Purpose and Scope
This page helps React users choose which TanStack Query example pattern to study first. TanStack Query examples are most useful when they are read as demonstrations of a small number of durable primitives: a client owns cache state, a framework provider makes that client available, query functions return promises, and optional tooling such as devtools helps inspect cache behavior. The supplied repository evidence for this page is mostly docs navigation and an Angular integration, so this page focuses on a source-grounded curation method rather than a file-by-file inventory of React example apps.
The React docs entry points are visible in the documentation configuration. The React framework section includes Overview, Installation, Quick Start, Devtools, Comparison, TypeScript, GraphQL, and React Native pages, which is the same sequence a developer should use when evaluating examples: start with the minimal client/provider setup, then add data-fetching shape, type safety, tooling, platform behavior, and specialized transports. Sources: docs/config.json
Treat the examples catalog as a learning path instead of a gallery. A basic React Query example should teach cache creation and consumption. Pagination and infinite-scroll examples should teach cache identity and page parameters. Optimistic-update examples should teach mutation lifecycle and rollback. Router and prefetching examples should teach warming data before navigation. Devtools examples should teach inspection and diagnosis. Offline or React Native examples should teach focus and online managers, because non-browser environments need explicit integration points for reconnect and app-focus behavior.
Relevant Source Files
- docs/config.json - Defines the documentation navigation, including the React framework entry points that should anchor a React examples reading path.
- docs/community-resources.md - Lists community articles, media, and utilities that extend the examples story with maintainer-written guidance and ecosystem tools.
- docs/framework/angular/reference/functions/provideTanStackQuery.md - Shows the provider-level contract used by the Angular adapter, which is useful for understanding the equivalent provider role in React examples.
- integrations/angular-cli-20/src/main.ts - Shows a concrete integration bootstrap file where the application starts with framework configuration.
- integrations/angular-cli-20/package.json - Shows an integration app dependency set and scripts, including the experimental Angular Query package and Angular CLI commands.
- docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md - Explains the promise-based fetching contract that also applies to React query functions, regardless of whether the transport is fetch, GraphQL, or a framework client.
Example Selection Flow
Begin with the Quick Start-style example. In React, the first working path should show a QueryClient created once, a QueryClientProvider wrapped around the application, and a useQuery call that names data with a query key and loads it with a promise-returning query function. The exact React source is not part of the supplied paths, but the docs configuration confirms that Quick Start is a first-class React docs entry and that Installation precedes it. That sequencing matters: examples assume package setup before they teach cache behavior. Sources: docs/config.json
After the basic example works, move to examples that change cache identity over time. Pagination, infinite queries, dependent queries, and router-prefetch examples all depend on query keys being stable descriptions of data. A page-based example usually changes a page value in the key. A dependent example usually waits until an earlier query has produced an identifier. A router example usually prefetches the same key that the destination component later reads. The point is not the UI widget; the point is learning how a key maps asynchronous server state into the shared cache.
Next, study mutation examples. Mutations are the examples that demonstrate how server writes rejoin the query cache. A useful optimistic-update example should show a write beginning before the server confirms it, a rollback path if the write fails, and either invalidation or direct cache update after success. When reviewing example code, check whether it teaches user-visible state separately from server-confirmed state. The community resources file points readers to maintainer-authored articles and talks, including best-practice material for React Query, which are good companions when mutation examples become subtle. Sources: docs/community-resources.md
Then add development tooling. The docs navigation places Devtools directly in the React getting-started group, which signals that inspection is part of normal development rather than an advanced-only concern. A devtools example should make it easy to see query keys, fetching state, stale state, retries, and cache garbage collection behavior while interacting with the UI. If an example includes pagination, optimistic updates, or offline behavior, keep devtools visible while stepping through the workflow so the cache transitions are observable rather than inferred. Sources: docs/config.json
System-to-Code Mapping
The Angular provider reference is not a React example, but it exposes the same architectural role that React developers know through QueryClientProvider: framework integration installs a QueryClient and optional features into the application’s dependency boundary. In Angular, provideTanStackQuery accepts a QueryClient or an InjectionToken and returns Angular Provider objects; it can also receive features such as withDevtools. For React examples, look for the analogous boundary near the application root, because every query hook depends on a client being available. Sources: docs/framework/angular/reference/functions/provideTanStackQuery.md
The Angular CLI integration shows what an example application looks like at the framework bootstrap layer. Its main file imports bootstrapApplication, an app configuration object, and the root application component, then starts the application and logs bootstrap errors. Its package file defines start, build, and watch scripts and depends on @tanstack/angular-query-experimental alongside Angular packages. React examples will use a different framework bootstrap, but the reading strategy is the same: inspect the entry point, find the provider configuration, then inspect the components that call query or mutation hooks. Sources: integrations/angular-cli-20/src/main.ts, integrations/angular-cli-20/package.json
Fetching Contracts and Data Clients
React Query examples should not be tied to one backend style. The Angular data-fetching guide states the key cross-framework contract clearly: TanStack Query’s fetching mechanisms are built agnostically on promises, so callers can use native fetch, graphql-request, framework clients, or other asynchronous clients. That same contract is what makes React examples transferable between REST, GraphQL, generated OpenAPI clients, and custom SDKs. The important review question is whether the query function returns the promised data shape that the component expects. Sources: docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md
The Angular HttpClient guide also provides a useful caution for React readers evaluating examples that use non-promise clients. Angular observables must be converted with lastValueFrom or firstValueFrom before they can be used in a queryFn. In React projects, the equivalent issue appears when a data client exposes callbacks, subscriptions, or streams rather than a one-shot promise. A good example should isolate that adaptation inside the query function and keep the component focused on query state, data rendering, and user interaction rather than transport-specific plumbing. Sources: docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md
Platform and Offline Patterns
For web React examples, TanStack Query can use browser focus and online signals automatically. For React Native examples, the official docs describe explicit integration with onlineManager and focusManager. That means a React Native or offline-oriented example should be judged by whether it wires platform connectivity and app-focus events into Query before relying on reconnect refetching or focus refetching. Devtools support in React Native is also presented through third-party tools, so mobile examples may demonstrate inspection differently from browser examples.
Offline-capable examples are most useful when they separate three concerns: detecting network status, persisting or retaining useful cache state, and deciding when mutations or refetches should resume. Even when an example is small, look for a visible transition between active fetching, paused work, and resumed synchronization. If those transitions are hard to see, pair the example with devtools or logging. The goal is to understand how user experience remains responsive while server state is temporarily unreachable, not merely to confirm that a request eventually retries.
Compact Pattern Reference
| Pattern | What to inspect first | Why it matters | Source-backed anchor |
|---|---|---|---|
| Basic React setup | QueryClient creation, provider boundary, first query | Establishes the cache and hook consumption model | React docs navigation in docs/config.json |
| Devtools | Devtools installation and panel visibility | Makes query state, cache entries, and refetches observable | React Devtools entry in docs/config.json |
| GraphQL or generated clients | Query function return value and typed data shape | Confirms that TanStack Query remains transport agnostic | Promise-based fetching guide in docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md |
| Router and prefetching | Shared query keys between route loaders and components | Prevents duplicate loading and warms destination data | React docs spine in docs/config.json |
| Optimistic mutations | onMutate, rollback, success handling, invalidation | Shows how writes interact with cached server state | Community best-practice resources in docs/community-resources.md |
| React Native or offline | onlineManager, focusManager, persistence choices | Adapts refetching behavior to non-browser lifecycle signals | Official React Native docs evidence |
Next Steps
Use this page as a checklist while opening individual React examples. First identify the provider boundary, then identify each query key, then inspect the query function and mutation callbacks. Keep devtools open whenever an example involves background refetching, pagination, optimistic writes, or offline behavior. If you need deeper conceptual grounding before reading code, follow the React docs navigation from Overview through Quick Start, Devtools, TypeScript, GraphQL, and React Native. For broader practice guidance, use the community resources page to find maintainer-written articles and talks that explain the tradeoffs behind the examples. Sources: docs/config.json, docs/community-resources.md