diff --git a/app/routes/__root.tsx b/app/routes/__root.tsx
index 8cb6335..9934a85 100644
--- a/app/routes/__root.tsx
+++ b/app/routes/__root.tsx
@@ -5,19 +5,33 @@ import { Meta, Scripts } from "@tanstack/start";
import * as React from "react";
import type { ReactNode } from "react";
-// Render nothing in prod, lazy load in dev
-const MaybeTanStackRouterDevtools =
- process.env.NODE_ENV === "production"
- ? () => null
- : React.lazy(() =>
- import("@tanstack/router-devtools").then((res) => ({
- default: res.TanStackRouterDevtools,
- })),
- );
+const inProduction = process.env.NODE_ENV === "production";
+
+const MaybeTanStackRouterDevtools = inProduction
+ ? () => null
+ : React.lazy(() =>
+ import("@tanstack/router-devtools").then((res) => ({
+ default: res.TanStackRouterDevtools,
+ })),
+ );
+
+const MaybeReactQueryDevtools = inProduction
+ ? () => null
+ : React.lazy(() =>
+ import("@tanstack/react-query-devtools").then((res) => ({
+ default: res.ReactQueryDevtools,
+ })),
+ );
const TanStackRouterDevtools = () => (
-
+
+
+);
+
+const ReactQueryDevtools = () => (
+
+
);
@@ -52,6 +66,7 @@ function RootComponent() {
+
diff --git a/bun.lockb b/bun.lockb
index d5cac84..2b0e300 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 909180b..340e5f3 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
},
"devDependencies": {
"@happy-dom/global-registrator": "^15.11.7",
+ "@tanstack/react-query-devtools": "^5.62.10",
"@tanstack/router-devtools": "^1.92.3",
"@tanstack/router-plugin": "^1.91.1",
"@testing-library/dom": "^10.4.0",