fix: query client and router provider order

Author: ImLunaHey

src/main.tsx

@@ -5,6 +5,7 @@ import './i18n';
 
 // Import the generated route tree
 import { routeTree } from './routeTree.gen';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 // Create a new router instance
 const router = createRouter({ routeTree });
@@ -16,13 +17,30 @@ declare module '@tanstack/react-router' {
   }
 }
 
+// Create a new query client instance
+const queryClient = new QueryClient({
+  defaultOptions: {
+    mutations: {
+      onError: (error) => {
+        console.error('Mutation error:', error);
+      },
+    },
+    queries: {
+      retry: 1,
+      staleTime: 1000 * 60, // 1 minute
+    },
+  },
+});
+
 // Render the app
 const rootElement = document.getElementById('root')!;
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
     </StrictMode>,
   );
 }

src/routes/__root.tsx

@@ -2,7 +2,6 @@ import { createRootRoute, Outlet, redirect, useRouterState } from '@tanstack/rea
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 import '../index.css';
 import { ErrorBoundary } from '../components/ErrorBoundary';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useBlueskyStore } from '../lib/bluesky/store';
 import { Toaster } from 'sonner';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools/production';
@@ -11,21 +10,6 @@ import { cn } from '../lib/utils';
 import { Navbar } from '../components/Navbar';
 import i18n from '../i18n';
 
-// Create a new query client instance
-const queryClient = new QueryClient({
-  defaultOptions: {
-    mutations: {
-      onError: (error) => {
-        console.error('Mutation error:', error);
-      },
-    },
-    queries: {
-      retry: 1,
-      staleTime: 1000 * 60, // 1 minute
-    },
-  },
-});
-
 export const Route = createRootRoute({
   component: Root,
   beforeLoad: async ({ location }) => {
@@ -76,23 +60,22 @@ function Root() {
       )}
     >
       <ErrorBoundary>
-        <QueryClientProvider client={queryClient}>
-          <div className="flex mx-auto lg:flex-row lg:w-fit lg:gap-2">
-            <Navbar />
-            <div className="bg-white dark:bg-black text-gray-900 dark:text-gray-100 flex justify-center mx-auto">
-              <ErrorBoundary>
-                <div className={cn('flex flex-col gap-2', pathname !== '/' && 'max-w-[550px]')}>
-                  <Outlet key="app" />
-                </div>
-              </ErrorBoundary>
-            </div>
+        <div className="flex mx-auto lg:flex-row lg:w-fit lg:gap-2">
+          <Navbar />
+          <div className="bg-white dark:bg-black text-gray-900 dark:text-gray-100 flex justify-center mx-auto">
+            <ErrorBoundary>
+              <div className={cn('flex flex-col gap-2', pathname !== '/' && 'max-w-[550px]')}>
+                <Outlet key="app" />
+              </div>
+            </ErrorBoundary>
           </div>
-          {experiments.devMode && (
-            <div className="fixed bottom-12 right-2">
-              <ReactQueryDevtools buttonPosition="relative" />
-            </div>
-          )}
-        </QueryClientProvider>
+        </div>
+        {experiments.devMode && (
+          <div className="fixed bottom-12 right-2">
+            <ReactQueryDevtools buttonPosition="relative" />
+          </div>
+        )}
+
         {experiments.devMode && (
           <TanStackRouterDevtools
             toggleButtonProps={{