@rozenite/tanstack-query-plugin 1.0.0-alpha.0 → 1.0.0-alpha.2

package/src/react-native/useTanStackQueryDevTools.ts

@@ -1,214 +1,20 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import type { QueryCacheNotifyEvent, MutationCacheNotifyEvent, QueryClient, Query, Mutation } from '@tanstack/react-query';
-import { useCallback, useEffect, useRef } from 'react';
-
-type DevToolsActionType =
-  | 'REFETCH'
-  | 'INVALIDATE'
-  | 'RESET'
-  | 'REMOVE'
-  | 'TRIGGER_ERROR'
-  | 'RESTORE_ERROR'
-  | 'TRIGGER_LOADING'
-  | 'RESTORE_LOADING'
-  | 'CLEAR_MUTATION_CACHE'
-  | 'CLEAR_QUERY_CACHE';
-
-interface DevToolsEventDetail {
-  type: DevToolsActionType;
-  queryHash?: string;
-  mutationId?: number;
-  metadata?: Record<string, unknown>;
-  requestId?: string;
-}
-
-type DevToolsEventMap = {
-  "DEVTOOLS_TO_DEVICE": DevToolsEventDetail;
-  "DEVICE_TO_DEVTOOLS": QueryCacheNotifyEvent | MutationCacheNotifyEvent;
-  "DEVICE_TO_DEVTOOLS_ACK": { requestId: string; success: boolean };
-  "DEVICE_TO_DEVTOOLS_INITIAL_DATA": { queries: Query[]; mutations: Mutation[] };
-  "DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST": unknown;
-}
-
-export const useTanStackQueryDevTools = (queryClient: QueryClient) => {
-  const client = useRozeniteDevToolsClient<DevToolsEventMap>({
+import { TanStackQueryPluginEventMap } from '../shared/messaging';
+import { useSyncOnlineStatus } from '../shared/useSyncOnlineStatus';
+import { useHandleDevToolsMessages } from './useHandleDevToolsMessages';
+import { useSyncTanStackCache } from './useSyncTanStackCache';
+import { useHandleInitialData } from './useHandleInitialData';
+
+export const useTanStackQueryDevTools = () => {
+  const client = useRozeniteDevToolsClient<TanStackQueryPluginEventMap>({
     pluginId: '@rozenite/tanstack-query-plugin',
-  })
-
-  useEffect(() => {
-    if (!client) return;
-
-    const subscription = client.onMessage("DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST", () => {
-      client.send("DEVICE_TO_DEVTOOLS_INITIAL_DATA", {
-        queries: queryClient.getQueryCache().getAll(),
-        mutations: queryClient.getMutationCache().getAll(),
-      });
-    });
-
-    return () => subscription.remove();
-  }, [client, queryClient]);
-
-  // Track pending DevTools requests that are waiting for acknowledgment
-  const pendingDevToolsRequests = useRef<Set<string>>(new Set());
-
-  const handleEvent = useCallback((event: DevToolsEventDetail) => {
-    const getQuery = (hash: string): Query | undefined => {
-      return queryClient.getQueryCache().getAll().find(q => q.queryHash === hash);
-    }
-  
-    const onEvent = (event: DevToolsEventDetail): void => {
-      const { type, queryHash, metadata, requestId } = event;
-  
-      if (type === 'REFETCH' && queryHash) {
-        getQuery(queryHash)?.fetch();
-        if (requestId) {
-          pendingDevToolsRequests.current.add(requestId);
-          // Acknowledge immediately after the fetch is initiated
-          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-          pendingDevToolsRequests.current.delete(requestId);
-        }
-      }
-      if (type === 'INVALIDATE' && queryHash) {
-        const query = getQuery(queryHash);
-        if (query) {
-          queryClient.invalidateQueries({ queryKey: query.queryKey });
-        }
-        if (requestId) {
-          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-        }
-      }
-      if (type === 'RESET' && queryHash) {
-        const query = getQuery(queryHash);
-        if (query) {
-          queryClient.resetQueries({ queryKey: query.queryKey });
-        }
-        if (requestId) {
-          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-        }
-      }
-      if (type === 'REMOVE' && queryHash) {
-        const query = getQuery(queryHash);
-        if (query) {
-          queryClient.removeQueries({ queryKey: query.queryKey });
-        }
-        if (requestId) {
-          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-        }
-      }
-      if (type === 'TRIGGER_LOADING' && queryHash) {
-        const query = getQuery(queryHash);
-        
-        if (query) {
-          // Set state to loading/pending (simulate fetch in progress)
-          query.setState({
-            ...query.state,
-            fetchStatus: 'fetching',
-            status: 'pending',
-            error: null,
-          });
-          
-          if (requestId) {
-            pendingDevToolsRequests.current.add(requestId);
-            // Acknowledge immediately after the state change is applied
-            client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-            pendingDevToolsRequests.current.delete(requestId);
-          }
-        }
-      }
-      if (type === 'RESTORE_LOADING' && queryHash) {
-        const query = getQuery(queryHash);
-        if (query) {
-          // Set state to idle/success (simulate fetch complete)
-          query.setState({
-            ...query.state,
-            fetchStatus: 'idle',
-          });
-          
-          if (requestId) {
-            pendingDevToolsRequests.current.add(requestId);
-            // Acknowledge immediately after the state change is applied
-            client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-            pendingDevToolsRequests.current.delete(requestId);
-          }
-        }
-      }
-      if (type === 'TRIGGER_ERROR' && queryHash) {
-        const query = getQuery(queryHash);
-        if (query) {
-          query.setState({
-            ...query.state,
-            fetchStatus: 'idle',
-            status: 'error',
-            error: metadata?.error as Error || new Error('Forced error via devtools'),
-            errorUpdateCount: (query.state.errorUpdateCount ?? 0) + 1,
-            errorUpdatedAt: Date.now(),
-          });
-          
-          if (requestId) {
-            pendingDevToolsRequests.current.add(requestId);
-            // Acknowledge immediately after the state change is applied
-            client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-            pendingDevToolsRequests.current.delete(requestId);
-          }
-        }
-      }
-      if (type === 'RESTORE_ERROR' && queryHash) {
-        const query = getQuery(queryHash);
-        if (query) {
-          queryClient.resetQueries({ queryKey: query.queryKey });
-        }
-        if (requestId) {
-          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-        }
-      }
-      if (type === 'CLEAR_MUTATION_CACHE') {
-        queryClient.getMutationCache().clear();
-        if (requestId) {
-          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-        }
-      }
-      if (type === 'CLEAR_QUERY_CACHE') {
-        queryClient.clear();
-        if (requestId) {
-          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
-        }
-      }
-    }
-
-    onEvent(event);
-  }, [queryClient, client]);
-
-  useEffect(() => {
-    if (!client) return;
-
-    const subscription = client.onMessage("DEVTOOLS_TO_DEVICE", handleEvent);
-    return () => subscription.remove();
-  }, [handleEvent, client]);
+  });
 
-  useEffect(() => {
-    if (!client) return;
+  useSyncOnlineStatus(client);
 
-    return queryClient.getQueryCache().subscribe((event) => {
-      // Don't send events for queries that have pending DevTools requests
-      if (pendingDevToolsRequests.current.size > 0) {
-        return;
-      }
-      
-      client.send("DEVICE_TO_DEVTOOLS", event);
-    });
-  }, [client, queryClient]);
+  useHandleDevToolsMessages(client);
 
-  // Subscribe to mutation cache events
-  useEffect(() => {
-    if (!client) return;
+  useSyncTanStackCache(client);
 
-    return queryClient.getMutationCache().subscribe((event) => {
-      // Don't send events for mutations that have pending DevTools requests
-      if (pendingDevToolsRequests.current.size > 0) {
-        return;
-      }
-      
-      client.send("DEVICE_TO_DEVTOOLS", event);
-    });
-  }, [client, queryClient]);
-}
+  useHandleInitialData(client);
+};

package/src/shared/dehydrate.ts

@@ -0,0 +1,40 @@
+import type { Query, Mutation, QueryClient } from '@tanstack/react-query';
+import type {
+  SerializableQuery,
+  SerializableMutation,
+  SerializableObserver,
+  SerializableQueryClient,
+} from './types';
+
+export const dehydrateQuery = (query: Query): SerializableQuery => {
+  const dehydratedObservers: SerializableObserver[] = query.observers.map(
+    (observer) => ({
+      queryHash: query.queryHash,
+      options: observer.options,
+    })
+  );
+
+  return {
+    state: query.state,
+    queryKey: query.queryKey,
+    queryHash: query.queryHash,
+    observers: dehydratedObservers,
+  };
+};
+
+export const dehydrateMutation = (mutation: Mutation): SerializableMutation => {
+  return {
+    mutationId: mutation.mutationId,
+    state: mutation.state,
+    options: mutation.options,
+  };
+};
+
+export const dehydrateQueryClient = (
+  queryClient: QueryClient
+): SerializableQueryClient => {
+  return {
+    queries: queryClient.getQueryCache().getAll().map(dehydrateQuery),
+    mutations: queryClient.getMutationCache().getAll().map(dehydrateMutation),
+  };
+};

package/src/shared/hydrate.ts

@@ -0,0 +1,106 @@
+import {
+  InfiniteQueryObserverOptions,
+  MutationOptions,
+  MutationState,
+  QueryClient,
+  QueryObserver,
+  QueryObserverOptions,
+  QueryState,
+} from '@tanstack/react-query';
+import { SerializableQueryClient } from './types';
+
+const mockQueryFn = () => {
+  return Promise.resolve(null);
+};
+
+export const hydrateQueryClient = (
+  client: QueryClient,
+  dehydratedState: SerializableQueryClient
+): void => {
+  const queryCache = client.getQueryCache();
+  const mutationCache = client.getMutationCache();
+
+  // Sync mutations
+  dehydratedState.mutations.forEach(({ options, state }) => {
+    const existingMutation = mutationCache.find({
+      mutationKey: options.mutationKey,
+    });
+    const hydratedState: MutationState<unknown, Error, void, unknown> =
+      state as MutationState<unknown, Error, void, unknown>;
+    const hydratedOptions: MutationOptions = options;
+
+    if (existingMutation) {
+      mutationCache.remove(existingMutation);
+    }
+
+    mutationCache.build(client, hydratedOptions, hydratedState);
+  });
+
+  // Hydrate queries
+  dehydratedState.queries.forEach(
+    ({ queryKey, state, queryHash, observers }) => {
+      let query = queryCache.get(queryHash);
+      const data = state.data;
+      const hydratedState: QueryState = state;
+
+      // Do not hydrate if an existing query exists with newer data
+      if (query) {
+        if (
+          query.state.dataUpdatedAt < state.dataUpdatedAt ||
+          query.state.fetchStatus !== state.fetchStatus
+        ) {
+          query.setState({
+            ...hydratedState,
+            data,
+          });
+          query.setOptions({
+            ...query.options,
+            queryFn: mockQueryFn,
+            retry: 0,
+          });
+        }
+      } else {
+        // Restore query
+        query = queryCache.build(
+          client,
+          {
+            ...client.getDefaultOptions().hydrate?.queries,
+            queryKey,
+            queryHash,
+            queryFn: mockQueryFn,
+          },
+          {
+            ...hydratedState,
+            data,
+          }
+        );
+      }
+
+      query.observers.forEach((observer) => {
+        query.removeObserver(observer);
+      });
+
+      observers.forEach((observerState) => {
+        const hydratedOptions:
+          | InfiniteQueryObserverOptions
+          | QueryObserverOptions = observerState.options;
+
+        if ('initialPageParam' in hydratedOptions) {
+          delete hydratedOptions.initialPageParam;
+        }
+
+        if ('behavior' in hydratedOptions) {
+          delete hydratedOptions.behavior;
+        }
+
+        hydratedOptions.queryFn = mockQueryFn;
+
+        const observer = new QueryObserver(
+          client,
+          hydratedOptions as QueryObserverOptions
+        );
+        query.addObserver(observer);
+      });
+    }
+  );
+};

package/src/shared/messaging.ts

@@ -0,0 +1,19 @@
+import type { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { DevToolsActionType, SerializableQueryClient } from './types';
+
+export type TanStackQueryPluginEventMap = {
+  'online-status-changed': {
+    online: boolean;
+  };
+  'devtools-action': {
+    type: DevToolsActionType;
+    queryHash: string;
+  };
+  'request-initial-data': unknown;
+  'sync-data': {
+    data: SerializableQueryClient;
+  };
+};
+
+export type TanStackQueryPluginClient =
+  RozeniteDevToolsClient<TanStackQueryPluginEventMap>;

package/src/shared/types.ts

@@ -0,0 +1,43 @@
+import type {
+  QueryKey,
+  MutationState,
+  QueryState,
+  QueryObserverOptions,
+  InfiniteQueryObserverOptions,
+  MutationOptions,
+} from '@tanstack/react-query';
+
+export type SerializableQuery = {
+  queryHash: string;
+  state: QueryState;
+  queryKey: QueryKey;
+  observers: SerializableObserver[];
+};
+
+export type SerializableMutation = {
+  mutationId: number;
+  options: MutationOptions;
+  state: MutationState;
+};
+
+export type SerializableObserver = {
+  queryHash: string;
+  options: QueryObserverOptions | InfiniteQueryObserverOptions;
+};
+
+export type SerializableQueryClient = {
+  queries: SerializableQuery[];
+  mutations: SerializableMutation[];
+};
+
+export type DevToolsActionType =
+  | 'REFETCH'
+  | 'INVALIDATE'
+  | 'RESET'
+  | 'REMOVE'
+  | 'TRIGGER_ERROR'
+  | 'RESTORE_ERROR'
+  | 'TRIGGER_LOADING'
+  | 'RESTORE_LOADING'
+  | 'CLEAR_MUTATION_CACHE'
+  | 'CLEAR_QUERY_CACHE';

package/src/shared/useSyncOnlineStatus.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { onlineManager } from '@tanstack/react-query';
+import { TanStackQueryPluginClient } from './messaging';
+
+export const useSyncOnlineStatus = (
+  client: TanStackQueryPluginClient | null
+) => {
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const onlineManagerSubscription = onlineManager.subscribe((online) => {
+      // client.send('online-status-changed', { online });
+    });
+
+    const onlineMessageSubscription = client.onMessage(
+      'online-status-changed',
+      ({ online }) => {
+        console.log('changed from ', onlineManager.isOnline(), 'to', online);
+        // onlineManager.setOnline(online);
+      }
+    );
+
+    return () => {
+      onlineManagerSubscription();
+      onlineMessageSubscription.remove();
+    };
+  }, [client]);
+};

package/src/ui/tanstack-query.tsx

@@ -1,197 +1,34 @@
-import { QueryCacheNotifyEvent, MutationCacheNotifyEvent, QueryClient, QueryClientProvider, Query, Mutation } from '@tanstack/react-query';
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools/production';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { useEffect, useRef } from 'react';
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      queryFn: async () => {
-        // Prevent refetch from throwing an error
-        return Promise.resolve(null);
-      },
-    },
-  },
-});
-
-type DevToolsEventMap = {
-  "DEVTOOLS_TO_DEVICE": unknown;
-  "DEVICE_TO_DEVTOOLS": QueryCacheNotifyEvent | MutationCacheNotifyEvent;
-  "DEVICE_TO_DEVTOOLS_ACK": { requestId: string; success: boolean };
-  "DEVICE_TO_DEVTOOLS_INITIAL_DATA": { queries: Query[]; mutations: Mutation[] };
-  "DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST": unknown;
-}
-
-const Wrapped = () => {
-  const client = useRozeniteDevToolsClient<DevToolsEventMap>({
+import { TanStackQueryPluginEventMap } from '../shared/messaging';
+import { useSyncInitialData } from './useSyncInitialData';
+import { useSyncDevToolsEvents } from './useSyncDevToolsEvents';
+import { useSyncOnlineStatus } from '../shared/useSyncOnlineStatus';
+import { useHandleSyncMessages } from './useHandleSyncMessages';
+
+const App = () => {
+  const client = useRozeniteDevToolsClient<TanStackQueryPluginEventMap>({
     pluginId: '@rozenite/tanstack-query-plugin',
-  })
-
-  // Track pending acknowledgments to prevent feedback loops
-  const pendingAcknowledgment = useRef<Set<string>>(new Set());
-
-  useEffect(() => {
-    if (!client) return;
-    client.send("DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST", null);
-  }, [client]);
-
-  useEffect(() => {
-    if (!client) return;
+  });
 
-    const handleEvent = (event: Event) => {
-      const detail = (event as CustomEvent).detail;
-      
-      // Generate a unique request ID for this DevTools action
-      const requestId = `devtools-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-      
-      // Mark that we're waiting for acknowledgment
-      pendingAcknowledgment.current.add(requestId);
-      
-      // Add the request ID to the event detail
-      const eventWithRequestId = {
-        ...detail,
-        requestId,
-      };
-      
-      client.send("DEVTOOLS_TO_DEVICE", eventWithRequestId);
-    };
+  useSyncInitialData(client);
 
-    window.addEventListener('@tanstack/query-devtools-event', handleEvent);
-    return () => window.removeEventListener('@tanstack/query-devtools-event', handleEvent);
-  }, [client])
+  useSyncDevToolsEvents(client);
 
-  useEffect(() => {
-    if (!client) return;
+  useSyncOnlineStatus(client);
 
-    const ackSubscription = client.onMessage("DEVICE_TO_DEVTOOLS_ACK", (ack) => {
-      // Remove the request from pending acknowledgments
-      pendingAcknowledgment.current.delete(ack.requestId);
-    });
+  useHandleSyncMessages(client);
 
-    const subscription = client.onMessage("DEVICE_TO_DEVTOOLS", (event) => {
-      // Don't reflect events if we're waiting for acknowledgments
-      if (pendingAcknowledgment.current.size > 0) {
-        return;
-      }
-      
-      if ('query' in event) {
-        const { query, type } = event as QueryCacheNotifyEvent;
-        const queryCache = queryClient.getQueryCache();
-        
-        if (type === 'updated') {
-          const existingQuery = queryCache.get(query.queryHash);
-          if (existingQuery) {
-            existingQuery.setState(query.state);
-          } else {
-            queryCache.build(
-              queryClient,
-              {
-                queryKey: query.queryKey,
-                queryHash: query.queryHash,
-              },
-              query.state
-            );
-          }
-        } else if (type === 'added') {
-          const existingQuery = queryCache.get(query.queryHash);
-          if (!existingQuery) {
-            // Only add if it doesn't already exist
-            queryCache.build(
-              queryClient,
-              {
-                queryKey: query.queryKey,
-                queryHash: query.queryHash,
-              },
-              query.state
-            );
-          }
-        } else if (type === 'removed') {
-          const existingQuery = queryCache.get(query.queryHash);
-          if (existingQuery) {
-            queryCache.remove(existingQuery);
-          }
-        }
-      } else if ('mutation' in event) {
-        const { mutation, type } = event as MutationCacheNotifyEvent;
-        const mutationCache = queryClient.getMutationCache();
-        
-        if (type === 'added') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          if (existingMutation) {
-            mutationCache.remove(existingMutation);
-          }
+  return <ReactQueryDevtoolsPanel />;
+};
 
-          mutationCache.build(
-            queryClient,
-            mutation.options,
-            mutation.state
-          );
-        } else if (type === 'removed') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          if (existingMutation) {
-            mutationCache.remove(existingMutation);
-          }
-        } else if (type === 'updated') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          
-          if (existingMutation) {
-            mutationCache.remove(existingMutation);
-            mutationCache.build(
-              queryClient,
-              mutation.options,
-              mutation.state
-            );
-          }
-        }
-      }
-    })
-
-    const initialDataSubscription = client.onMessage("DEVICE_TO_DEVTOOLS_INITIAL_DATA", (event) => {
-      // Clear existing data first
-      queryClient.clear();
-      queryClient.getMutationCache().clear();
-      
-      // Restore queries
-      const queryCache = queryClient.getQueryCache();
-      event.queries.forEach(query => {
-        queryCache.build(
-          queryClient,
-          {
-            queryKey: query.queryKey,
-            queryHash: query.queryHash,
-          },
-          query.state
-        );
-      });
-      
-      // Restore mutations
-      const mutationCache = queryClient.getMutationCache();
-      event.mutations.forEach(mutation => {
-        mutationCache.build(
-          queryClient,
-          mutation.options,
-          mutation.state
-        );
-      });
-    });
-
-    return () => {
-      subscription.remove();
-      ackSubscription.remove();
-      initialDataSubscription.remove();
-    };
-  }, [client, queryClient])
-
-
-  return (
-    <ReactQueryDevtoolsPanel />
-  )
-}
+const queryClient = new QueryClient();
 
 export default function TanStackQueryPanel() {
   return (
     <QueryClientProvider client={queryClient}>
-      <Wrapped />
+      <App />
     </QueryClientProvider>
-  )
-}
+  );
+}