diff --git a/packages/query-broadcast-client-experimental/src/__tests__/index.test.ts b/packages/query-broadcast-client-experimental/src/__tests__/index.test.ts index 6e09d8a86e2..f594b6e1f61 100644 --- a/packages/query-broadcast-client-experimental/src/__tests__/index.test.ts +++ b/packages/query-broadcast-client-experimental/src/__tests__/index.test.ts @@ -1,11 +1,11 @@ -import { QueryClient } from '@tanstack/query-core' -import { beforeEach, describe, expect, it } from 'vitest' +import { QueryClient, type QueryCache, type QueryState } from '@tanstack/query-core' +import { beforeEach, describe, expect, it, vi } from 'vitest' import { broadcastQueryClient } from '..' -import type { QueryCache } from '@tanstack/query-core' describe('broadcastQueryClient', () => { let queryClient: QueryClient let queryCache: QueryCache + const broadcastChannel = 'test_channel' beforeEach(() => { queryClient = new QueryClient() @@ -15,7 +15,7 @@ describe('broadcastQueryClient', () => { it('should subscribe to the query cache', () => { broadcastQueryClient({ queryClient, - broadcastChannel: 'test_channel', + broadcastChannel, }) expect(queryCache.hasListeners()).toBe(true) }) @@ -23,9 +23,55 @@ describe('broadcastQueryClient', () => { it('should not have any listeners after cleanup', () => { const unsubscribe = broadcastQueryClient({ queryClient, - broadcastChannel: 'test_channel', + broadcastChannel, }) unsubscribe() expect(queryCache.hasListeners()).toBe(false) }) + + it('should sync initial query state when query is added from another tab', async () => { + const receiverClient = new QueryClient() + const senderClient = new QueryClient() + + const senderUnsubscribe = broadcastQueryClient({ + queryClient: senderClient, + broadcastChannel, + }) + const receiverUnsubscribe = broadcastQueryClient({ + queryClient: receiverClient, + broadcastChannel, + }) + + const seededData = { value: 'seeded' } + const seededState: QueryState = { + data: seededData, + dataUpdateCount: 1, + dataUpdatedAt: Date.now(), + error: null, + errorUpdateCount: 0, + errorUpdatedAt: 0, + fetchFailureCount: 0, + fetchFailureReason: null, + fetchMeta: null, + isInvalidated: false, + status: 'success', + fetchStatus: 'idle', + } + + senderClient.getQueryCache().build( + senderClient, + { queryKey: ['seeded-query'] }, + seededState, + ) + + const findState = () => + receiverClient.getQueryCache().find({ queryKey: ['seeded-query'] })?.state + + await vi.waitFor(() => { + expect(findState()).toMatchObject(seededState) + }) + + senderUnsubscribe() + receiverUnsubscribe() + }) }) diff --git a/packages/query-broadcast-client-experimental/src/index.ts b/packages/query-broadcast-client-experimental/src/index.ts index e102b3c0b01..4d915654873 100644 --- a/packages/query-broadcast-client-experimental/src/index.ts +++ b/packages/query-broadcast-client-experimental/src/index.ts @@ -58,6 +58,7 @@ export function broadcastQueryClient({ type: 'added', queryHash, queryKey, + state, }) } }) @@ -92,6 +93,9 @@ export function broadcastQueryClient({ } } else if (type === 'added') { if (query) { + if (!state) { + return + } query.setState(state) return }