diff --git a/src/integrations/tanstack-query/context.tsx b/src/integrations/tanstack-query/context.tsx
new file mode 100644
index 0000000..f9eb8fe
--- /dev/null
+++ b/src/integrations/tanstack-query/context.tsx
@@ -0,0 +1,8 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export function getContext() {
+  const queryClient = new QueryClient()
+  return {
+    queryClient,
+  }
+}
diff --git a/src/integrations/tanstack-query/devtools.tsx b/src/integrations/tanstack-query/devtools.tsx
new file mode 100644
index 0000000..a377fe0
--- /dev/null
+++ b/src/integrations/tanstack-query/devtools.tsx
@@ -0,0 +1,7 @@
+import type { TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+
+export const devtools = {
+  name: 'TanStack Query',
+  render: <ReactQueryDevtoolsPanel />,
+} satisfies TanStackDevtoolsReactPlugin
diff --git a/src/integrations/tanstack-query/index.ts b/src/integrations/tanstack-query/index.ts
new file mode 100644
index 0000000..7dcb09e
--- /dev/null
+++ b/src/integrations/tanstack-query/index.ts
@@ -0,0 +1,2 @@
+export * from './context'
+export * from './devtools'
diff --git a/src/integrations/tanstack-router/devtools.tsx b/src/integrations/tanstack-router/devtools.tsx
new file mode 100644
index 0000000..47d8af5
--- /dev/null
+++ b/src/integrations/tanstack-router/devtools.tsx
@@ -0,0 +1,7 @@
+import type { TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+
+export const devtools = {
+  name: 'TanStack Router',
+  render: <TanStackRouterDevtoolsPanel />,
+} satisfies TanStackDevtoolsReactPlugin
diff --git a/src/integrations/tanstack-router/index.ts b/src/integrations/tanstack-router/index.ts
new file mode 100644
index 0000000..39356ff
--- /dev/null
+++ b/src/integrations/tanstack-router/index.ts
@@ -0,0 +1 @@
+export * from './devtools'
diff --git a/src/router.tsx b/src/router.tsx
index eb5a6f4..85f04ea 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,15 +1,15 @@
-import { QueryClient } from '@tanstack/react-query'
 import { createRouter } from '@tanstack/react-router'
 import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import { getContext as getQueryContext } from './integrations/tanstack-query'
 import { routeTree } from './routeTree.gen'
 
 export const getRouter = () => {
-  const queryClient = new QueryClient()
+  const queryContext = getQueryContext()
 
   const router = createRouter({
     routeTree,
     context: {
-      queryClient,
+      ...queryContext,
     },
 
     scrollRestoration: true,
@@ -18,7 +18,7 @@ export const getRouter = () => {
 
   setupRouterSsrQueryIntegration({
     router,
-    queryClient,
+    queryClient: queryContext.queryClient,
   })
 
   return router
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 5fed3f6..f3b1d0c 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,8 +1,8 @@
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import type { ReactNode } from 'react'
+import { devtools as queryDevtools } from '@/integrations/tanstack-query'
+import { devtools as routerDevtools } from '@/integrations/tanstack-router'
 import appCss from '@/styles.css?url'
 
 export const Route = createRootRoute({
@@ -43,16 +43,7 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
           config={{
             position: 'bottom-right',
           }}
-          plugins={[
-            {
-              name: 'TanStack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-            {
-              name: 'TanStack Query',
-              render: <ReactQueryDevtoolsPanel />,
-            },
-          ]}
+          plugins={[routerDevtools, queryDevtools]}
         />
         <Scripts />
       </body>