feat: tanstack devtools + add router devtools (#615)

Author: HugoPerard

app/routes/__root.tsx

@@ -1,11 +1,13 @@
+import { TanStackDevtools } from '@tanstack/react-devtools';
 import { QueryClient } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
 import {
   createRootRouteWithContext,
   HeadContent,
   Outlet,
   Scripts,
 } from '@tanstack/react-router';
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
 import { createServerFn } from '@tanstack/react-start';
 import { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -110,7 +112,15 @@ function RootComponent() {
     <RootDocument>
       <Providers>
         <Outlet />
-        <ReactQueryDevtools initialIsOpen={false} />
+        <TanStackDevtools
+          plugins={[
+            { name: 'Tanstack Query', render: <ReactQueryDevtoolsPanel /> },
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
       </Providers>
     </RootDocument>
   );

package.json

@@ -57,7 +57,10 @@
     "@t3-oss/env-core": "0.13.4",
     "@tanstack/react-query": "5.81.5",
     "@tanstack/react-query-devtools": "5.81.5",
+    "@tanstack/devtools-vite": "0.3.3",
+    "@tanstack/react-devtools": "0.7.0",
     "@tanstack/react-router": "1.131.50",
+    "@tanstack/react-router-devtools": "1.131.50",
     "@tanstack/react-start": "1.131.50",
     "@tanstack/zod-adapter": "1.131.50",
     "@uidotdev/usehooks": "2.4.1",