fix: sync query state in broadcast added events

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,17 +15,63 @@ describe('broadcastQueryClient', () => {
   it('should subscribe to the query cache', () => {
     broadcastQueryClient({
       queryClient,
-      broadcastChannel: 'test_channel',
+      broadcastChannel,
     })
     expect(queryCache.hasListeners()).toBe(true)
   })
 
   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<typeof seededData> = {
+      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()
+  })
 })

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
         }