@rozenite/tanstack-query-plugin 2.0.0 → 2.1.0

package/src/shared/hydrate.ts

@@ -49,26 +49,24 @@ const hydrateObservers = (
 
     hydratedOptions.queryFn = mockQueryFn;
 
-    const observer = new QueryObserver(
-      client,
-      hydratedOptions as QueryObserverOptions,
-    );
+    const observer = new QueryObserver(client, hydratedOptions as QueryObserverOptions);
     query.addObserver(observer);
   });
 };
 
-const hydrateMutation = (
-  client: QueryClient,
-  dehydratedMutation: SerializableMutation,
-) => {
+const hydrateMutation = (client: QueryClient, dehydratedMutation: SerializableMutation) => {
   const mutationCache = client.getMutationCache();
   const { options, state } = dehydratedMutation;
 
   const existingMutation = mutationCache.find({
     mutationKey: options.mutationKey,
   });
-  const hydratedState: MutationState<unknown, Error, void, unknown> =
-    state as MutationState<unknown, Error, void, unknown>;
+  const hydratedState: MutationState<unknown, Error, void, unknown> = state as MutationState<
+    unknown,
+    Error,
+    void,
+    unknown
+  >;
   const hydratedOptions: MutationOptions = options;
 
   if (existingMutation) {
@@ -78,10 +76,7 @@ const hydrateMutation = (
   mutationCache.build(client, hydratedOptions, hydratedState);
 };
 
-const hydrateQuery = (
-  client: QueryClient,
-  dehydratedQuery: SerializableQuery,
-) => {
+const hydrateQuery = (client: QueryClient, dehydratedQuery: SerializableQuery) => {
   const queryCache = client.getQueryCache();
   const { queryKey, state, queryHash, observers } = dehydratedQuery;
 
@@ -132,9 +127,7 @@ export const hydrateQueryClient = (
   dehydratedState: SerializableQueryClient,
 ): void => {
   // Hydrate mutations
-  dehydratedState.mutations.forEach((mutation) =>
-    hydrateMutation(client, mutation),
-  );
+  dehydratedState.mutations.forEach((mutation) => hydrateMutation(client, mutation));
 
   // Hydrate queries
   dehydratedState.queries.forEach((query) => hydrateQuery(client, query));
@@ -187,10 +180,7 @@ export const applyQueryEvent = (
 };
 
 // New function to handle action-based partial state updates
-export const applyPartialQueryState = (
-  queryClient: QueryClient,
-  data: PartialQueryState,
-): void => {
+export const applyPartialQueryState = (queryClient: QueryClient, data: PartialQueryState): void => {
   const queryCache = queryClient.getQueryCache();
   const query = queryCache.get(data.queryHash);
 

package/src/shared/messaging.ts

@@ -19,6 +19,13 @@ export type TanStackQueryPluginEventMap = {
       data?: unknown;
     };
   };
+  /**
+   * Announced by the device once it is listening for panel messages. The panel
+   * is recreated on every app reload and asks for the cache immediately, which
+   * can land before the app's React tree has mounted the plugin; this lets the
+   * panel ask again instead of staying empty until the app is restarted.
+   */
+  'device-ready': unknown;
   'request-initial-data': unknown;
   'sync-data': {
     data: SerializableQueryClient;
@@ -53,5 +60,4 @@ export type TanStackQueryPluginEventMap = {
   };
 };
 
-export type TanStackQueryPluginClient =
-  RozeniteDevToolsClient<TanStackQueryPluginEventMap>;
+export type TanStackQueryPluginClient = RozeniteDevToolsClient<TanStackQueryPluginEventMap>;

package/src/shared/query-data-sync.test.ts

@@ -1,10 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { QueryClient } from '@tanstack/react-query';
-import {
-  applyRemoteQueryState,
-  instrumentQuery,
-  instrumentQueryClient,
-} from './query-data-sync';
+import { applyRemoteQueryState, instrumentQuery, instrumentQueryClient } from './query-data-sync';
 
 const createQueryClient = () =>
   new QueryClient({

package/src/shared/query-data-sync.ts

@@ -1,9 +1,4 @@
-import {
-  Query,
-  QueryClient,
-  QueryKey,
-  QueryState,
-} from '@tanstack/react-query';
+import { Query, QueryClient, QueryKey, QueryState } from '@tanstack/react-query';
 
 type QuerySetState = Query['setState'];
 type QueryClientSetQueryData = QueryClient['setQueryData'];
@@ -16,27 +11,17 @@ type SyncQueryDataPayload = {
 type QueryDataSyncHandler = (payload: SyncQueryDataPayload) => void;
 
 const originalQuerySetStateMap = new WeakMap<Query, QuerySetState>();
-const originalSetQueryDataMap = new WeakMap<
-  QueryClient,
-  QueryClientSetQueryData
->();
+const originalSetQueryDataMap = new WeakMap<QueryClient, QueryClientSetQueryData>();
 const instrumentedQueryClients = new WeakSet<QueryClient>();
 const instrumentedQueries = new WeakSet<Query>();
-const queryClientHandlers = new WeakMap<
-  QueryClient,
-  QueryDataSyncHandler | undefined
->();
+const queryClientHandlers = new WeakMap<QueryClient, QueryDataSyncHandler | undefined>();
 const queryHandlers = new WeakMap<Query, QueryDataSyncHandler | undefined>();
 
 const getOriginalQuerySetState = (query: Query): QuerySetState => {
   return originalQuerySetStateMap.get(query) ?? query.setState.bind(query);
 };
 
-const emitIfDataChanged = (
-  query: Query,
-  previousData: unknown,
-  handler?: QueryDataSyncHandler,
-) => {
+const emitIfDataChanged = (query: Query, previousData: unknown, handler?: QueryDataSyncHandler) => {
   if (!handler || Object.is(previousData, query.state.data)) {
     return;
   }
@@ -47,10 +32,7 @@ const emitIfDataChanged = (
   });
 };
 
-const isDataOnlyStateUpdate = (
-  previousState: QueryState,
-  nextState: Partial<QueryState>,
-) => {
+const isDataOnlyStateUpdate = (previousState: QueryState, nextState: Partial<QueryState>) => {
   if (!('data' in nextState)) {
     return false;
   }
@@ -63,18 +45,12 @@ const isDataOnlyStateUpdate = (
   return changedKeys.every((key) => key === 'data');
 };
 
-export const applyRemoteQueryState = (
-  query: Query,
-  state: Partial<QueryState>,
-) => {
+export const applyRemoteQueryState = (query: Query, state: Partial<QueryState>) => {
   const originalSetState = getOriginalQuerySetState(query);
   originalSetState(state);
 };
 
-export const instrumentQuery = (
-  query: Query,
-  handler?: QueryDataSyncHandler,
-) => {
+export const instrumentQuery = (query: Query, handler?: QueryDataSyncHandler) => {
   queryHandlers.set(query, handler);
 
   if (instrumentedQueries.has(query)) {
@@ -104,10 +80,7 @@ const resolveQueryHash = (queryClient: QueryClient, queryKey: QueryKey) => {
   return queryClient.getQueryCache().find({ queryKey })?.queryHash;
 };
 
-export const instrumentQueryClient = (
-  queryClient: QueryClient,
-  handler?: QueryDataSyncHandler,
-) => {
+export const instrumentQueryClient = (queryClient: QueryClient, handler?: QueryDataSyncHandler) => {
   queryClientHandlers.set(queryClient, handler);
 
   if (instrumentedQueryClients.has(queryClient)) {

package/src/shared/useSyncOnlineStatus.ts

@@ -2,9 +2,7 @@ import { useEffect } from 'react';
 import { onlineManager } from '@tanstack/react-query';
 import { TanStackQueryPluginClient } from './messaging';
 
-export const useSyncOnlineStatus = (
-  client: TanStackQueryPluginClient | null,
-) => {
+export const useSyncOnlineStatus = (client: TanStackQueryPluginClient | null) => {
   useEffect(() => {
     if (!client) {
       return;
@@ -14,12 +12,9 @@ export const useSyncOnlineStatus = (
       client.send('online-status-changed', { online });
     });
 
-    const onlineMessageSubscription = client.onMessage(
-      'online-status-changed',
-      ({ online }) => {
-        onlineManager.setOnline(online);
-      },
-    );
+    const onlineMessageSubscription = client.onMessage('online-status-changed', ({ online }) => {
+      onlineManager.setOnline(online);
+    });
 
     return () => {
       onlineManagerSubscription();

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;
-
-        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 === 'observerAdded' ||
-          type === 'observerRemoved' ||
-          type === 'observerOptionsUpdated'
-        ) {
-          applyQueryObserverEvent(queryClient, data);
-          return;
-        }
-      },
-    );
+    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 === 'observerAdded' ||
+        type === 'observerRemoved' ||
+        type === 'observerOptionsUpdated'
+      ) {
+        applyQueryObserverEvent(queryClient, data);
+        return;
+      }
+    });
 
-    const mutationSubscription = client.onMessage(
-      'sync-mutation-event',
-      ({ type, data }) => {
-        applyMutationEvent(queryClient, type, data);
-      },
-    );
+    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]);
 };

package/vite.config.ts

@@ -9,10 +9,7 @@ export default defineConfig({
   test: {
     passWithNoTests: true,
     alias: {
-      '@rozenite/agent-shared': resolve(
-        __dirname,
-        '../agent-shared/src/index.ts',
-      ),
+      '@rozenite/agent-shared': resolve(__dirname, '../agent-shared/src/index.ts'),
     },
   },
   base: './',