@rozenite/tanstack-query-plugin 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/shared/hydrate.ts

@@ -7,100 +7,244 @@ import {
   QueryObserverOptions,
   QueryState,
 } from '@tanstack/react-query';
-import { SerializableQueryClient } from './types';
+import type {
+  SerializableQuery,
+  SerializableMutation,
+  SerializableQueryClient,
+  SerializableObserver,
+  PartialQueryState,
+} from './types';
 
 const mockQueryFn = () => {
   return Promise.resolve(null);
 };
 
-export const hydrateQueryClient = (
+const hydrateObservers = (
   client: QueryClient,
-  dehydratedState: SerializableQueryClient
-): void => {
-  const queryCache = client.getQueryCache();
-  const mutationCache = client.getMutationCache();
+  queryHash: string,
+  dehydratedObservers: SerializableObserver[]
+) => {
+  const query = client.getQueryCache().get(queryHash);
+
+  if (!query) {
+    return;
+  }
+
+  query.observers.forEach((observer) => {
+    query.removeObserver(observer);
+  });
 
-  // 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);
+  dehydratedObservers.forEach((observerState) => {
+    const hydratedOptions: InfiniteQueryObserverOptions | QueryObserverOptions =
+      observerState.options;
+
+    if ('initialPageParam' in hydratedOptions) {
+      delete hydratedOptions.initialPageParam;
+    }
+
+    if ('behavior' in hydratedOptions) {
+      delete hydratedOptions.behavior;
     }
 
-    mutationCache.build(client, hydratedOptions, hydratedState);
+    hydratedOptions.queryFn = mockQueryFn;
+
+    const observer = new QueryObserver(
+      client,
+      hydratedOptions as QueryObserverOptions
+    );
+    query.addObserver(observer);
+  });
+};
+
+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 hydratedOptions: MutationOptions = options;
+
+  if (existingMutation) {
+    mutationCache.remove(existingMutation);
+  }
+
+  mutationCache.build(client, hydratedOptions, hydratedState);
+};
+
+const hydrateQuery = (
+  client: QueryClient,
+  dehydratedQuery: SerializableQuery
+) => {
+  const queryCache = client.getQueryCache();
+  const { queryKey, state, queryHash, observers } = dehydratedQuery;
+
+  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,
+      }
+    );
+  }
+
+  hydrateObservers(client, queryHash, observers);
+};
+
+export const hydrateQueryClient = (
+  client: QueryClient,
+  dehydratedState: SerializableQueryClient
+): void => {
+  // Hydrate mutations
+  dehydratedState.mutations.forEach((mutation) =>
+    hydrateMutation(client, mutation)
+  );
 
   // Hydrate queries
-  dehydratedState.queries.forEach(
-    ({ queryKey, state, queryHash, observers }) => {
-      let query = queryCache.get(queryHash);
-      const data = state.data;
-      const hydratedState: QueryState = state;
+  dehydratedState.queries.forEach((query) => hydrateQuery(client, query));
+};
 
-      // 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,
-          });
-        }
+export const applyQueryEvent = (
+  queryClient: QueryClient,
+  type:
+    | 'added'
+    | 'updated'
+    | 'removed'
+    | 'observerAdded'
+    | 'observerRemoved'
+    | 'observerResultsUpdated'
+    | 'observerOptionsUpdated',
+  data: SerializableQuery | PartialQueryState,
+  action?: string
+): void => {
+  const queryCache = queryClient.getQueryCache();
+
+  switch (type) {
+    case 'added': {
+      hydrateQuery(queryClient, data as SerializableQuery);
+      break;
+    }
+    case 'updated': {
+      if (action && 'state' in data && !('queryKey' in data)) {
+        // Handle action-based partial state update
+        applyPartialQueryState(queryClient, data as PartialQueryState);
       } else {
-        // Restore query
-        query = queryCache.build(
-          client,
-          {
-            ...client.getDefaultOptions().hydrate?.queries,
-            queryKey,
-            queryHash,
-            queryFn: mockQueryFn,
-          },
-          {
-            ...hydratedState,
-            data,
-          }
-        );
+        // Handle full query update (backward compatibility)
+        hydrateQuery(queryClient, data as SerializableQuery);
       }
+      break;
+    }
+    case 'observerAdded':
+    case 'observerRemoved':
+    case 'observerOptionsUpdated': {
+      hydrateObservers(queryClient, data.queryHash, (data as any).observers);
+      break;
+    }
+    case 'removed': {
+      const query = queryCache.get(data.queryHash);
+      if (query) {
+        queryCache.remove(query);
+      }
+      break;
+    }
+  }
+};
 
-      query.observers.forEach((observer) => {
-        query.removeObserver(observer);
-      });
-
-      observers.forEach((observerState) => {
-        const hydratedOptions:
-          | InfiniteQueryObserverOptions
-          | QueryObserverOptions = observerState.options;
+// New function to handle action-based partial state updates
+export const applyPartialQueryState = (
+  queryClient: QueryClient,
+  data: PartialQueryState
+): void => {
+  const queryCache = queryClient.getQueryCache();
+  const query = queryCache.get(data.queryHash);
 
-        if ('initialPageParam' in hydratedOptions) {
-          delete hydratedOptions.initialPageParam;
-        }
+  if (!query) {
+    // Query doesn't exist, we need to create it with minimal data
+    // This is a fallback for when we receive a partial update for a non-existent query
+    return;
+  }
 
-        if ('behavior' in hydratedOptions) {
-          delete hydratedOptions.behavior;
-        }
+  // Apply the partial state changes
+  if (data.state) {
+    query.setState(data.state);
+  }
+};
 
-        hydratedOptions.queryFn = mockQueryFn;
+export const applyMutationEvent = (
+  queryClient: QueryClient,
+  type:
+    | 'added'
+    | 'updated'
+    | 'removed'
+    | 'observerAdded'
+    | 'observerRemoved'
+    | 'observerResultsUpdated'
+    | 'observerOptionsUpdated',
+  data: SerializableMutation
+): void => {
+  const mutationCache = queryClient.getMutationCache();
 
-        const observer = new QueryObserver(
-          client,
-          hydratedOptions as QueryObserverOptions
-        );
-        query.addObserver(observer);
+  switch (type) {
+    case 'added':
+    case 'updated':
+    case 'observerAdded':
+    case 'observerRemoved':
+    case 'observerResultsUpdated':
+    case 'observerOptionsUpdated': {
+      hydrateMutation(queryClient, data);
+      break;
+    }
+    case 'removed': {
+      const mutation = mutationCache.find({
+        mutationKey: data.options.mutationKey,
       });
+      if (mutation) {
+        mutationCache.remove(mutation);
+      }
+      break;
     }
-  );
+  }
+};
+
+export const applyQueryObserverEvent = (
+  queryClient: QueryClient,
+  data: {
+    queryHash: string;
+    observers: SerializableObserver[];
+  }
+): void => {
+  hydrateObservers(queryClient, data.queryHash, data.observers);
 };

package/src/shared/messaging.ts

@@ -1,5 +1,12 @@
 import type { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { DevToolsActionType, SerializableQueryClient } from './types';
+import {
+  DevToolsActionType,
+  SerializableQueryClient,
+  SerializableQuery,
+  SerializableMutation,
+  SerializableObserver,
+  PartialQueryState,
+} from './types';
 
 export type TanStackQueryPluginEventMap = {
   'online-status-changed': {
@@ -13,6 +20,34 @@ export type TanStackQueryPluginEventMap = {
   'sync-data': {
     data: SerializableQueryClient;
   };
+  'sync-query-event':
+    | {
+        type: 'added' | 'removed';
+        data: SerializableQuery;
+      }
+    | {
+        type: 'updated';
+        action?: string; // Add action type for optimization
+        data: SerializableQuery | PartialQueryState; // Support both full and partial state
+      }
+    | {
+        type: 'observerAdded' | 'observerRemoved' | 'observerOptionsUpdated';
+        data: {
+          queryHash: string;
+          observers: SerializableObserver[];
+        };
+      };
+  'sync-mutation-event': {
+    type:
+      | 'added'
+      | 'updated'
+      | 'removed'
+      | 'observerAdded'
+      | 'observerRemoved'
+      | 'observerResultsUpdated'
+      | 'observerOptionsUpdated';
+    data: SerializableMutation;
+  };
 };
 
 export type TanStackQueryPluginClient =

package/src/shared/types.ts

@@ -14,6 +14,11 @@ export type SerializableQuery = {
   observers: SerializableObserver[];
 };
 
+export type PartialQueryState = {
+  queryHash: string;
+  state: Partial<QueryState>;
+};
+
 export type SerializableMutation = {
   mutationId: number;
   options: MutationOptions;

package/src/shared/useSyncOnlineStatus.ts

@@ -11,14 +11,13 @@ export const useSyncOnlineStatus = (
     }
 
     const onlineManagerSubscription = onlineManager.subscribe((online) => {
-      // client.send('online-status-changed', { 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);
+        onlineManager.setOnline(online);
       }
     );
 

package/src/ui/tanstack-query.tsx

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools/production';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { TanStackQueryPluginEventMap } from '../shared/messaging';
 import { useSyncInitialData } from './useSyncInitialData';
@@ -20,7 +20,7 @@ const App = () => {
 
   useHandleSyncMessages(client);
 
-  return <ReactQueryDevtoolsPanel />;
+  return <ReactQueryDevtoolsPanel style={{ height: '100%', width: '100%' }} />;
 };
 
 const queryClient = new QueryClient();

package/src/ui/useHandleSyncMessages.ts

@@ -1,7 +1,12 @@
 import { useEffect } from 'react';
 import { TanStackQueryPluginClient } from '../shared/messaging';
 import { useQueryClient } from '@tanstack/react-query';
-import { hydrateQueryClient } from '../shared/hydrate';
+import {
+  hydrateQueryClient,
+  applyQueryEvent,
+  applyMutationEvent,
+  applyQueryObserverEvent,
+} from '../shared/hydrate';
 
 export const useHandleSyncMessages = (
   client: TanStackQueryPluginClient | null
@@ -13,12 +18,49 @@ export const useHandleSyncMessages = (
       return;
     }
 
-    const subscription = client.onMessage('sync-data', ({ data }) => {
+    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);
+      }
+    );
+
+    // Keep the full sync for initial data requests
+    const fullSyncSubscription = client.onMessage('sync-data', ({ data }) => {
       hydrateQueryClient(queryClient, data);
     });
 
     return () => {
-      subscription.remove();
+      querySubscription.remove();
+      mutationSubscription.remove();
+      fullSyncSubscription.remove();
     };
   }, [client, queryClient]);
 };

package/tsconfig.json

@@ -16,10 +16,17 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src/**/*",
-    "react-native.ts",
-    "rozenite.config.ts"
-  ],
-  "exclude": ["node_modules", "dist", "build"]
+  "include": ["src/**/*", "react-native.ts", "rozenite.config.ts"],
+  "exclude": ["node_modules", "dist", "build"],
+  "references": [
+    {
+      "path": "../plugin-bridge"
+    },
+    {
+      "path": "../cli"
+    },
+    {
+      "path": "../vite-plugin"
+    }
+  ]
 }

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/react-native/usehandledevtoolsmessages.ts","./src/react-native/usehandleinitialdata.ts","./src/react-native/usesynctanstackcache.ts","./src/react-native/usetanstackquerydevtools.ts","./src/shared/dehydrate.ts","./src/shared/hydrate.ts","./src/shared/messaging.ts","./src/shared/types.ts","./src/shared/usesynconlinestatus.ts","./src/ui/tanstack-query.tsx","./src/ui/usehandlesyncmessages.ts","./src/ui/usesyncdevtoolsevents.ts","./src/ui/usesyncinitialdata.ts","./react-native.ts","./rozenite.config.ts"],"errors":true,"version":"5.8.3"}