@rozenite/tanstack-query-plugin 2.1.0 → 2.3.0

package/dist/react-native/src/react-native/devtools-actions.js

@@ -0,0 +1,157 @@
+const getActiveQuery = (queryClient, queryHash) => {
+    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, input) => {
+    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.__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/dist/react-native/src/react-native/useHandleDevToolsMessages.d.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+export declare const useHandleDevToolsMessages: (queryClient: QueryClient, client: TanStackQueryPluginClient | null) => void;

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

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { applyTanStackQueryDevtoolsAction } from './devtools-actions';
+export const useHandleDevToolsMessages = (queryClient, client) => {
+    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/dist/react-native/src/react-native/useHandleInitialData.d.ts

@@ -0,0 +1,3 @@
+import { TanStackQueryPluginClient } from '../shared/messaging';
+import { QueryClient } from '@tanstack/react-query';
+export declare const useHandleInitialData: (queryClient: QueryClient, client: TanStackQueryPluginClient | null) => void;

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

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { dehydrateQueryClient } from '../shared/dehydrate';
+export const useHandleInitialData = (queryClient, client) => {
+    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/dist/react-native/src/react-native/useSyncTanStackCache.d.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+export declare const useSyncTanStackCache: (queryClient: QueryClient, client: TanStackQueryPluginClient | null) => void;

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

@@ -0,0 +1,196 @@
+import { useEffect, useMemo, useRef } from 'react';
+import equal from 'fast-deep-equal';
+import { dehydrateQuery, dehydrateMutation, dehydrateObservers } from '../shared/dehydrate';
+export const useSyncTanStackCache = (queryClient, client) => {
+    const previousObserversRef = useRef(new Map());
+    const handler = 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 = 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 = 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/dist/react-native/src/react-native/useTanStackQueryDevTools.d.ts

@@ -0,0 +1,2 @@
+import { QueryClient } from '@tanstack/react-query';
+export declare const useTanStackQueryDevTools: (queryClient: QueryClient) => void;

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

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