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

package/src/react-native/useHandleDevToolsMessages.ts

@@ -0,0 +1,119 @@
+import { useEffect } from 'react';
+import { QueryClient } from '@tanstack/react-query';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+
+export const useHandleDevToolsMessages = (
+  queryClient: QueryClient,
+  client: TanStackQueryPluginClient | null
+) => {
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const subscription = client.onMessage(
+      'devtools-action',
+      ({ type, queryHash }) => {
+        const activeQuery = queryClient.getQueryCache().get(queryHash);
+
+        if (!activeQuery) {
+          console.warn(`No active query found for hash: ${queryHash}`);
+          return;
+        }
+
+        switch (type) {
+          case 'TRIGGER_ERROR': {
+            const __previousQueryOptions = activeQuery.options;
+            const error = new Error('Unknown error from devtools');
+
+            activeQuery.setState({
+              status: 'error',
+              error,
+              fetchMeta: {
+                ...activeQuery.state.fetchMeta,
+                // @ts-expect-error This does exist
+                __previousQueryOptions,
+              },
+            });
+            break;
+          }
+          case 'RESTORE_ERROR': {
+            queryClient.resetQueries(activeQuery);
+            break;
+          }
+          case 'TRIGGER_LOADING': {
+            if (!activeQuery) return;
+            const __previousQueryOptions = activeQuery.options;
+            // Trigger a fetch in order to trigger suspense as well.
+            activeQuery.fetch({
+              ...__previousQueryOptions,
+              queryFn: () => {
+                return new Promise(() => {
+                  // Never resolve - simulates perpetual loading
+                });
+              },
+              gcTime: -1,
+            });
+            activeQuery.setState({
+              data: undefined,
+              status: 'pending',
+              fetchMeta: {
+                ...activeQuery.state.fetchMeta,
+                // @ts-expect-error This does exist
+                __previousQueryOptions,
+              },
+            });
+            break;
+          }
+          case 'RESTORE_LOADING': {
+            const previousState = activeQuery.state;
+            const previousOptions = activeQuery.state.fetchMeta
+              ? (
+                  activeQuery.state.fetchMeta as unknown as {
+                    __previousQueryOptions: unknown;
+                  }
+                ).__previousQueryOptions
+              : null;
+
+            activeQuery.cancel({ silent: true });
+            activeQuery.setState({
+              ...previousState,
+              fetchStatus: 'idle',
+              fetchMeta: null,
+            });
+
+            if (previousOptions) {
+              activeQuery.fetch(previousOptions);
+            }
+            break;
+          }
+          case 'RESET': {
+            queryClient.resetQueries(activeQuery);
+            break;
+          }
+          case 'REMOVE': {
+            queryClient.removeQueries(activeQuery);
+            break;
+          }
+          case 'REFETCH': {
+            activeQuery.fetch().catch(() => {
+              // Ignore errors
+            });
+            break;
+          }
+          case 'INVALIDATE': {
+            queryClient.invalidateQueries(activeQuery);
+            break;
+          }
+          default: {
+            console.warn(`Unknown devtools action: ${type}`);
+          }
+        }
+      }
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, [client]);
+};

package/src/react-native/useHandleInitialData.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+import { QueryClient } from '@tanstack/react-query';
+import { dehydrateQueryClient } from '../shared/dehydrate';
+
+export const useHandleInitialData = (
+  queryClient: QueryClient,
+  client: TanStackQueryPluginClient | null
+) => {
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const subscription = client.onMessage('request-initial-data', () => {
+      const dehydratedState = dehydrateQueryClient(queryClient);
+      client.send('sync-data', { data: dehydratedState });
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [client, queryClient]);
+};

package/src/react-native/useSyncTanStackCache.ts

@@ -0,0 +1,246 @@
+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 {
+  dehydrateQuery,
+  dehydrateMutation,
+  dehydrateObservers,
+} from '../shared/dehydrate';
+import { SerializableObserver, PartialQueryState } from '../shared/types';
+
+export const useSyncTanStackCache = (
+  queryClient: QueryClient,
+  client: TanStackQueryPluginClient | null
+) => {
+  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 mutationCacheSubscription = queryClient
+      .getMutationCache()
+      .subscribe(handler);
+    const queryCacheSubscription = queryClient
+      .getQueryCache()
+      .subscribe(handler);
+
+    return () => {
+      mutationCacheSubscription();
+      queryCacheSubscription();
+    };
+  }, [client, queryClient, handler]);
+};

package/src/react-native/useTanstackQueryDevTools.ts

@@ -0,0 +1,21 @@
+import { QueryClient } from '@tanstack/react-query';
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+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 = (queryClient: QueryClient) => {
+  const client = useRozeniteDevToolsClient<TanStackQueryPluginEventMap>({
+    pluginId: '@rozenite/tanstack-query-plugin',
+  });
+
+  useSyncOnlineStatus(client);
+
+  useHandleDevToolsMessages(queryClient, client);
+
+  useSyncTanStackCache(queryClient, client);
+
+  useHandleInitialData(queryClient, client);
+};

package/src/shared/dehydrate.ts

@@ -0,0 +1,42 @@
+import type { Query, Mutation, QueryClient } from '@tanstack/react-query';
+import type {
+  SerializableQuery,
+  SerializableMutation,
+  SerializableObserver,
+  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[] = dehydrateObservers(query);
+
+  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,250 @@
+import {
+  InfiniteQueryObserverOptions,
+  MutationOptions,
+  MutationState,
+  QueryClient,
+  QueryObserver,
+  QueryObserverOptions,
+  QueryState,
+} from '@tanstack/react-query';
+import type {
+  SerializableQuery,
+  SerializableMutation,
+  SerializableQueryClient,
+  SerializableObserver,
+  PartialQueryState,
+} from './types';
+
+const mockQueryFn = () => {
+  return Promise.resolve(null);
+};
+
+const hydrateObservers = (
+  client: QueryClient,
+  queryHash: string,
+  dehydratedObservers: SerializableObserver[]
+) => {
+  const query = client.getQueryCache().get(queryHash);
+
+  if (!query) {
+    return;
+  }
+
+  query.observers.forEach((observer) => {
+    query.removeObserver(observer);
+  });
+
+  dehydratedObservers.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);
+  });
+};
+
+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((query) => hydrateQuery(client, query));
+};
+
+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 {
+        // 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;
+    }
+  }
+};
+
+// 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 (!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;
+  }
+
+  // Apply the partial state changes
+  if (data.state) {
+    query.setState(data.state);
+  }
+};
+
+export const applyMutationEvent = (
+  queryClient: QueryClient,
+  type:
+    | 'added'
+    | 'updated'
+    | 'removed'
+    | 'observerAdded'
+    | 'observerRemoved'
+    | 'observerResultsUpdated'
+    | 'observerOptionsUpdated',
+  data: SerializableMutation
+): void => {
+  const mutationCache = queryClient.getMutationCache();
+
+  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);
+};