Issue #7487 fix: (query-broadcast-client-experimental) - removing query from one tab doesn't remove it from all tabs

packages/query-broadcast-client-experimental/package.json

@@ -28,6 +28,8 @@
     "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --build",
     "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build",
     "test:types:tscurrent": "tsc --build",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict && attw --pack",
     "build": "tsup --tsconfig tsconfig.prod.json"
   },

packages/query-broadcast-client-experimental/src/__tests__/index.test.ts

@@ -0,0 +1,31 @@
+import { QueryClient } from '@tanstack/query-core'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { broadcastQueryClient } from '..'
+import type { QueryCache } from '@tanstack/query-core'
+
+describe('broadcastQueryClient', () => {
+  let queryClient: QueryClient
+  let queryCache: QueryCache
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+    queryCache = queryClient.getQueryCache()
+  })
+
+  it('should subscribe to the query cache', async () => {
+    broadcastQueryClient({
+      queryClient,
+      broadcastChannel: 'test_channel',
+    })
+    expect(queryCache.hasListeners()).toBe(true)
+  })
+
+  it('should not have any listeners after cleanup', async () => {
+    const unsubscribe = broadcastQueryClient({
+      queryClient,
+      broadcastChannel: 'test_channel',
+    })
+    unsubscribe()
+    expect(queryCache.hasListeners()).toBe(false)
+  })
+})

packages/query-broadcast-client-experimental/src/index.ts

@@ -12,7 +12,7 @@ export function broadcastQueryClient({
   queryClient,
   broadcastChannel = 'tanstack-query',
   options,
-}: BroadcastQueryClientOptions) {
+}: BroadcastQueryClientOptions): () => void {
   let transaction = false
   const tx = (cb: () => void) => {
     transaction = true
@@ -27,13 +27,13 @@ export function broadcastQueryClient({
 
   const queryCache = queryClient.getQueryCache()
 
-  queryClient.getQueryCache().subscribe((queryEvent) => {
+  const unsubscribe = queryClient.getQueryCache().subscribe((queryEvent) => {
     if (transaction) {
       return
     }
 
     const {
-      query: { queryHash, queryKey, state },
+      query: { queryHash, queryKey, state, observers },
     } = queryEvent
 
     if (queryEvent.type === 'updated' && queryEvent.action.type === 'success') {
@@ -45,13 +45,21 @@ export function broadcastQueryClient({
       })
     }
 
-    if (queryEvent.type === 'removed') {
+    if (queryEvent.type === 'removed' && observers.length > 0) {
       channel.postMessage({
         type: 'removed',
         queryHash,
         queryKey,
       })
     }
+
+    if (queryEvent.type === 'added') {
+      channel.postMessage({
+        type: 'added',
+        queryHash,
+        queryKey,
+      })
+    }
   })
 
   channel.onmessage = (action) => {
@@ -62,9 +70,9 @@ export function broadcastQueryClient({
     tx(() => {
       const { type, queryHash, queryKey, state } = action
 
-      if (type === 'updated') {
-        const query = queryCache.get(queryHash)
+      const query = queryCache.get(queryHash)
 
+      if (type === 'updated') {
         if (query) {
           query.setState(state)
           return
@@ -79,12 +87,27 @@ export function broadcastQueryClient({
           state,
         )
       } else if (type === 'removed') {
-        const query = queryCache.get(queryHash)
-
         if (query) {
           queryCache.remove(query)
         }
+      } else if (type === 'added') {
+        if (query) {
+          query.setState(state)
+          return
+        }
+        queryCache.build(
+          queryClient,
+          {
+            queryKey,
+            queryHash,
+          },
+          state,
+        )
       }
     })
   }
+  return () => {
+    unsubscribe()
+    channel.close()
+  }
 }