@rozenite/tanstack-query-plugin 1.5.1 → 1.6.0

package/src/react-native/agent/useTanStackQueryAgentTools.ts

@@ -0,0 +1,147 @@
+import { useEffect, useMemo } from 'react';
+import { QueryClient } from '@tanstack/react-query';
+import { useRozenitePluginAgentTool } from '@rozenite/agent-bridge';
+import {
+  clearMutationCacheTool,
+  clearQueryCacheTool,
+  createTanStackQueryAgentController,
+  getCacheSummaryTool,
+  getMutationDetailsTool,
+  getOnlineStatusTool,
+  getQueryDetailsTool,
+  invalidateQueryTool,
+  listMutationsTool,
+  listQueriesTool,
+  refetchQueryTool,
+  removeQueryTool,
+  resetQueryTool,
+  setQueryErrorTool,
+  setQueryLoadingTool,
+  TANSTACK_QUERY_AGENT_PLUGIN_ID,
+  type TanStackQueryAgentMutationIdInput,
+  type TanStackQueryAgentOnlineStatusInput,
+  type TanStackQueryAgentPaginationInput,
+  type TanStackQueryAgentQueryHashInput,
+  type TanStackQueryAgentQueryToggleInput,
+  setOnlineStatusTool,
+} from './tanstack-query-agent';
+
+export const useTanStackQueryAgentTools = (queryClient: QueryClient) => {
+  const controller = useMemo(
+    () => createTanStackQueryAgentController(queryClient),
+    [queryClient]
+  );
+
+  useEffect(() => {
+    const unsubscribeQueryCache = queryClient
+      .getQueryCache()
+      .subscribe((event) => controller.handleQueryCacheEvent(event));
+    const unsubscribeMutationCache = queryClient
+      .getMutationCache()
+      .subscribe((event) => controller.handleMutationCacheEvent(event));
+
+    return () => {
+      unsubscribeQueryCache();
+      unsubscribeMutationCache();
+    };
+  }, [controller, queryClient]);
+
+  useRozenitePluginAgentTool({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: getCacheSummaryTool,
+    handler: () => controller.getCacheSummary(),
+  });
+
+  useRozenitePluginAgentTool({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: getOnlineStatusTool,
+    handler: () => controller.getOnlineStatus(),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentOnlineStatusInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: setOnlineStatusTool,
+    handler: (input: TanStackQueryAgentOnlineStatusInput) =>
+      controller.setOnlineStatus(input),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentPaginationInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: listQueriesTool,
+    handler: (input = {}) => controller.listQueries(input),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentQueryHashInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: getQueryDetailsTool,
+    handler: (input: TanStackQueryAgentQueryHashInput) =>
+      controller.getQueryDetails(input),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentQueryHashInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: refetchQueryTool,
+    handler: (input: TanStackQueryAgentQueryHashInput) =>
+      controller.refetchQuery(input),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentQueryToggleInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: setQueryLoadingTool,
+    handler: (input: TanStackQueryAgentQueryToggleInput) =>
+      controller.setQueryLoading(input),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentQueryToggleInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: setQueryErrorTool,
+    handler: (input: TanStackQueryAgentQueryToggleInput) =>
+      controller.setQueryError(input),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentQueryHashInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: invalidateQueryTool,
+    handler: (input: TanStackQueryAgentQueryHashInput) =>
+      controller.invalidateQuery(input),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentQueryHashInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: resetQueryTool,
+    handler: (input: TanStackQueryAgentQueryHashInput) =>
+      controller.resetQuery(input),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentQueryHashInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: removeQueryTool,
+    handler: (input: TanStackQueryAgentQueryHashInput) =>
+      controller.removeQuery(input),
+  });
+
+  useRozenitePluginAgentTool({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: clearQueryCacheTool,
+    handler: () => controller.clearQueryCache(),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentPaginationInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: listMutationsTool,
+    handler: (input = {}) => controller.listMutations(input),
+  });
+
+  useRozenitePluginAgentTool<TanStackQueryAgentMutationIdInput>({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: getMutationDetailsTool,
+    handler: (input: TanStackQueryAgentMutationIdInput) =>
+      controller.getMutationDetails(input),
+  });
+
+  useRozenitePluginAgentTool({
+    pluginId: TANSTACK_QUERY_AGENT_PLUGIN_ID,
+    tool: clearMutationCacheTool,
+    handler: () => controller.clearMutationCache(),
+  });
+};

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

@@ -0,0 +1,197 @@
+import { QueryClient } from '@tanstack/react-query';
+import { DevToolsActionType } from '../shared/types';
+
+type QueryScopedActionInput = {
+  type: Exclude<
+    DevToolsActionType,
+    'CLEAR_MUTATION_CACHE' | 'CLEAR_QUERY_CACHE'
+  >;
+  queryHash: string;
+};
+
+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 '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,6 +1,7 @@
 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,
@@ -14,110 +15,14 @@ export const useHandleDevToolsMessages = (
     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': {
-            // Code from React Query External Sync:
-            // https://github.com/LovesWorking/react-query-external-sync/blob/main/src/react-query-external-sync/useSyncQueriesExternal.ts#L717
-
-            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': {
-            // Code from React Query External Sync:
-            // https://github.com/LovesWorking/react-query-external-sync/blob/main/src/react-query-external-sync/useSyncQueriesExternal.ts#L742
-
-            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': {
-            // Code from React Query External Sync:
-            // https://github.com/LovesWorking/tanstack-query-dev-tools-expo-plugin/blob/main/src/useSyncQueries.ts#L176
-
-            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}`);
-          }
-        }
+        void applyTanStackQueryDevtoolsAction(queryClient, { type, queryHash })
+          .catch((error) => {
+            const message =
+              error instanceof Error ? error.message : String(error);
+            console.warn(
+              `[Rozenite, tanstack-query-plugin] Failed to apply devtools action "${type}": ${message}`
+            );
+          });
       }
     );
 

package/src/react-native/useTanStackQueryDevTools.ts

@@ -5,6 +5,7 @@ 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>({
@@ -18,4 +19,6 @@ export const useTanStackQueryDevTools = (queryClient: QueryClient) => {
   useSyncTanStackCache(queryClient, client);
 
   useHandleInitialData(queryClient, client);
+
+  useTanStackQueryAgentTools(queryClient);
 };

package/tsconfig.json

@@ -19,6 +19,9 @@
   "include": ["src/**/*", "react-native.ts", "rozenite.config.ts"],
   "exclude": ["node_modules", "dist", "build"],
   "references": [
+    {
+      "path": "../agent-bridge"
+    },
     {
       "path": "../plugin-bridge"
     },