📄 tanstack/query/v4/docs/framework/react/plugins/broadcastQueryClient

VERY IMPORTANT: This utility is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages.

broadcastQueryClient is a utility for broadcasting and syncing the state of your queryClient between browser tabs/windows with the same origin.

Installation
------------

This utility comes as a separate package and is available under the '@tanstack/query-broadcast-client-experimental' import.

Usage
-----

Import the broadcastQueryClient function, and pass it your QueryClient instance, and optionally, set a broadcastChannel.

tsx

import { broadcastQueryClient } from '@tanstack/query-broadcast-client-experimental'

const queryClient = new QueryClient()

broadcastQueryClient({
  queryClient,
  broadcastChannel: 'my-app',
})


import { broadcastQueryClient } from '@tanstack/query-broadcast-client-experimental'

const queryClient = new QueryClient()

broadcastQueryClient({
  queryClient,
  broadcastChannel: 'my-app',
})

API
--- ### broadcastQueryClient

Pass this function a QueryClient instance and optionally, a broadcastChannel.

tsx

broadcastQueryClient({ queryClient, broadcastChannel })


broadcastQueryClient({ queryClient, broadcastChannel })

### Options

An object of options:

tsx

interface broadcastQueryClient {
  /** The QueryClient to sync */
  queryClient: QueryClient
  /** This is the unique channel name that will be used
   * to communicate between tabs and windows */
  broadcastChannel?: string
  /** Options for the BroadcastChannel API */
  options?: BroadcastChannelOptions
}


interface broadcastQueryClient {
  /** The QueryClient to sync */
  queryClient: QueryClient
  /** This is the unique channel name that will be used
   * to communicate between tabs and windows */
  broadcastChannel?: string
  /** Options for the BroadcastChannel API */
  options?: BroadcastChannelOptions
}

The default options are:

tsx

{
  broadcastChannel = 'react-query',
}


{
  broadcastChannel = 'react-query',
}

Edit on GitHub

createAsyncStoragePersister

Simple

Partners Become a Partner

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)

You are currently reading v4 docs. Redirect to latest version?

Latest Hide

scarf analytics