From 8269f319215a1eea2a20381491fe610d4f03587b Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Sat, 28 Feb 2026 17:47:47 -0800
Subject: [PATCH] refactor: extract ReactQueryProvider into dedicated context
 file

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/litellm-dashboard/src/app/layout.tsx                  | 5 ++++-
 ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx | 7 ++-----
 ui/litellm-dashboard/src/contexts/ReactQueryProvider.tsx | 9 +++++++++
 3 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/contexts/ReactQueryProvider.tsx

diff --git a/ui/litellm-dashboard/src/app/layout.tsx b/ui/litellm-dashboard/src/app/layout.tsx
index 1233da9046f..a4ed17cde39 100644
--- a/ui/litellm-dashboard/src/app/layout.tsx
+++ b/ui/litellm-dashboard/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 
 import AntdGlobalProvider from "@/contexts/AntdGlobalProvider";
+import ReactQueryProvider from "@/contexts/ReactQueryProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,7 +21,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <AntdGlobalProvider>{children}</AntdGlobalProvider>
+        <ReactQueryProvider>
+          <AntdGlobalProvider>{children}</AntdGlobalProvider>
+        </ReactQueryProvider>
       </body>
     </html>
   );
diff --git a/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx b/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
index 2e6d036dfd7..5b5c1036fa9 100644
--- a/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
+++ b/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
@@ -2,11 +2,8 @@
 
 import React, { useEffect, useRef } from "react";
 import { notification } from "antd";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { setNotificationInstance } from "@/components/molecules/notifications_manager";
 
-const queryClient = new QueryClient();
-
 export default function AntdGlobalProvider({ children }: { children: React.ReactNode }) {
   const [api, contextHolder] = notification.useNotification();
   const initialized = useRef(false);
@@ -19,9 +16,9 @@ export default function AntdGlobalProvider({ children }: { children: React.React
   }, [api]);
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <>
       {contextHolder}
       {children}
-    </QueryClientProvider>
+    </>
   );
 }
diff --git a/ui/litellm-dashboard/src/contexts/ReactQueryProvider.tsx b/ui/litellm-dashboard/src/contexts/ReactQueryProvider.tsx
new file mode 100644
index 00000000000..cf2d203a824
--- /dev/null
+++ b/ui/litellm-dashboard/src/contexts/ReactQueryProvider.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+export default function ReactQueryProvider({ children }: { children: React.ReactNode }) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}