Morph MORPH
SIGN IN SIGN UP
TanStack / query UNCLAIMED

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

48981 0 0 TypeScript
Normal View History Raw
feat(broadcastQueryClient): experimental support for tab/window syncing (#1793) * feat(subscriptions): add event types and metadata to subscriptions * feat(broadcastQueryClient): experimental support for tab/window syncing * better types, update tests * feat(broadcastQueryClient): experimental support for tab/window syncing * rebase and update * use transactions * update docs * Update broadcastQueryClient.md * Update index.ts
2021-02-22 21:26:36 -07:00
---
id: broadcastQueryClient
title: broadcastQueryClient (Experimental)
---
> 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
chore: repair examples (#3845) * chore: fix examples they should now have the package.json point to tanstack * docs: cleanup plugin docs * chore: update package-lock
2022-07-18 22:43:22 +02:00
This utility comes as a separate package and is available under the `'@tanstack/query-broadcast-client-experimental'` import.
feat(broadcastQueryClient): experimental support for tab/window syncing (#1793) * feat(subscriptions): add event types and metadata to subscriptions * feat(broadcastQueryClient): experimental support for tab/window syncing * better types, update tests * feat(broadcastQueryClient): experimental support for tab/window syncing * rebase and update * use transactions * update docs * Update broadcastQueryClient.md * Update index.ts
2021-02-22 21:26:36 -07:00
## Usage
Import the `broadcastQueryClient` function, and pass it your `QueryClient` instance, and optionally, set a `broadcastChannel`.
docs(vue-query): migrate vue-query docs (#4710) * docs: vue guides * docs: vue query docs part 2 * docs: vue-query docs part 3 * docs: vue-query docs part 4 * docs: vue-query api reference * docs: vue-query examples * docs: fix TanStack casing
2022-12-29 09:24:43 +01:00
```tsx
chore: repair examples (#3845) * chore: fix examples they should now have the package.json point to tanstack * docs: cleanup plugin docs * chore: update package-lock
2022-07-18 22:43:22 +02:00
import { broadcastQueryClient } from '@tanstack/query-broadcast-client-experimental'
feat(broadcastQueryClient): experimental support for tab/window syncing (#1793) * feat(subscriptions): add event types and metadata to subscriptions * feat(broadcastQueryClient): experimental support for tab/window syncing * better types, update tests * feat(broadcastQueryClient): experimental support for tab/window syncing * rebase and update * use transactions * update docs * Update broadcastQueryClient.md * Update index.ts
2021-02-22 21:26:36 -07:00
const queryClient = new QueryClient()
broadcastQueryClient({
queryClient,
broadcastChannel: 'my-app',
})
```
## API
### `broadcastQueryClient`
Pass this function a `QueryClient` instance and optionally, a `broadcastChannel`.
docs(vue-query): migrate vue-query docs (#4710) * docs: vue guides * docs: vue query docs part 2 * docs: vue-query docs part 3 * docs: vue-query docs part 4 * docs: vue-query api reference * docs: vue-query examples * docs: fix TanStack casing
2022-12-29 09:24:43 +01:00
```tsx
feat(broadcastQueryClient): experimental support for tab/window syncing (#1793) * feat(subscriptions): add event types and metadata to subscriptions * feat(broadcastQueryClient): experimental support for tab/window syncing * better types, update tests * feat(broadcastQueryClient): experimental support for tab/window syncing * rebase and update * use transactions * update docs * Update broadcastQueryClient.md * Update index.ts
2021-02-22 21:26:36 -07:00
broadcastQueryClient({ queryClient, broadcastChannel })
```
### `Options`
An object of options:
docs(vue-query): migrate vue-query docs (#4710) * docs: vue guides * docs: vue query docs part 2 * docs: vue-query docs part 3 * docs: vue-query docs part 4 * docs: vue-query api reference * docs: vue-query examples * docs: fix TanStack casing
2022-12-29 09:24:43 +01:00
```tsx
feat(broadcastQueryClient): experimental support for tab/window syncing (#1793) * feat(subscriptions): add event types and metadata to subscriptions * feat(broadcastQueryClient): experimental support for tab/window syncing * better types, update tests * feat(broadcastQueryClient): experimental support for tab/window syncing * rebase and update * use transactions * update docs * Update broadcastQueryClient.md * Update index.ts
2021-02-22 21:26:36 -07:00
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
fix(query-broadcast-client): allow passing all broadcast-channel options (#5925) * fix(query-broadcast-client): allow passing in type for the channel allowed values are: 'native', 'idb', 'localstorage', 'node' * fix(query-broadcast-client): allow passing all broadcast-channel options * docs: options
2023-08-29 10:56:52 +02:00
/** Options for the BroadcastChannel API */
options?: BroadcastChannelOptions
feat(broadcastQueryClient): experimental support for tab/window syncing (#1793) * feat(subscriptions): add event types and metadata to subscriptions * feat(broadcastQueryClient): experimental support for tab/window syncing * better types, update tests * feat(broadcastQueryClient): experimental support for tab/window syncing * rebase and update * use transactions * update docs * Update broadcastQueryClient.md * Update index.ts
2021-02-22 21:26:36 -07:00
}
```
The default options are:
docs(vue-query): migrate vue-query docs (#4710) * docs: vue guides * docs: vue query docs part 2 * docs: vue-query docs part 3 * docs: vue-query docs part 4 * docs: vue-query api reference * docs: vue-query examples * docs: fix TanStack casing
2022-12-29 09:24:43 +01:00
```tsx
feat(broadcastQueryClient): experimental support for tab/window syncing (#1793) * feat(subscriptions): add event types and metadata to subscriptions * feat(broadcastQueryClient): experimental support for tab/window syncing * better types, update tests * feat(broadcastQueryClient): experimental support for tab/window syncing * rebase and update * use transactions * update docs * Update broadcastQueryClient.md * Update index.ts
2021-02-22 21:26:36 -07:00
{
broadcastChannel = 'react-query',
}
```
Reference in New Issue Copy Permalink