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

package/build/lib/index.prod.mjs

@@ -7816,7 +7816,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]};
@@ -7875,7 +7875,7 @@ class TanstackQueryDevtools {
       initialIsOpen,
       errorTypes
     } = config;
-    this.client = client;
+    this.client = createSignal(client);
     this.queryFlavor = queryFlavor;
     this.version = version;
     this.onlineManager = onlineManager;
@@ -7896,6 +7896,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');
@@ -7905,11 +7908,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;
         },
@@ -7920,6 +7921,9 @@ class TanstackQueryDevtools {
           return _self$.onlineManager;
         }
       }, {
+        get client() {
+          return queryClient();
+        },
         get buttonPosition() {
           return btnPosition();
         },
@@ -7948,6 +7952,7 @@ class TanstackQueryDevtools {
 
 function ReactQueryDevtools$1(props) {
   const queryClient = useQueryClient();
+  const client = props.client || queryClient;
   const ref = useRef(null);
   const {
     buttonPosition,
@@ -7956,7 +7961,7 @@ function ReactQueryDevtools$1(props) {
     errorTypes
   } = props;
   const [devtools] = useState(new TanstackQueryDevtools({
-    client: props.client || queryClient,
+    client: client,
     queryFlavor: 'React Query',
     version: '5',
     onlineManager,
@@ -7965,6 +7970,9 @@ function ReactQueryDevtools$1(props) {
     initialIsOpen,
     errorTypes
   }));
+  useEffect(() => {
+    devtools.setClient(client);
+  }, [client, devtools]);
   useEffect(() => {
     if (buttonPosition) {
       devtools.setButtonPosition(buttonPosition);