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

package/build/lib/index.prod.js

@@ -7818,7 +7818,7 @@ const getStyles = () => {
       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]};
@@ -7877,7 +7877,7 @@ class TanstackQueryDevtools {
       initialIsOpen,
       errorTypes
     } = config;
-    this.client = client;
+    this.client = createSignal(client);
     this.queryFlavor = queryFlavor;
     this.version = version;
     this.onlineManager = onlineManager;
@@ -7898,6 +7898,9 @@ class TanstackQueryDevtools {
   setErrorTypes(errorTypes) {
     this.errorTypes[1](errorTypes);
   }
+  setClient(client) {
+    this.client[1](client);
+  }
   mount(el) {
     if (this.isMounted) {
       throw new Error('Devtools is already mounted');
@@ -7907,11 +7910,9 @@ class TanstackQueryDevtools {
       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;
         },
@@ -7922,6 +7923,9 @@ class TanstackQueryDevtools {
           return _self$.onlineManager;
         }
       }, {
+        get client() {
+          return queryClient();
+        },
         get buttonPosition() {
           return btnPosition();
         },
@@ -7950,6 +7954,7 @@ class TanstackQueryDevtools {
 
 function ReactQueryDevtools$1(props) {
   const queryClient = reactQuery.useQueryClient();
+  const client = props.client || queryClient;
   const ref = React.useRef(null);
   const {
     buttonPosition,
@@ -7958,7 +7963,7 @@ function ReactQueryDevtools$1(props) {
     errorTypes
   } = props;
   const [devtools] = React.useState(new TanstackQueryDevtools({
-    client: props.client || queryClient,
+    client: client,
     queryFlavor: 'React Query',
     version: '5',
     onlineManager: reactQuery.onlineManager,
@@ -7967,6 +7972,9 @@ function ReactQueryDevtools$1(props) {
     initialIsOpen,
     errorTypes
   }));
+  React.useEffect(() => {
+    devtools.setClient(client);
+  }, [client, devtools]);
   React.useEffect(() => {
     if (buttonPosition) {
       devtools.setButtonPosition(buttonPosition);