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

package/package.json

@@ -1,27 +1,32 @@
 {
   "name": "@rozenite/tanstack-query-plugin",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.10",
   "description": "TanStack Query for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
   "module": "./dist/react-native.js",
   "types": "./dist/react-native.d.ts",
   "dependencies": {
-    "@rozenite/plugin-bridge": "1.0.0-alpha.0"
+    "fast-deep-equal": "^3.1.3",
+    "@rozenite/plugin-bridge": "1.0.0-alpha.10"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-query-devtools": "^5.0.0",
+    "@types/react": "~18.3.12",
+    "react": "18.3.1",
+    "react-dom": "18.3.0",
+    "react-native": "0.76.0",
+    "react-native-web": "0.21.0",
     "typescript": "^5.7.3",
     "vite": "^6.0.0",
-    "react": "*",
-    "react-native": "*",
-    "rozenite": "1.0.0-alpha.0",
-    "@rozenite/vite-plugin": "1.0.0-alpha.1"
+    "rozenite": "1.0.0-alpha.10",
+    "@rozenite/vite-plugin": "1.0.0-alpha.10"
   },
   "peerDependencies": {
-    "react": ">= 17.0.0",
-    "react-native": ">= 0.74.0",
-    "@tanstack/react-query": "^5.0.0"
+    "@tanstack/react-query": "^5.0.0",
+    "react": "*",
+    "react-native": "*"
   },
   "license": "MIT",
   "scripts": {

package/project.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "name": "@rozenite/tanstack-query-plugin",
+  "targets": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["{projectRoot}/src/**/*"],
+      "outputs": ["{projectRoot}/dist"]
+    }
+  }
+}

package/react-native.ts

@@ -1,8 +1,8 @@
-
 export let useTanStackQueryDevTools: typeof import('./src/react-native/useTanStackQueryDevTools').useTanStackQueryDevTools;
 
 if (process.env.NODE_ENV !== 'production') {
-  useTanStackQueryDevTools = require('./src/react-native/useTanStackQueryDevTools').useTanStackQueryDevTools;
+  useTanStackQueryDevTools =
+    require('./src/react-native/useTanStackQueryDevTools').useTanStackQueryDevTools;
 } else {
   useTanStackQueryDevTools = () => ({ isConnected: false });
 }

package/src/react-native/useHandleDevToolsMessages.ts

@@ -1,12 +1,11 @@
 import { useEffect } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
 import { TanStackQueryPluginClient } from '../shared/messaging';
 
 export const useHandleDevToolsMessages = (
+  queryClient: QueryClient,
   client: TanStackQueryPluginClient | null
 ) => {
-  const queryClient = useQueryClient();
-
   useEffect(() => {
     if (!client) {
       return;

package/src/react-native/useHandleInitialData.ts

@@ -1,13 +1,12 @@
 import { useEffect } from 'react';
 import { TanStackQueryPluginClient } from '../shared/messaging';
-import { useQueryClient } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
 import { dehydrateQueryClient } from '../shared/dehydrate';
 
 export const useHandleInitialData = (
+  queryClient: QueryClient,
   client: TanStackQueryPluginClient | null
 ) => {
-  const queryClient = useQueryClient();
-
   useEffect(() => {
     if (!client) {
       return;

package/src/react-native/useSyncTanStackCache.ts

@@ -1,23 +1,236 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { useEffect } from 'react';
+import {
+  QueryClient,
+  QueryCacheNotifyEvent,
+  MutationCacheNotifyEvent,
+} from '@tanstack/react-query';
+import { useEffect, useMemo, useRef } from 'react';
+import equal from 'fast-deep-equal';
 import { TanStackQueryPluginClient } from '../shared/messaging';
-import { dehydrateQueryClient } from '../shared/dehydrate';
+import {
+  dehydrateQuery,
+  dehydrateMutation,
+  dehydrateObservers,
+} from '../shared/dehydrate';
+import { SerializableObserver, PartialQueryState } from '../shared/types';
 
 export const useSyncTanStackCache = (
+  queryClient: QueryClient,
   client: TanStackQueryPluginClient | null
 ) => {
-  const queryClient = useQueryClient();
+  const previousObserversRef = useRef<Map<string, SerializableObserver[]>>(
+    new Map()
+  );
+
+  const handler = useMemo(() => {
+    return (event: QueryCacheNotifyEvent | MutationCacheNotifyEvent): void => {
+      if (!client) {
+        return;
+      }
+
+      if (event.type === 'observerResultsUpdated') {
+        // We don't need to sync this type of events.
+        return;
+      }
+
+      if ('query' in event) {
+        const { query, type } = event;
+
+        if (type === 'added' || type === 'removed') {
+          if (type === 'removed') {
+            // We don't need to store observers for removed queries.
+            previousObserversRef.current.delete(query.queryHash);
+          }
+
+          const dehydratedQuery = dehydrateQuery(query);
+          client.send('sync-query-event', { type, data: dehydratedQuery });
+          return;
+        }
+
+        if (type === 'updated' && 'action' in event) {
+          const action = event.action;
+
+          switch (action.type) {
+            case 'fetch': {
+              // Only need loading state and fetch metadata
+              const fetchData: PartialQueryState = {
+                queryHash: query.queryHash,
+                state: {
+                  status: query.state.status,
+                  fetchStatus: query.state.fetchStatus,
+                  fetchMeta: query.state.fetchMeta,
+                  dataUpdatedAt: query.state.dataUpdatedAt,
+                  errorUpdatedAt: query.state.errorUpdatedAt,
+                },
+              };
+              client.send('sync-query-event', {
+                type: 'updated',
+                action: 'fetch',
+                data: fetchData,
+              });
+              break;
+            }
+
+            case 'success': {
+              // Only need new data and success state
+              const successData: PartialQueryState = {
+                queryHash: query.queryHash,
+                state: {
+                  status: query.state.status,
+                  data: query.state.data,
+                  dataUpdatedAt: query.state.dataUpdatedAt,
+                  error: query.state.error,
+                  errorUpdatedAt: query.state.errorUpdatedAt,
+                  fetchStatus: query.state.fetchStatus,
+                },
+              };
+              client.send('sync-query-event', {
+                type: 'updated',
+                action: 'success',
+                data: successData,
+              });
+              break;
+            }
+
+            case 'error': {
+              // Only need error information
+              const errorData: PartialQueryState = {
+                queryHash: query.queryHash,
+                state: {
+                  status: query.state.status,
+                  error: query.state.error,
+                  errorUpdatedAt: query.state.errorUpdatedAt,
+                  fetchStatus: query.state.fetchStatus,
+                },
+              };
+              client.send('sync-query-event', {
+                type: 'updated',
+                action: 'error',
+                data: errorData,
+              });
+              break;
+            }
+
+            case 'setState': {
+              // Only need the specific state changes
+              const setStateData: PartialQueryState = {
+                queryHash: query.queryHash,
+                state: action.state, // Only the changed state parts
+              };
+              client.send('sync-query-event', {
+                type: 'updated',
+                action: 'setState',
+                data: setStateData,
+              });
+              break;
+            }
+
+            case 'invalidate': {
+              // Only need invalidation flag
+              const invalidateData: PartialQueryState = {
+                queryHash: query.queryHash,
+                state: {
+                  isInvalidated: query.state.isInvalidated,
+                },
+              };
+              client.send('sync-query-event', {
+                type: 'updated',
+                action: 'invalidate',
+                data: invalidateData,
+              });
+              break;
+            }
+
+            case 'pause': {
+              // Need to sync the paused fetch status
+              const pauseData: PartialQueryState = {
+                queryHash: query.queryHash,
+                state: {
+                  fetchStatus: query.state.fetchStatus,
+                },
+              };
+              client.send('sync-query-event', {
+                type: 'updated',
+                action: 'pause',
+                data: pauseData,
+              });
+              break;
+            }
+
+            case 'continue': {
+              // Need to sync the resumed fetch status
+              const continueData: PartialQueryState = {
+                queryHash: query.queryHash,
+                state: {
+                  fetchStatus: query.state.fetchStatus,
+                },
+              };
+              client.send('sync-query-event', {
+                type: 'updated',
+                action: 'continue',
+                data: continueData,
+              });
+              break;
+            }
+
+            default: {
+              // Fallback to full data for unknown actions
+              const dehydratedQuery = dehydrateQuery(query);
+              client.send('sync-query-event', { type, data: dehydratedQuery });
+            }
+          }
+          return;
+        }
+
+        if (
+          type === 'observerAdded' ||
+          type === 'observerRemoved' ||
+          type === 'observerOptionsUpdated'
+        ) {
+          const dehydratedObservers = dehydrateObservers(query);
+          const previousObservers = previousObserversRef.current.get(
+            query.queryHash
+          );
+
+          // For observerOptionsUpdated, only send if the observers actually changed
+          if (type === 'observerOptionsUpdated' && previousObservers) {
+            if (equal(previousObservers, dehydratedObservers)) {
+              // No meaningful change, skip sending
+              return;
+            }
+          }
+
+          previousObserversRef.current.set(
+            query.queryHash,
+            dehydratedObservers
+          );
+
+          client.send('sync-query-event', {
+            type,
+            data: {
+              queryHash: query.queryHash,
+              observers: dehydratedObservers,
+            },
+          });
+          return;
+        }
+      }
+
+      const { mutation, type } = event;
+      if (mutation) {
+        const dehydratedMutation = dehydrateMutation(mutation);
+        client.send('sync-mutation-event', {
+          type,
+          data: dehydratedMutation,
+        });
+      }
+    };
+  }, [client]);
 
   useEffect(() => {
     if (!client) {
       return;
     }
 
-    const handler = (): void => {
-      const dehydratedState = dehydrateQueryClient(queryClient);
-      client.send('sync-data', { data: dehydratedState });
-    };
-
     const mutationCacheSubscription = queryClient
       .getMutationCache()
       .subscribe(handler);
@@ -29,5 +242,5 @@ export const useSyncTanStackCache = (
       mutationCacheSubscription();
       queryCacheSubscription();
     };
-  }, [client, queryClient]);
+  }, [client, queryClient, handler]);
 };

package/src/react-native/{useTanStackQueryDevTools.ts → useTanstackQueryDevTools.ts}

@@ -1,3 +1,4 @@
+import { QueryClient } from '@tanstack/react-query';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { TanStackQueryPluginEventMap } from '../shared/messaging';
 import { useSyncOnlineStatus } from '../shared/useSyncOnlineStatus';
@@ -5,16 +6,16 @@ import { useHandleDevToolsMessages } from './useHandleDevToolsMessages';
 import { useSyncTanStackCache } from './useSyncTanStackCache';
 import { useHandleInitialData } from './useHandleInitialData';
 
-export const useTanStackQueryDevTools = () => {
+export const useTanStackQueryDevTools = (queryClient: QueryClient) => {
   const client = useRozeniteDevToolsClient<TanStackQueryPluginEventMap>({
     pluginId: '@rozenite/tanstack-query-plugin',
   });
 
   useSyncOnlineStatus(client);
 
-  useHandleDevToolsMessages(client);
+  useHandleDevToolsMessages(queryClient, client);
 
-  useSyncTanStackCache(client);
+  useSyncTanStackCache(queryClient, client);
 
-  useHandleInitialData(client);
+  useHandleInitialData(queryClient, client);
 };

package/src/shared/dehydrate.ts

@@ -6,13 +6,15 @@ import type {
   SerializableQueryClient,
 } from './types';
 
+export const dehydrateObservers = (query: Query): SerializableObserver[] => {
+  return query.observers.map((observer) => ({
+    queryHash: query.queryHash,
+    options: observer.options,
+  }));
+};
+
 export const dehydrateQuery = (query: Query): SerializableQuery => {
-  const dehydratedObservers: SerializableObserver[] = query.observers.map(
-    (observer) => ({
-      queryHash: query.queryHash,
-      options: observer.options,
-    })
-  );
+  const dehydratedObservers: SerializableObserver[] = dehydrateObservers(query);
 
   return {
     state: query.state,