refactor: extract QueryClient to a singleton module

Move the QueryClient out of createAppRouter() into its own module so the
same instance is shared across the app and any code that imports it
(e.g. TWD tests can call queryClient.clear() between runs to avoid
cache leaking across spa-style twd.visit navigations).

Author: kevinccbsg

src/main.tsx

@@ -1,9 +1,10 @@
 import ReactDOM from 'react-dom/client'
 import { RouterProvider } from '@tanstack/react-router'
 import { QueryClientProvider } from '@tanstack/react-query'
+import { queryClient } from './query-client'
 import { createAppRouter } from './router'
 
-const { router, queryClient } = createAppRouter()
+const router = createAppRouter()
 
 const rootElement = document.getElementById('app')!
 

src/query-client.ts

@@ -0,0 +1,7 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { staleTime: 1000 * 30 },
+  },
+})

src/router.tsx

@@ -1,27 +1,19 @@
 import { createRouter } from '@tanstack/react-router'
-import { QueryClient } from '@tanstack/react-query'
+import { queryClient } from './query-client'
 import { routeTree } from './routeTree.gen'
 
 export function createAppRouter() {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { staleTime: 1000 * 30 },
-    },
-  })
-
-  const router = createRouter({
+  return createRouter({
     routeTree,
     scrollRestoration: true,
     defaultPreload: 'intent',
     defaultPreloadStaleTime: 0,
     context: { queryClient },
   })
-
-  return { router, queryClient }
 }
 
 declare module '@tanstack/react-router' {
   interface Register {
-    router: ReturnType<typeof createAppRouter>['router']
+    router: ReturnType<typeof createAppRouter>
   }
 }