@buoy-gg/react-query 7.0.30 → 7.0.31

package/lib/commonjs/index.js

@@ -50,6 +50,7 @@ var _exportNames = {
   WifiToggle: true,
   ReactQuerySection: true,
   ReactQueryDevToolsModal: true,
+  ReactQueryTracker: true,
   VirtualizedDataExplorer: true,
   DataViewer: true,
   TypeLegend: true,
@@ -288,6 +289,12 @@ Object.defineProperty(exports, "ReactQuerySection", {
     return _ReactQuerySection.ReactQuerySection;
   }
 });
+Object.defineProperty(exports, "ReactQueryTracker", {
+  enumerable: true,
+  get: function () {
+    return _ReactQueryTracker.ReactQueryTracker;
+  }
+});
 Object.defineProperty(exports, "StorageStatusCount", {
   enumerable: true,
   get: function () {
@@ -539,6 +546,7 @@ var _QueryDebugInfo = require("./react-query/components/QueryDebugInfo");
 var _WifiToggle = require("./react-query/components/WifiToggle");
 var _ReactQuerySection = require("./react-query/components/ReactQuerySection");
 var _ReactQueryDevToolsModal = require("./react-query/components/ReactQueryDevToolsModal");
+var _ReactQueryTracker = require("./react-query/components/ReactQueryTracker");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _useAllQueries = _interopRequireDefault(require("./react-query/hooks/useAllQueries"));
 var _useAllMutations = _interopRequireDefault(require("./react-query/hooks/useAllMutations"));
@@ -685,6 +693,12 @@ try {
 
 // Mode components
 
+/**
+ * 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.
+ */
+
 // Shared data viewer components
 
 // =============================================================================

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactQueryTracker = ReactQueryTracker;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+var _reactQueryEventStore = require("../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.
+ */
+function ReactQueryTracker() {
+  const queryClient = (0, _react.useContext)(_reactQuery.QueryClientContext);
+  (0, _react.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.reactQueryEventStore.isConnected()) return;
+    _reactQueryEventStore.reactQueryEventStore.setQueryClient(queryClient);
+  }, [queryClient]);
+  return null;
+}