Implement cache management

src/App.tsx

@@ -3,8 +3,9 @@ import { lazy, Suspense } from "react";
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, QueryCache } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { CacheMonitor } from "@/components/dev/CacheMonitor";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AuthProvider } from "@/hooks/useAuth";
 import { AuthModalProvider } from "@/contexts/AuthModalContext";
@@ -77,8 +78,41 @@ const queryClient = new QueryClient({
       gcTime: 5 * 60 * 1000, // 5 minutes - keep in cache for 5 mins
     },
   },
+  // Add cache size management
+  queryCache: new QueryCache({
+    onSuccess: () => {
+      // Monitor cache size in development
+      if (import.meta.env.DEV) {
+        const cacheSize = queryClient.getQueryCache().getAll().length;
+        if (cacheSize > 100) {
+          console.warn(`⚠️ Query cache size: ${cacheSize} queries`);
+        }
+      }
+    },
+  }),
 });
 
+// Add cache size monitoring and automatic cleanup (dev mode)
+if (import.meta.env.DEV) {
+  setInterval(() => {
+    const cache = queryClient.getQueryCache();
+    const queries = cache.getAll();
+    
+    // Remove oldest queries if cache exceeds 150 items
+    if (queries.length > 150) {
+      const sortedByLastUpdated = queries
+        .sort((a, b) => (a.state.dataUpdatedAt || 0) - (b.state.dataUpdatedAt || 0));
+      
+      const toRemove = sortedByLastUpdated.slice(0, queries.length - 100);
+      toRemove.forEach(query => {
+        queryClient.removeQueries({ queryKey: query.queryKey });
+      });
+      
+      console.log(`🧹 Removed ${toRemove.length} stale queries from cache`);
+    }
+  }, 60000); // Check every minute
+}
+
 function AppContent(): React.JSX.Element {
   return (
     <TooltipProvider>
@@ -161,7 +195,12 @@ const App = (): React.JSX.Element => (
         <AppContent />
       </AuthModalProvider>
     </AuthProvider>
-    {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} position="bottom" />}
+    {import.meta.env.DEV && (
+      <>
+        <ReactQueryDevtools initialIsOpen={false} position="bottom" />
+        <CacheMonitor />
+      </>
+    )}
     <Analytics />
   </QueryClientProvider>
 );