refactor: Phase 4 - Configure centralized request deduplication

archon-ui-main/src/App.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { queryClient } from './features/shared/queryClient';
 import { KnowledgeBasePage } from './pages/KnowledgeBasePage';
 import { SettingsPage } from './pages/SettingsPage';
 import { MCPPage } from './pages/MCPPage';
@@ -18,27 +19,6 @@ import { MigrationBanner } from './components/ui/MigrationBanner';
 import { serverHealthService } from './services/serverHealthService';
 import { useMigrationStatus } from './hooks/useMigrationStatus';
 
-// Create a client with optimized settings for our polling use case
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      // Keep data fresh for 2 seconds by default
-      staleTime: 2000,
-      // Cache data for 5 minutes
-      gcTime: 5 * 60 * 1000,
-      // Retry failed requests 3 times
-      retry: 3,
-      // Refetch on window focus
-      refetchOnWindowFocus: true,
-      // Don't refetch on reconnect by default (we handle this manually)
-      refetchOnReconnect: false,
-    },
-    mutations: {
-      // Retry mutations once on failure
-      retry: 1,
-    },
-  },
-});
 
 const AppRoutes = () => {
   const { projectsEnabled } = useSettings();

archon-ui-main/src/components/layout/hooks/useBackendHealth.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { callAPIWithETag } from "../../../features/shared/apiWithEtag";
+import { STALE_TIMES } from "../../../features/shared/queryPatterns";
 import type { HealthResponse } from "../types";
 
 /**
@@ -38,10 +39,10 @@ export function useBackendHealth() {
       return Math.min(1500 * 1.5 ** attemptIndex, 10000);
     },
     // Refetch every 30 seconds when healthy
-    refetchInterval: 30000,
+    refetchInterval: STALE_TIMES.normal,
     // Keep trying to connect on window focus
     refetchOnWindowFocus: true,
-    // Consider data fresh for 20 seconds
-    staleTime: 20000,
+    // Consider data fresh for 30 seconds
+    staleTime: STALE_TIMES.normal,
   });
 }

archon-ui-main/src/features/knowledge/inspector/hooks/useInspectorPagination.ts

@@ -5,6 +5,7 @@
 
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
+import { STALE_TIMES } from "@/features/shared/queryPatterns";
 import { knowledgeKeys } from "../../hooks/useKnowledgeQueries";
 import { knowledgeService } from "../../services";
 import type { ChunksResponse, CodeExample, CodeExamplesResponse, DocumentChunk } from "../../types";
@@ -56,7 +57,7 @@ export function useInspectorPagination({
       return hasMore ? allPages.length : undefined;
     },
     enabled: !!sourceId,
-    staleTime: 60000,
+    staleTime: STALE_TIMES.normal,
     initialPageParam: 0,
   });
 

archon-ui-main/src/features/projects/tasks/hooks/useTaskQueries.ts

@@ -38,7 +38,7 @@ export function useTaskCounts() {
     queryKey: taskKeys.counts(),
     queryFn: () => taskService.getTaskCountsForAllProjects(),
     refetchInterval: false, // Don't poll, only refetch manually
-    staleTime: STALE_TIMES.rare,
+    staleTime: STALE_TIMES.frequent,
   });
 }
 

archon-ui-main/src/features/shared/queryClient.ts

@@ -0,0 +1,79 @@
+import { QueryClient } from "@tanstack/react-query";
+import { STALE_TIMES } from "./queryPatterns";
+
+/**
+ * Centralized QueryClient configuration for the entire application
+ *
+ * Benefits:
+ * - Single source of truth for cache configuration
+ * - Automatic request deduplication for same query keys
+ * - Smart retry logic that avoids retrying on client errors
+ * - Optimized garbage collection and structural sharing
+ */
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Default stale time - most data is considered fresh for 30 seconds
+      staleTime: STALE_TIMES.normal,
+
+      // Keep unused data in cache for 10 minutes (was 5 minutes)
+      gcTime: 10 * 60 * 1000,
+
+      // Smart retry logic - don't retry on 4xx errors
+      retry: (failureCount, error: any) => {
+        // Don't retry on 404 (Not Found)
+        if (error?.status === 404) return false;
+        // Don't retry on 400 (Bad Request)
+        if (error?.status === 400) return false;
+        // Don't retry on 401 (Unauthorized)
+        if (error?.status === 401) return false;
+        // Don't retry on 403 (Forbidden)
+        if (error?.status === 403) return false;
+        // Retry up to 2 times for other errors (5xx, network, etc)
+        return failureCount < 2;
+      },
+
+      // Exponential backoff for retries
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+
+      // Disable aggressive refetching to reduce API calls
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      refetchOnMount: true,
+
+      // Network behavior
+      networkMode: "online",
+
+      // Enable structural sharing for efficient re-renders
+      structuralSharing: true,
+    },
+
+    mutations: {
+      // No retries for mutations - let user explicitly retry
+      retry: false,
+
+      // Network behavior
+      networkMode: "online",
+    },
+  },
+});
+
+/**
+ * Create a test QueryClient with optimized settings for tests
+ * Used by test-utils.tsx for consistent test behavior
+ */
+export function createTestQueryClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        staleTime: 0, // Always fresh in tests
+        gcTime: 0, // No caching in tests
+        refetchOnWindowFocus: false,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  });
+}

archon-ui-main/src/features/shared/queryPatterns.ts

@@ -22,3 +22,13 @@ export const STALE_TIMES = {
   rare: 300_000, // 5 minutes - for rarely changing configuration
   static: Infinity, // Never stale - for static data like settings
 } as const;
+
+// Re-export commonly used TanStack Query types for convenience
+export type { QueryKey, QueryOptions } from "@tanstack/react-query";
+
+// Helper to create a disabled query options object
+export const DISABLED_QUERY_OPTIONS = {
+  enabled: false,
+  staleTime: Infinity,
+  gcTime: 0,
+} as const;

archon-ui-main/src/features/testing/test-utils.tsx

@@ -1,6 +1,7 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { render as rtlRender } from "@testing-library/react";
 import type React from "react";
+import { createTestQueryClient } from "../shared/queryClient";
 import { ToastProvider } from "../ui/components/ToastProvider";
 import { TooltipProvider } from "../ui/primitives/tooltip";
 
@@ -11,12 +12,7 @@ import { TooltipProvider } from "../ui/primitives/tooltip";
 export function renderWithProviders(
   ui: React.ReactElement,
   {
-    queryClient = new QueryClient({
-      defaultOptions: {
-        queries: { retry: false },
-        mutations: { retry: false },
-      },
-    }),
+    queryClient = createTestQueryClient(),
     ...renderOptions
   } = {},
 ) {