@rozenite/tanstack-query-plugin 1.13.0 → 2.1.0

package/src/ui/useHandleSyncMessages.ts

@@ -8,9 +8,7 @@ import {
   applyQueryObserverEvent,
 } from '../shared/hydrate';
 
-export const useHandleSyncMessages = (
-  client: TanStackQueryPluginClient | null
-) => {
+export const useHandleSyncMessages = (client: TanStackQueryPluginClient | null) => {
   const queryClient = useQueryClient();
 
   useEffect(() => {
@@ -18,39 +16,33 @@ export const useHandleSyncMessages = (
       return;
     }
 
-    const querySubscription = client.onMessage(
-      'sync-query-event',
-      (message) => {
-        const { type, data } = message;
+    const querySubscription = client.onMessage('sync-query-event', (message) => {
+      const { type, data } = message;
 
-        if (type === 'added' || type === 'removed') {
-          applyQueryEvent(queryClient, type, data);
-          return;
-        }
-
-        if (type === 'updated') {
-          const action = 'action' in message ? message.action : undefined;
-          applyQueryEvent(queryClient, type, data, action);
-          return;
-        }
+      if (type === 'added' || type === 'removed') {
+        applyQueryEvent(queryClient, type, data);
+        return;
+      }
 
-        if (
-          type === 'observerAdded' ||
-          type === 'observerRemoved' ||
-          type === 'observerOptionsUpdated'
-        ) {
-          applyQueryObserverEvent(queryClient, data);
-          return;
-        }
+      if (type === 'updated') {
+        const action = 'action' in message ? message.action : undefined;
+        applyQueryEvent(queryClient, type, data, action);
+        return;
       }
-    );
 
-    const mutationSubscription = client.onMessage(
-      'sync-mutation-event',
-      ({ type, data }) => {
-        applyMutationEvent(queryClient, type, data);
+      if (
+        type === 'observerAdded' ||
+        type === 'observerRemoved' ||
+        type === 'observerOptionsUpdated'
+      ) {
+        applyQueryObserverEvent(queryClient, data);
+        return;
       }
-    );
+    });
+
+    const mutationSubscription = client.onMessage('sync-mutation-event', ({ type, data }) => {
+      applyMutationEvent(queryClient, type, data);
+    });
 
     // Keep the full sync for initial data requests
     const fullSyncSubscription = client.onMessage('sync-data', ({ data }) => {

package/src/ui/useSyncDevToolsEvents.ts

@@ -2,9 +2,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { TanStackQueryPluginClient } from '../shared/messaging';
 
-export const useSyncDevToolsEvents = (
-  client: TanStackQueryPluginClient | null
-) => {
+export const useSyncDevToolsEvents = (client: TanStackQueryPluginClient | null) => {
   const queryClient = useQueryClient();
 
   useEffect(() => {
@@ -17,14 +15,8 @@ export const useSyncDevToolsEvents = (
       const { type, queryHash } = detail;
 
       // Get the query from cache if we have a hash
-      const query = queryHash
-        ? queryClient.getQueryCache().get(queryHash)
-        : undefined;
-      if (
-        !query &&
-        type !== 'CLEAR_QUERY_CACHE' &&
-        type !== 'CLEAR_MUTATION_CACHE'
-      ) {
+      const query = queryHash ? queryClient.getQueryCache().get(queryHash) : undefined;
+      if (!query && type !== 'CLEAR_QUERY_CACHE' && type !== 'CLEAR_MUTATION_CACHE') {
         return;
       }
 
@@ -49,7 +41,6 @@ export const useSyncDevToolsEvents = (
     };
 
     window.addEventListener('@tanstack/query-devtools-event', handleEvent);
-    return () =>
-      window.removeEventListener('@tanstack/query-devtools-event', handleEvent);
+    return () => window.removeEventListener('@tanstack/query-devtools-event', handleEvent);
   }, [client]);
 };

package/src/ui/useSyncInitialData.test.tsx

@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+
+import { act, type ReactNode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+import { useSyncInitialData } from './useSyncInitialData';
+
+declare global {
+  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
+}
+
+type Listener = (payload: unknown) => void;
+
+const createClient = () => {
+  const listeners = new Map<string, Set<Listener>>();
+
+  return {
+    send: vi.fn(),
+    onMessage: vi.fn((type: string, listener: Listener) => {
+      const typeListeners = listeners.get(type) ?? new Set<Listener>();
+      typeListeners.add(listener);
+      listeners.set(type, typeListeners);
+      return { remove: () => typeListeners.delete(listener) };
+    }),
+    close: vi.fn(),
+    emit: (type: string, payload: unknown) =>
+      listeners.get(type)?.forEach((listener) => listener(payload)),
+  };
+};
+
+const requests = (client: ReturnType<typeof createClient>) =>
+  client.send.mock.calls.filter(([type]) => type === 'request-initial-data');
+
+describe('useSyncInitialData', () => {
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete globalThis.IS_REACT_ACT_ENVIRONMENT;
+  });
+
+  // The panel is recreated on every app reload and asks for the cache before the
+  // app's React tree has mounted the plugin, so its first request is dropped.
+  it('asks for the cache again when the device announces itself', async () => {
+    const client = createClient();
+    const queryClient = new QueryClient();
+    queryClient.setQueryData(['stale-from-previous-context'], 'value');
+
+    const Harness = ({ children }: { children?: ReactNode }) => {
+      useSyncInitialData(client as unknown as TanStackQueryPluginClient);
+      return <>{children}</>;
+    };
+    const container = document.createElement('div');
+    document.body.append(container);
+    const root = createRoot(container);
+    await act(async () =>
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <Harness />
+        </QueryClientProvider>,
+      ),
+    );
+
+    expect(requests(client)).toHaveLength(1);
+
+    await act(async () => client.emit('device-ready', {}));
+
+    expect(requests(client)).toHaveLength(2);
+    expect(queryClient.getQueryData(['stale-from-previous-context'])).toBeUndefined();
+
+    await act(async () => root.unmount());
+  });
+});

package/src/ui/useSyncInitialData.ts

@@ -1,14 +1,27 @@
 import { useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import { TanStackQueryPluginClient } from '../shared/messaging';
 
-export const useSyncInitialData = (
-  client: TanStackQueryPluginClient | null
-) => {
+export const useSyncInitialData = (client: TanStackQueryPluginClient | null) => {
+  const queryClient = useQueryClient();
+
   useEffect(() => {
     if (!client) {
       return;
     }
 
+    // The device announces itself once it is listening. It reconnects on every
+    // app reload, so the cache has to be pulled again — what the panel holds
+    // belongs to the previous JS context.
+    const subscription = client.onMessage('device-ready', () => {
+      queryClient.clear();
+      client.send('request-initial-data', {});
+    });
+
     client.send('request-initial-data', {});
-  }, [client]);
+
+    return () => {
+      subscription.remove();
+    };
+  }, [client, queryClient]);
 };