From b19c1acb371568bcf0197da6f47ea6863a968b36 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Tue, 13 Feb 2024 12:18:25 +0100
Subject: [PATCH] fix(react-query-devtools): make the client prop work outside
 a Provider tree

---
 packages/react-query-devtools/src/devtools.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index d656d719fc..92bdfd8e03 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -43,14 +43,13 @@ export interface DevtoolsOptions {
 export function ReactQueryDevtools(
   props: DevtoolsOptions,
 ): React.ReactElement | null {
-  const queryClient = useQueryClient()
-  const client = props.client || queryClient
+  const queryClient = useQueryClient(props.client)
   const ref = React.useRef<HTMLDivElement>(null)
   const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =
     props
   const [devtools] = React.useState(
     new TanstackQueryDevtools({
-      client: client,
+      client: queryClient,
       queryFlavor: 'React Query',
       version: '5',
       onlineManager,
@@ -63,8 +62,8 @@ export function ReactQueryDevtools(
   )
 
   React.useEffect(() => {
-    devtools.setClient(client)
-  }, [client, devtools])
+    devtools.setClient(queryClient)
+  }, [queryClient, devtools])
 
   React.useEffect(() => {
     if (buttonPosition) {