@buoy-gg/react-query 7.0.29 → 7.0.31

package/lib/module/index.js

@@ -60,6 +60,12 @@ export { QueryDebugInfo } from "./react-query/components/QueryDebugInfo";
 export { WifiToggle } from "./react-query/components/WifiToggle";
 export { ReactQuerySection } from "./react-query/components/ReactQuerySection";
 export { ReactQueryDevToolsModal } from "./react-query/components/ReactQueryDevToolsModal";
+/**
+ * Connects the event store to the app's QueryClient at startup. Auto-rendered
+ * by `FloatingDevTools`; exported so a host that does not use the floating menu
+ * can mount it itself.
+ */
+export { ReactQueryTracker } from "./react-query/components/ReactQueryTracker";
 
 // Shared data viewer components
 export { VirtualizedDataExplorer, DataViewer, TypeLegend } from "@buoy-gg/shared-ui/dataViewer";

package/lib/module/react-query/components/ReactQueryTracker.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { useContext, useEffect } from "react";
+import { QueryClientContext } from "@tanstack/react-query";
+import { reactQueryEventStore } from "../stores/reactQueryEventStore";
+
+/**
+ * Connects the React Query event store to the app's QueryClient at startup.
+ *
+ * Auto-rendered by `FloatingDevTools` (the same treatment `RouteTracker` gets),
+ * so nobody has to mount it by hand.
+ *
+ * Why it has to exist: until this, `setQueryClient` was called from exactly one
+ * place — `ReactQueryDevToolsModal`'s mount effect — which meant the store had
+ * no client unless somebody opened the React Query TOOL. Anything else that
+ * consumes these events was therefore silently empty, and the Events timeline
+ * showed a React Query badge with a confident `0` on it: not "nothing to
+ * report" but "nobody was listening", and no way to tell the two apart.
+ *
+ * `useContext(QueryClientContext)`, NOT `useQueryClient()`: the hook throws
+ * when there is no provider above it, and this component is mounted whether or
+ * not the host app uses React Query at all. An app without a provider just
+ * reads `undefined` here and nothing connects, which is the old behaviour.
+ */
+export function ReactQueryTracker() {
+  const queryClient = useContext(QueryClientContext);
+  useEffect(() => {
+    if (!queryClient) return;
+    // The tool connects the same client when it opens; leave that alone rather
+    // than tearing down its cache subscriptions and rebuilding them.
+    if (reactQueryEventStore.isConnected()) return;
+    reactQueryEventStore.setQueryClient(queryClient);
+  }, [queryClient]);
+  return null;
+}