@rozenite/tanstack-query-plugin 2.3.0 → 2.5.0

package/src/react-native/devtools-actions.ts

@@ -1,204 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-import { DevToolsActionType } from '../shared/types';
-
-type QueryScopedActionInput = {
-  type: Exclude<DevToolsActionType, 'CLEAR_MUTATION_CACHE' | 'CLEAR_QUERY_CACHE'>;
-  queryHash: string;
-  metadata?: {
-    data?: unknown;
-  };
-};
-
-type CacheScopedActionInput = {
-  type: 'CLEAR_MUTATION_CACHE' | 'CLEAR_QUERY_CACHE';
-  queryHash?: string;
-};
-
-export type TanStackQueryDevtoolsActionInput = QueryScopedActionInput | CacheScopedActionInput;
-
-const getActiveQuery = (queryClient: QueryClient, queryHash?: string) => {
-  if (!queryHash) {
-    throw new Error('queryHash is required for this TanStack Query action.');
-  }
-
-  const activeQuery = queryClient.getQueryCache().get(queryHash);
-  if (!activeQuery) {
-    throw new Error(`No active query found for hash: ${queryHash}`);
-  }
-
-  return activeQuery;
-};
-
-export const applyTanStackQueryDevtoolsAction = async (
-  queryClient: QueryClient,
-  input: TanStackQueryDevtoolsActionInput,
-) => {
-  switch (input.type) {
-    case 'CLEAR_QUERY_CACHE': {
-      const queryCountBefore = queryClient.getQueryCache().getAll().length;
-      queryClient.getQueryCache().clear();
-      return {
-        applied: true,
-        action: input.type,
-        cleared: true,
-        queryCountBefore,
-        queryCountAfter: queryClient.getQueryCache().getAll().length,
-      };
-    }
-
-    case 'CLEAR_MUTATION_CACHE': {
-      const mutationCountBefore = queryClient.getMutationCache().getAll().length;
-      queryClient.getMutationCache().clear();
-      return {
-        applied: true,
-        action: input.type,
-        cleared: true,
-        mutationCountBefore,
-        mutationCountAfter: queryClient.getMutationCache().getAll().length,
-      };
-    }
-
-    case 'SET_QUERY_DATA': {
-      const activeQuery = getActiveQuery(queryClient, input.queryHash);
-      queryClient.setQueryData(activeQuery.queryKey, input.metadata?.data);
-      return {
-        applied: true,
-        action: input.type,
-        queryHash: activeQuery.queryHash,
-      };
-    }
-
-    case 'TRIGGER_ERROR': {
-      const activeQuery = getActiveQuery(queryClient, input.queryHash);
-      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: previousQueryOptions,
-        },
-      });
-
-      return {
-        applied: true,
-        action: input.type,
-        queryHash: activeQuery.queryHash,
-      };
-    }
-
-    case 'RESTORE_ERROR': {
-      const activeQuery = getActiveQuery(queryClient, input.queryHash);
-      await queryClient.resetQueries(activeQuery);
-      return {
-        applied: true,
-        action: input.type,
-        queryHash: activeQuery.queryHash,
-      };
-    }
-
-    case 'TRIGGER_LOADING': {
-      const activeQuery = getActiveQuery(queryClient, input.queryHash);
-      const previousQueryOptions = activeQuery.options;
-
-      void activeQuery.fetch({
-        ...previousQueryOptions,
-        queryFn: () =>
-          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: previousQueryOptions,
-        },
-      });
-
-      return {
-        applied: true,
-        action: input.type,
-        queryHash: activeQuery.queryHash,
-      };
-    }
-
-    case 'RESTORE_LOADING': {
-      const activeQuery = getActiveQuery(queryClient, input.queryHash);
-      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) {
-        void activeQuery.fetch(previousOptions);
-      }
-
-      return {
-        applied: true,
-        action: input.type,
-        queryHash: activeQuery.queryHash,
-      };
-    }
-
-    case 'RESET': {
-      const activeQuery = getActiveQuery(queryClient, input.queryHash);
-      await queryClient.resetQueries(activeQuery);
-      return {
-        applied: true,
-        action: input.type,
-        queryHash: activeQuery.queryHash,
-      };
-    }
-
-    case 'REMOVE': {
-      const activeQuery = getActiveQuery(queryClient, input.queryHash);
-      queryClient.removeQueries(activeQuery);
-      return {
-        applied: true,
-        action: input.type,
-        queryHash: activeQuery.queryHash,
-      };
-    }
-
-    case 'REFETCH': {
-      const activeQuery = getActiveQuery(queryClient, input.queryHash);
-      await activeQuery.fetch().catch(() => {
-        // Ignore errors from refetch in the agent/UI bridge.
-      });
-      return {
-        applied: true,
-        action: input.type,
-        queryHash: activeQuery.queryHash,
-      };
-    }
-
-    case 'INVALIDATE': {
-      const activeQuery = getActiveQuery(queryClient, input.queryHash);
-      await queryClient.invalidateQueries(activeQuery);
-      return {
-        applied: true,
-        action: input.type,
-        queryHash: activeQuery.queryHash,
-      };
-    }
-  }
-};

package/src/react-native/useHandleDevToolsMessages.ts

@@ -1,32 +0,0 @@
-import { useEffect } from 'react';
-import { QueryClient } from '@tanstack/react-query';
-import { TanStackQueryPluginClient } from '../shared/messaging';
-import { applyTanStackQueryDevtoolsAction } from './devtools-actions';
-
-export const useHandleDevToolsMessages = (
-  queryClient: QueryClient,
-  client: TanStackQueryPluginClient | null,
-) => {
-  useEffect(() => {
-    if (!client) {
-      return;
-    }
-
-    const subscription = client.onMessage('devtools-action', ({ type, queryHash, metadata }) => {
-      void applyTanStackQueryDevtoolsAction(queryClient, {
-        type,
-        queryHash,
-        metadata,
-      }).catch((error) => {
-        const message = error instanceof Error ? error.message : String(error);
-        console.warn(
-          `[Rozenite, tanstack-query-plugin] Failed to apply devtools action "${type}": ${message}`,
-        );
-      });
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, [client]);
-};

package/src/react-native/useHandleInitialData.ts

@@ -1,31 +0,0 @@
-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 });
-    });
-
-    // This hook runs last in `useTanStackQueryDevTools`, so by the time the
-    // panel reacts to this every handler is listening. The panel is recreated on
-    // every app reload and asks for the cache as soon as it boots, which usually
-    // beats the app's React tree to the punch; without this its only request is
-    // dropped and the panel stays empty until the app is restarted.
-    client.send('device-ready', {});
-
-    return () => {
-      subscription.remove();
-    };
-  }, [client, queryClient]);
-};

package/src/react-native/useSyncTanStackCache.ts

@@ -1,231 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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';
-import { useTanStackQueryAgentTools } from './agent/useTanStackQueryAgentTools';
-
-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);
-
-  useTanStackQueryAgentTools(queryClient);
-};