Broadcast Client

Purpose and Scope

The broadcast client is an experimental integration pattern for synchronizing TanStack Query cache changes across browser contexts, such as separate tabs or windows of the same application. It belongs beside the QueryClient, because the QueryClient is the object that owns query and mutation caches and exposes the public cache interaction methods described in the official reference. In practical application code, broadcasting should be treated as cache coordination, not as a replacement for query functions, invalidation rules, or server-side consistency guarantees.

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

The supplied repository docs for this page are centered on Angular Query, but they show the important integration boundary clearly: applications provide a QueryClient once, then compose optional features and framework-specific observation APIs around it. For cross-context synchronization, that boundary matters more than the rendering framework. A React, Vue, Solid, Svelte, Angular, Preact, or Lit adapter can present different APIs, while the shared idea remains that cached server state is stored in TanStack Query and observed by framework-native components.

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

Relevant Source Files

• docs/framework/angular/reference/functions/provideTanStackQuery.md - Defines the Angular provider entry point for installing a QueryClient and optional features into an application.
• docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md - Explains that TanStack Query query functions are promise-based and data-client agnostic, which keeps synchronization separate from transport concerns.
• docs/framework/angular/devtools.md - Shows how optional features such as withDevtools are added at the same provider layer and how devtools can inspect queries and mutations.
• docs/framework/angular/guides/background-fetching-indicators.md - Demonstrates framework APIs that observe query state and global fetching state after the client is provided.
• docs/config.json - Shows the documentation spine across frameworks and the Community Resources entry, placing this feature in the broader docs structure.
• docs/community-resources.md - Lists adjacent community utilities and learning resources that help teams reason about cache management and debugging workflows.

System-to-Code Mapping

In Angular, provideTanStackQuery(queryClient, ...features) returns Provider[] and sets up the providers required for TanStack Query functionality. The examples show both standalone bootstrap and NgModule-based usage with new QueryClient(), plus an advanced InjectionToken form for sharing a client from lazy-loaded routes. This is the same kind of root-level placement a broadcast integration needs: create or obtain the application’s QueryClient, register TanStack Query with the framework, then attach optional infrastructure around that client rather than scattering cache synchronization through components.

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

The docs also show that optional features are composed at provider setup time. withDevtools is added as a feature to provideTanStackQuery, and its loading behavior can be controlled for development, production, or reactive on-demand usage. A broadcast client should be evaluated with the same mental model: it is infrastructure connected to the client lifecycle. Keeping it near client construction makes it easier to reason about when synchronization starts, whether it should run in a particular environment, and how to avoid duplicate registration.

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

TanStack Query’s fetching layer remains promise-based and backend-agnostic. The Angular data-fetching guide explicitly states that applications can use native fetch, graphql-request, Angular HttpClient, or other asynchronous clients, with observables converted to promises using lastValueFrom or firstValueFrom. Broadcasting cache changes does not change that contract. Query functions still fetch authoritative data from the server, while the broadcast layer only helps other browser contexts learn about cache updates, invalidations, or resulting state changes.

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

Integration Flow

Start with a single QueryClient for the application context. In Angular, that can be done during bootstrapApplication or in an NgModule provider array. If the application only uses Query on lazy routes, the documented InjectionToken pattern can keep the client shareable while delaying the TanStack Query bundle from the main application path. Once the client is established, attach cross-context synchronization at that same application boundary so components continue to use normal query APIs and do not need to know whether updates were local or broadcast.

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

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

After setup, ordinary query code continues to declare server-state dependencies with query keys and query functions. The Angular guide’s injectQuery example uses queryKey: ['repoData'] and a promise-returning queryFn; the background-fetching guide uses queryKey: ['todos'] with fetchTodos. These keys are the cache identity that any synchronization story depends on. If two browser contexts use incompatible keys for the same resource, a broadcast layer cannot make their caches converge in a meaningful way.

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

Observable Behavior and Debugging

A useful way to verify cross-context cache synchronization is to watch the same state that the UI watches. The background-fetching guide distinguishes initial pending UI from background refresh UI by checking isPending(), isError(), isSuccess(), and isFetching() on a query. It also shows injectIsFetching() for a global loading indicator. Those signals make good smoke tests: when one tab triggers an invalidation or refetch that affects another tab, the receiving tab should still express normal TanStack Query states rather than custom broadcast-only state.

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

Devtools provide the second validation path. The Angular devtools docs state that devtools help debug and inspect queries and mutations, and they can be enabled with withDevtools() in the provider configuration. They are excluded from production bundles by default, but the production sub-path and loadDevtools option allow controlled loading when needed. For a broadcast-client investigation, devtools are valuable because they make cache keys, query activity, and mutation activity visible while multiple tabs are open.

Sources: docs/framework/angular/devtools.md

Compact Reference

The documentation navigation in docs/config.json shows that TanStack Query presents framework-specific docs under a shared product spine, including React, Solid, Vue, Svelte, Lit, and Angular sections. That structure is important when learning an experimental integration: use the framework page for the provider or hook names, then carry the cache concepts across adapters. The community resources page adds adjacent ecosystem tools such as query-key factories, generated clients, and debugging utilities, which can help teams standardize the cache identity that broadcasting depends on.

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

Next Steps

When adopting a broadcast client, first standardize query keys for the resources that should synchronize between contexts, then register synchronization near QueryClient creation rather than inside leaf components. Next, open two browser contexts and use normal UI state, a global fetching indicator, and devtools to confirm that cache updates still look like ordinary TanStack Query activity. Finally, review the relevant framework adapter page for provider setup and the QueryClient reference for cache APIs such as fetching, invalidation, and direct cache reads or writes.

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