feat: add QueryProvider to manage React Query client and wrap Providers component

src/app/[locale]/providers.tsx

@@ -3,6 +3,7 @@
 import { ActiveThemeProvider } from '@/components/layout/active-theme-provider';
 import { CreditsProvider } from '@/components/layout/credits-provider';
 import { PaymentProvider } from '@/components/layout/payment-provider';
+import { QueryProvider } from '@/components/providers/query-provider';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { websiteConfig } from '@/config/website';
 import type { Translations } from 'fumadocs-ui/i18n';
@@ -54,6 +55,7 @@ export function Providers({ children, locale }: ProvidersProps) {
   };
 
   return (
+    <QueryProvider>
       <ThemeProvider
         attribute="class"
         defaultTheme={defaultMode}
@@ -70,5 +72,6 @@ export function Providers({ children, locale }: ProvidersProps) {
           </RootProvider>
         </ActiveThemeProvider>
       </ThemeProvider>
+    </QueryProvider>
   );
 }

src/components/providers/query-provider.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+
+interface QueryProviderProps {
+  children: ReactNode;
+}
+
+export function QueryProvider({ children }: QueryProviderProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5 * 60 * 1000, // 5 minutes
+            gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)
+            retry: 1,
+            refetchOnWindowFocus: false,
+          },
+          mutations: {
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}