✨ Add TanStack React Query devtools in dev build (fastapi#1217)

gusevyaroslove · Jun 1, 2024 · acc4fcb · acc4fcb
1 parent 160826f
commit acc4fcb
Showing 1 changed file with 18 additions and 7 deletions.
diff --git 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>
     </>
   ),