fix(web): add ReactQueryProvider to root layout for Mission Control

Mission Control components (AuditLogDrawer, GlobalAgentRoster, PanelControls) use @tanstack/react-query hooks but no QueryClientProvider existed in the layout tree. This caused a crash: 'No QueryClient set, use QueryClientProvider'. Added ReactQueryProvider wrapper in apps/web/src/providers/ and wired it into the root layout above ErrorBoundary/AuthProvider so all routes have access.
Merge pull request 'style(web): fix prettier formatting in AuditLogDrawer' (#743 ) from fix/audit-drawer-format into main
2026-03-08 10:30:33 -05:00 · 2026-03-08 01:56:03 +00:00
2 changed files with 34 additions and 3 deletions
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { Outfit, Fira_Code } from "next/font/google";
 import { AuthProvider } from "@/lib/auth/auth-context";
 import { ErrorBoundary } from "@/components/error-boundary";
 import { ThemeProvider } from "@/providers/ThemeProvider";
+import { ReactQueryProvider } from "@/providers/ReactQueryProvider";
 import "./globals.css";

 export const dynamic = "force-dynamic";
@@ -56,9 +57,11 @@ export default function RootLayout({ children }: { children: ReactNode }): React
      </head>
      <body>
        <ThemeProvider>
-          <ErrorBoundary>
-            <AuthProvider>{children}</AuthProvider>
-          </ErrorBoundary>
+          <ReactQueryProvider>
+            <ErrorBoundary>
+              <AuthProvider>{children}</AuthProvider>
+            </ErrorBoundary>
+          </ReactQueryProvider>
        </ThemeProvider>
      </body>
    </html>
--- a/apps/web/src/providers/ReactQueryProvider.tsx
+++ b/apps/web/src/providers/ReactQueryProvider.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+
+interface ReactQueryProviderProps {
+  children: ReactNode;
+}
+
+export function ReactQueryProvider({ children }: ReactQueryProviderProps): React.JSX.Element {
+  // Create a stable QueryClient per component mount (one per app session)
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // Don't refetch on window focus in a dashboard context
+            refetchOnWindowFocus: false,
+            // Stale time of 30s — short enough for live data, avoids hammering
+            staleTime: 30_000,
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}
Author	SHA1	Message	Date
Jason Woltje	a0cc6c3ec7	fix(web): add ReactQueryProvider to root layout for Mission Control All checks were successful ci/woodpecker/push/ci Pipeline was successful Details Mission Control components (AuditLogDrawer, GlobalAgentRoster, PanelControls) use @tanstack/react-query hooks but no QueryClientProvider existed in the layout tree. This caused a crash: 'No QueryClient set, use QueryClientProvider'. Added ReactQueryProvider wrapper in apps/web/src/providers/ and wired it into the root layout above ErrorBoundary/AuthProvider so all routes have access.	2026-03-08 10:30:33 -05:00
jason.woltje	51d6302401	Merge pull request 'style(web): fix prettier formatting in AuditLogDrawer' (#743 ) from fix/audit-drawer-format into main All checks were successful ci/woodpecker/push/ci Pipeline was successful Details	2026-03-08 01:56:03 +00:00