feat(devtools): Make queryclient reactive (#5366)

Author: ardeora

packages/query-devtools/src/Devtools.tsx

@@ -1844,7 +1844,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]};

packages/query-devtools/src/index.tsx

@@ -17,7 +17,7 @@ export type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType }
 export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {}
 
 class TanstackQueryDevtools {
-  client: QueryClient
+  client: Signal<QueryClient>
   onlineManager: typeof TonlineManager
   queryFlavor: string
   version: string
@@ -39,7 +39,7 @@ class TanstackQueryDevtools {
       initialIsOpen,
       errorTypes,
     } = config
-    this.client = client
+    this.client = createSignal(client)
     this.queryFlavor = queryFlavor
     this.version = version
     this.onlineManager = onlineManager
@@ -65,6 +65,10 @@ class TanstackQueryDevtools {
     this.errorTypes[1](errorTypes)
   }
 
+  setClient(client: QueryClient) {
+    this.client[1](client)
+  }
+
   mount<T extends HTMLElement>(el: T) {
     if (this.isMounted) {
       throw new Error('Devtools is already mounted')
@@ -74,13 +78,16 @@ class TanstackQueryDevtools {
       const [pos] = this.position
       const [isOpen] = this.initialIsOpen
       const [errors] = this.errorTypes
+      const [queryClient] = this.client
       return (
         <DevtoolsComponent
-          client={this.client}
           queryFlavor={this.queryFlavor}
           version={this.version}
           onlineManager={this.onlineManager}
           {...{
+            get client() {
+              return queryClient()
+            },
             get buttonPosition() {
               return btnPosition()
             },

packages/react-query-devtools/src/devtools.tsx

@@ -40,11 +40,12 @@ export function ReactQueryDevtools(
   props: DevtoolsOptions,
 ): React.ReactElement | null {
   const queryClient = useQueryClient()
+  const client = props.client || queryClient
   const ref = useRef<HTMLDivElement>(null)
   const { buttonPosition, position, initialIsOpen, errorTypes } = props
   const [devtools] = useState(
     new TanstackQueryDevtools({
-      client: props.client || queryClient,
+      client: client,
       queryFlavor: 'React Query',
       version: '5',
       onlineManager,
@@ -55,6 +56,10 @@ export function ReactQueryDevtools(
     }),
   )
 
+  useEffect(() => {
+    devtools.setClient(client)
+  }, [client, devtools])
+
   useEffect(() => {
     if (buttonPosition) {
       devtools.setButtonPosition(buttonPosition)