@rozenite/tanstack-query-plugin 2.1.0 → 2.3.0

package/dist/react-native/cjs/src/react-native/useHandleDevToolsMessages.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHandleDevToolsMessages = void 0;
+const react_1 = require("react");
+const devtools_actions_1 = require("./devtools-actions");
+const useHandleDevToolsMessages = (queryClient, client) => {
+    (0, react_1.useEffect)(() => {
+        if (!client) {
+            return;
+        }
+        const subscription = client.onMessage('devtools-action', ({ type, queryHash, metadata }) => {
+            void (0, devtools_actions_1.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]);
+};
+exports.useHandleDevToolsMessages = useHandleDevToolsMessages;

package/dist/react-native/cjs/src/react-native/useHandleInitialData.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHandleInitialData = void 0;
+const react_1 = require("react");
+const dehydrate_1 = require("../shared/dehydrate");
+const useHandleInitialData = (queryClient, client) => {
+    (0, react_1.useEffect)(() => {
+        if (!client) {
+            return;
+        }
+        const subscription = client.onMessage('request-initial-data', () => {
+            const dehydratedState = (0, dehydrate_1.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]);
+};
+exports.useHandleInitialData = useHandleInitialData;

package/dist/react-native/cjs/src/react-native/useSyncTanStackCache.js

@@ -0,0 +1,203 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncTanStackCache = void 0;
+const react_1 = require("react");
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
+const dehydrate_1 = require("../shared/dehydrate");
+const useSyncTanStackCache = (queryClient, client) => {
+    const previousObserversRef = (0, react_1.useRef)(new Map());
+    const handler = (0, react_1.useMemo)(() => {
+        return (event) => {
+            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 = (0, dehydrate_1.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 = {
+                                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 = {
+                                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 = {
+                                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 = {
+                                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 = {
+                                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 = {
+                                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 = {
+                                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 = (0, dehydrate_1.dehydrateQuery)(query);
+                            client.send('sync-query-event', { type, data: dehydratedQuery });
+                        }
+                    }
+                    return;
+                }
+                if (type === 'observerAdded' ||
+                    type === 'observerRemoved' ||
+                    type === 'observerOptionsUpdated') {
+                    const dehydratedObservers = (0, dehydrate_1.dehydrateObservers)(query);
+                    const previousObservers = previousObserversRef.current.get(query.queryHash);
+                    // For observerOptionsUpdated, only send if the observers actually changed
+                    if (type === 'observerOptionsUpdated' && previousObservers) {
+                        if ((0, fast_deep_equal_1.default)(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 = (0, dehydrate_1.dehydrateMutation)(mutation);
+                client.send('sync-mutation-event', {
+                    type,
+                    data: dehydratedMutation,
+                });
+            }
+        };
+    }, [client]);
+    (0, react_1.useEffect)(() => {
+        if (!client) {
+            return;
+        }
+        const mutationCacheSubscription = queryClient.getMutationCache().subscribe(handler);
+        const queryCacheSubscription = queryClient.getQueryCache().subscribe(handler);
+        return () => {
+            mutationCacheSubscription();
+            queryCacheSubscription();
+        };
+    }, [client, queryClient, handler]);
+};
+exports.useSyncTanStackCache = useSyncTanStackCache;

package/dist/react-native/cjs/src/react-native/useTanStackQueryDevTools.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTanStackQueryDevTools = void 0;
+const plugin_bridge_1 = require("@rozenite/plugin-bridge");
+const useSyncOnlineStatus_1 = require("../shared/useSyncOnlineStatus");
+const useHandleDevToolsMessages_1 = require("./useHandleDevToolsMessages");
+const useSyncTanStackCache_1 = require("./useSyncTanStackCache");
+const useHandleInitialData_1 = require("./useHandleInitialData");
+const useTanStackQueryAgentTools_1 = require("./agent/useTanStackQueryAgentTools");
+const useTanStackQueryDevTools = (queryClient) => {
+    const client = (0, plugin_bridge_1.useRozeniteDevToolsClient)({
+        pluginId: '@rozenite/tanstack-query-plugin',
+    });
+    (0, useSyncOnlineStatus_1.useSyncOnlineStatus)(client);
+    (0, useHandleDevToolsMessages_1.useHandleDevToolsMessages)(queryClient, client);
+    (0, useSyncTanStackCache_1.useSyncTanStackCache)(queryClient, client);
+    (0, useHandleInitialData_1.useHandleInitialData)(queryClient, client);
+    (0, useTanStackQueryAgentTools_1.useTanStackQueryAgentTools)(queryClient);
+};
+exports.useTanStackQueryDevTools = useTanStackQueryDevTools;

package/dist/react-native/cjs/src/shared/agent-tools.js

@@ -0,0 +1,197 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tanstackQueryToolDefinitions = exports.TANSTACK_QUERY_AGENT_PLUGIN_ID = void 0;
+const agent_shared_1 = require("@rozenite/agent-shared");
+exports.TANSTACK_QUERY_AGENT_PLUGIN_ID = '@rozenite/tanstack-query-plugin';
+const queryActionProperties = {
+    queryHash: {
+        type: 'string',
+        description: 'TanStack Query queryHash identifying the query.',
+    },
+};
+const mutationActionProperties = {
+    mutationId: {
+        type: 'number',
+        description: 'TanStack Query mutationId identifying the mutation.',
+    },
+};
+const paginationProperties = {
+    limit: {
+        type: 'number',
+        description: 'Maximum number of items to return. Defaults to 20. Maximum 100.',
+    },
+    cursor: {
+        type: 'string',
+        description: 'Opaque pagination cursor from a previous list call.',
+    },
+};
+const emptyInputSchema = {
+    type: 'object',
+    properties: {},
+};
+exports.tanstackQueryToolDefinitions = {
+    getCacheSummary: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'get-cache-summary',
+        description: 'Return aggregate TanStack Query cache health and count information.',
+        inputSchema: emptyInputSchema,
+    }),
+    getOnlineStatus: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'get-online-status',
+        description: 'Return the current TanStack Query onlineManager status.',
+        inputSchema: emptyInputSchema,
+    }),
+    setOnlineStatus: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'set-online-status',
+        description: 'Set the TanStack Query onlineManager status for testing offline/online behavior.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                online: {
+                    type: 'boolean',
+                    description: 'Whether the TanStack Query onlineManager should be online.',
+                },
+            },
+            required: ['online'],
+        },
+    }),
+    listQueries: (0, agent_shared_1.definePaginatedAgentToolContract)({
+        name: 'list-queries',
+        description: 'List TanStack Query query summaries using cursor pagination.',
+        inputSchema: {
+            type: 'object',
+            properties: paginationProperties,
+        },
+        pagination: {
+            kind: 'cursor',
+            fields: [
+                'queryHash',
+                'queryKey',
+                'status',
+                'fetchStatus',
+                'observersCount',
+                'isInvalidated',
+                'dataUpdatedAt',
+                'errorUpdatedAt',
+                'hasData',
+                'hasError',
+            ],
+            defaultFields: ['queryHash', 'queryKey', 'status', 'fetchStatus', 'hasError'],
+        },
+    }),
+    getQueryDetails: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'get-query-details',
+        description: 'Return a JSON-safe TanStack Query query snapshot and observer summary.',
+        inputSchema: {
+            type: 'object',
+            properties: queryActionProperties,
+            required: ['queryHash'],
+        },
+    }),
+    refetchQuery: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'refetch-query',
+        description: 'Refetch a TanStack Query query by queryHash.',
+        inputSchema: {
+            type: 'object',
+            properties: queryActionProperties,
+            required: ['queryHash'],
+        },
+    }),
+    setQueryLoading: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'set-query-loading',
+        description: 'Enable or disable TanStack Query loading-state simulation for a query by queryHash.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                ...queryActionProperties,
+                enabled: {
+                    type: 'boolean',
+                    description: 'Whether the loading-state simulation should be enabled.',
+                },
+            },
+            required: ['queryHash', 'enabled'],
+        },
+    }),
+    setQueryError: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'set-query-error',
+        description: 'Enable or disable TanStack Query error-state simulation for a query by queryHash.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                ...queryActionProperties,
+                enabled: {
+                    type: 'boolean',
+                    description: 'Whether the error-state simulation should be enabled.',
+                },
+            },
+            required: ['queryHash', 'enabled'],
+        },
+    }),
+    invalidateQuery: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'invalidate-query',
+        description: 'Invalidate a TanStack Query query by queryHash.',
+        inputSchema: {
+            type: 'object',
+            properties: queryActionProperties,
+            required: ['queryHash'],
+        },
+    }),
+    resetQuery: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'reset-query',
+        description: 'Reset a TanStack Query query by queryHash.',
+        inputSchema: {
+            type: 'object',
+            properties: queryActionProperties,
+            required: ['queryHash'],
+        },
+    }),
+    removeQuery: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'remove-query',
+        description: 'Remove a TanStack Query query from the cache by queryHash.',
+        inputSchema: {
+            type: 'object',
+            properties: queryActionProperties,
+            required: ['queryHash'],
+        },
+    }),
+    clearQueryCache: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'clear-query-cache',
+        description: 'Clear the full TanStack Query query cache.',
+        inputSchema: emptyInputSchema,
+    }),
+    listMutations: (0, agent_shared_1.definePaginatedAgentToolContract)({
+        name: 'list-mutations',
+        description: 'List TanStack Query mutation summaries using cursor pagination.',
+        inputSchema: {
+            type: 'object',
+            properties: paginationProperties,
+        },
+        pagination: {
+            kind: 'cursor',
+            fields: [
+                'mutationId',
+                'mutationKey',
+                'status',
+                'isPaused',
+                'submittedAt',
+                'failureCount',
+                'hasData',
+                'hasError',
+            ],
+            defaultFields: ['mutationId', 'mutationKey', 'status', 'hasError'],
+        },
+    }),
+    getMutationDetails: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'get-mutation-details',
+        description: 'Return a JSON-safe TanStack Query mutation snapshot for a mutationId.',
+        inputSchema: {
+            type: 'object',
+            properties: mutationActionProperties,
+            required: ['mutationId'],
+        },
+    }),
+    clearMutationCache: (0, agent_shared_1.defineAgentToolContract)({
+        name: 'clear-mutation-cache',
+        description: 'Clear the full TanStack Query mutation cache.',
+        inputSchema: emptyInputSchema,
+    }),
+};

package/dist/react-native/cjs/src/shared/dehydrate.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dehydrateQueryClient = exports.dehydrateMutation = exports.dehydrateQuery = exports.dehydrateObservers = void 0;
+const dehydrateObservers = (query) => {
+    return query.observers.map((observer) => ({
+        queryHash: query.queryHash,
+        options: observer.options,
+    }));
+};
+exports.dehydrateObservers = dehydrateObservers;
+const dehydrateQuery = (query) => {
+    const dehydratedObservers = (0, exports.dehydrateObservers)(query);
+    return {
+        state: query.state,
+        queryKey: query.queryKey,
+        queryHash: query.queryHash,
+        observers: dehydratedObservers,
+    };
+};
+exports.dehydrateQuery = dehydrateQuery;
+const dehydrateMutation = (mutation) => {
+    return {
+        mutationId: mutation.mutationId,
+        state: mutation.state,
+        options: mutation.options,
+    };
+};
+exports.dehydrateMutation = dehydrateMutation;
+const dehydrateQueryClient = (queryClient) => {
+    return {
+        queries: queryClient.getQueryCache().getAll().map(exports.dehydrateQuery),
+        mutations: queryClient.getMutationCache().getAll().map(exports.dehydrateMutation),
+    };
+};
+exports.dehydrateQueryClient = dehydrateQueryClient;

package/dist/react-native/cjs/src/shared/messaging.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/react-native/cjs/src/shared/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/react-native/cjs/src/shared/useSyncOnlineStatus.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncOnlineStatus = void 0;
+const react_1 = require("react");
+const react_query_1 = require("@tanstack/react-query");
+const useSyncOnlineStatus = (client) => {
+    (0, react_1.useEffect)(() => {
+        if (!client) {
+            return;
+        }
+        const onlineManagerSubscription = react_query_1.onlineManager.subscribe((online) => {
+            client.send('online-status-changed', { online });
+        });
+        const onlineMessageSubscription = client.onMessage('online-status-changed', ({ online }) => {
+            react_query_1.onlineManager.setOnline(online);
+        });
+        return () => {
+            onlineManagerSubscription();
+            onlineMessageSubscription.remove();
+        };
+    }, [client]);
+};
+exports.useSyncOnlineStatus = useSyncOnlineStatus;

package/dist/react-native/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/dist/react-native/react-native.d.ts

@@ -0,0 +1 @@
+export declare let useTanStackQueryDevTools: typeof import('./src/react-native/useTanStackQueryDevTools').useTanStackQueryDevTools;

package/dist/react-native/react-native.js

@@ -0,0 +1,10 @@
+export let useTanStackQueryDevTools;
+const isDev = process.env.NODE_ENV !== 'production';
+const isServer = typeof window === 'undefined' && typeof lynx === 'undefined';
+if (isDev && !isServer) {
+    useTanStackQueryDevTools =
+        require('./src/react-native/useTanStackQueryDevTools').useTanStackQueryDevTools;
+}
+else {
+    useTanStackQueryDevTools = () => ({ isConnected: false });
+}