@tanstack/react-query-devtools 5.0.0-alpha.27 → 5.0.0-alpha.30

package/build/umd/index.development.js

@@ -7819,7 +7819,7 @@
       background-color: ${colors.darkGray[400]};
       font-size: ${font.size.sm};
       color: ${colors.gray[500]};
-      z-index: 2;
+      z-index: 7;
     `,
       settingsMenuHeader: css`
       padding: ${tokens.size[1.5]} ${tokens.size[2.5]};
@@ -7878,7 +7878,7 @@
         initialIsOpen,
         errorTypes
       } = config;
-      this.client = client;
+      this.client = createSignal(client);
       this.queryFlavor = queryFlavor;
       this.version = version;
       this.onlineManager = onlineManager;
@@ -7899,6 +7899,9 @@
     setErrorTypes(errorTypes) {
       this.errorTypes[1](errorTypes);
     }
+    setClient(client) {
+      this.client[1](client);
+    }
     mount(el) {
       if (this.isMounted) {
         throw new Error('Devtools is already mounted');
@@ -7908,11 +7911,9 @@
         const [pos] = this.position;
         const [isOpen] = this.initialIsOpen;
         const [errors] = this.errorTypes;
+        const [queryClient] = this.client;
         const _self$ = this;
         return createComponent(DevtoolsComponent, mergeProps({
-          get client() {
-            return _self$.client;
-          },
           get queryFlavor() {
             return _self$.queryFlavor;
           },
@@ -7923,6 +7924,9 @@
             return _self$.onlineManager;
           }
         }, {
+          get client() {
+            return queryClient();
+          },
           get buttonPosition() {
             return btnPosition();
           },
@@ -7951,6 +7955,7 @@
 
   function ReactQueryDevtools$1(props) {
     const queryClient = reactQuery.useQueryClient();
+    const client = props.client || queryClient;
     const ref = React.useRef(null);
     const {
       buttonPosition,
@@ -7959,7 +7964,7 @@
       errorTypes
     } = props;
     const [devtools] = React.useState(new TanstackQueryDevtools({
-      client: props.client || queryClient,
+      client: client,
       queryFlavor: 'React Query',
       version: '5',
       onlineManager: reactQuery.onlineManager,
@@ -7968,6 +7973,9 @@
       initialIsOpen,
       errorTypes
     }));
+    React.useEffect(() => {
+      devtools.setClient(client);
+    }, [client, devtools]);
     React.useEffect(() => {
       if (buttonPosition) {
         devtools.setButtonPosition(buttonPosition);