@rozenite/tanstack-query-plugin 1.0.0-alpha.4 → 1.0.0-alpha.6

package/src/ui/tanstack-query.tsx

@@ -20,7 +20,7 @@ const App = () => {
 
   useHandleSyncMessages(client);
 
-  return <ReactQueryDevtoolsPanel />;
+  return <ReactQueryDevtoolsPanel style={{ height: '100%', width: '100%' }} />;
 };
 
 const queryClient = new QueryClient();

package/src/ui/useHandleSyncMessages.ts

@@ -1,7 +1,12 @@
 import { useEffect } from 'react';
 import { TanStackQueryPluginClient } from '../shared/messaging';
 import { useQueryClient } from '@tanstack/react-query';
-import { hydrateQueryClient } from '../shared/hydrate';
+import {
+  hydrateQueryClient,
+  applyQueryEvent,
+  applyMutationEvent,
+  applyQueryObserverEvent,
+} from '../shared/hydrate';
 
 export const useHandleSyncMessages = (
   client: TanStackQueryPluginClient | null
@@ -13,12 +18,49 @@ export const useHandleSyncMessages = (
       return;
     }
 
-    const subscription = client.onMessage('sync-data', ({ data }) => {
+    const querySubscription = client.onMessage(
+      'sync-query-event',
+      (message) => {
+        const { type, data } = message;
+
+        if (type === 'added' || type === 'removed') {
+          applyQueryEvent(queryClient, type, data);
+          return;
+        }
+
+        if (type === 'updated') {
+          const action = 'action' in message ? message.action : undefined;
+          applyQueryEvent(queryClient, type, data, action);
+          return;
+        }
+
+        if (
+          type === 'observerAdded' ||
+          type === 'observerRemoved' ||
+          type === 'observerOptionsUpdated'
+        ) {
+          applyQueryObserverEvent(queryClient, data);
+          return;
+        }
+      }
+    );
+
+    const mutationSubscription = client.onMessage(
+      'sync-mutation-event',
+      ({ type, data }) => {
+        applyMutationEvent(queryClient, type, data);
+      }
+    );
+
+    // Keep the full sync for initial data requests
+    const fullSyncSubscription = client.onMessage('sync-data', ({ data }) => {
       hydrateQueryClient(queryClient, data);
     });
 
     return () => {
-      subscription.remove();
+      querySubscription.remove();
+      mutationSubscription.remove();
+      fullSyncSubscription.remove();
     };
   }, [client, queryClient]);
 };

package/dist/useTanStackQueryDevTools.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("@rozenite/plugin-bridge"),i=require("react"),o=require("@tanstack/react-query"),h=e=>{i.useEffect(()=>{if(!e)return;const s=o.onlineManager.subscribe(r=>{}),n=e.onMessage("online-status-changed",({online:r})=>{console.log("changed from ",o.onlineManager.isOnline(),"to",r)});return()=>{s(),n.remove()}},[e])},y=e=>{const s=o.useQueryClient();i.useEffect(()=>{if(!e)return;const n=e.onMessage("devtools-action",({type:r,queryHash:u})=>{const t=s.getQueryCache().get(u);if(!t){console.warn(`No active query found for hash: ${u}`);return}switch(r){case"TRIGGER_ERROR":{const a=t.options,c=new Error("Unknown error from devtools");t.setState({status:"error",error:c,fetchMeta:{...t.state.fetchMeta,__previousQueryOptions:a}});break}case"RESTORE_ERROR":{s.resetQueries(t);break}case"TRIGGER_LOADING":{if(!t)return;const a=t.options;t.fetch({...a,queryFn:()=>new Promise(()=>{}),gcTime:-1}),t.setState({data:void 0,status:"pending",fetchMeta:{...t.state.fetchMeta,__previousQueryOptions:a}});break}case"RESTORE_LOADING":{const a=t.state,c=t.state.fetchMeta?t.state.fetchMeta.__previousQueryOptions:null;t.cancel({silent:!0}),t.setState({...a,fetchStatus:"idle",fetchMeta:null}),c&&t.fetch(c);break}case"RESET":{s.resetQueries(t);break}case"REMOVE":{s.removeQueries(t);break}case"REFETCH":{t.fetch().catch(()=>{});break}case"INVALIDATE":{s.invalidateQueries(t);break}default:console.warn(`Unknown devtools action: ${r}`)}});return()=>{n.remove()}},[e])},f=e=>{const s=e.observers.map(n=>({queryHash:e.queryHash,options:n.options}));return{state:e.state,queryKey:e.queryKey,queryHash:e.queryHash,observers:s}},p=e=>({mutationId:e.mutationId,state:e.state,options:e.options}),d=e=>({queries:e.getQueryCache().getAll().map(f),mutations:e.getMutationCache().getAll().map(p)}),g=e=>{const s=o.useQueryClient();i.useEffect(()=>{if(!e)return;const n=()=>{const t=d(s);e.send("sync-data",{data:t})},r=s.getMutationCache().subscribe(n),u=s.getQueryCache().subscribe(n);return()=>{r(),u()}},[e,s])},b=e=>{const s=o.useQueryClient();i.useEffect(()=>{if(!e)return;const n=e.onMessage("request-initial-data",()=>{const r=d(s);e.send("sync-data",{data:r})});return()=>{n.remove()}},[e,s])},v=()=>{const e=l.useRozeniteDevToolsClient({pluginId:"@rozenite/tanstack-query-plugin"});h(e),y(e),g(e),b(e)};exports.useTanStackQueryDevTools=v;