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"
   },
@@ -60,6 +62,8 @@
     "broadcast-channel": "^7.0.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "npm-run-all2": "^5.0.0"
   }
 }

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 @@
   queryClient,
   broadcastChannel = 'tanstack-query',
   options,
-}: BroadcastQueryClientOptions) {
+}: BroadcastQueryClientOptions): () => void {
   let transaction = false
   const tx = (cb: () => void) => {
     transaction = true
@@ -27,13 +27,13 @@
 
   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 @@
       })
     }
 
-    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 @@
     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 @@
           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()
+  }
 }

packages/query-broadcast-client-experimental/test-setup.ts

@@ -0,0 +1,14 @@
+import '@testing-library/jest-dom/vitest'
+import { act, cleanup as cleanupRTL } from '@testing-library/react'
+import { afterEach } from 'vitest'
+import { notifyManager } from '@tanstack/query-core'
+
+// https://testing-library.com/docs/react-testing-library/api#cleanup
+afterEach(() => {
+  cleanupRTL()
+})
+
+// Wrap notifications with act to make sure React knows about React Query updates
+notifyManager.setNotifyFunction((fn) => {
+  act(fn)
+})

packages/query-broadcast-client-experimental/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+import packageJson from './package.json'
+
+export default defineConfig({
+  plugins: [react()],
+  // fix from https://github.com/vitest-dev/vitest/issues/6992#issuecomment-2509408660
+  resolve: {
+    conditions: ['@tanstack/custom-condition'],
+  },
+  environments: {
+    ssr: {
+      resolve: {
+        conditions: ['@tanstack/custom-condition'],
+      },
+    },
+  },
+  test: {
+    name: packageJson.name,
+    dir: './src',
+    watch: false,
+    environment: 'jsdom',
+    setupFiles: ['test-setup.ts'],
+    coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
+    typecheck: { enabled: true },
+    restoreMocks: true,
+    retry: process.env.CI ? 3 : 0,
+  },
+})