框架
版本

broadcastQueryClient (实验性)

非常重要:此实用程序目前处于实验性阶段。这意味着在次要版本和补丁版本中都会发生重大更改。使用风险自负。如果您选择在实验性阶段在生产环境中依赖此功能,请将您的版本锁定到补丁级别版本,以避免意外中断。

broadcastQueryClient 是一个实用程序,用于在同源的浏览器选项卡/窗口之间广播和同步您的 queryClient 的状态。

安装

此实用程序作为一个单独的软件包提供,可在 '@tanstack/query-broadcast-client-experimental' 导入下使用。

用法

导入 broadcastQueryClient 函数,并将您的 QueryClient 实例传递给它,并可选择设置一个 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

QueryClient 实例以及可选的 broadcastChannel 传递给此函数。

tsx
broadcastQueryClient({ queryClient, broadcastChannel })
broadcastQueryClient({ queryClient, broadcastChannel })

选项

选项对象

tsx
interface BroadcastQueryClientOptions {
  /** 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 BroadcastQueryClientOptions {
  /** 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
}

默认选项是

tsx
{
  broadcastChannel = 'tanstack-query',
}
{
  broadcastChannel = 'tanstack-query',
}