From 1bf057bd1989f38b2a8989aa9945734749f0a4a3 Mon Sep 17 00:00:00 2001
From: Tomer Barletz <barletz@gmail.com>
Date: Sun, 2 Jun 2024 01:34:41 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20TanStack=20React=20Query=20de?=
 =?UTF-8?q?vtools=20in=20dev=20build=20(#1217)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/routes/__root.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index d0e250f..c2ed565 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -3,21 +3,32 @@ import React, { Suspense } from "react"
 
 import NotFound from "../components/Common/NotFound"
 
-const TanStackRouterDevtools =
+const loadDevtools = () =>
+  Promise.all([
+    import("@tanstack/router-devtools"),
+    import("@tanstack/react-query-devtools")
+  ]).then(([routerDevtools, reactQueryDevtools]) => {
+    return {
+      default: () => (
+        <>
+          <routerDevtools.TanStackRouterDevtools />
+          <reactQueryDevtools.ReactQueryDevtools />
+        </>
+      )
+    };
+  });
+
+const TanStackDevtools =
   process.env.NODE_ENV === "production"
     ? () => null
-    : React.lazy(() =>
-        import("@tanstack/router-devtools").then((res) => ({
-          default: res.TanStackRouterDevtools,
-        })),
-      )
+    : React.lazy(loadDevtools);
 
 export const Route = createRootRoute({
   component: () => (
     <>
       <Outlet />
       <Suspense>
-        <TanStackRouterDevtools />
+        <TanStackDevtools />
       </Suspense>
     </>
   ),