Add centralized query cache invalidation utility

chriswritescode-dev · chriswritescode-dev · commit b2439a73af7a · 2026-01-30T22:01:09.000-05:00
diff --git a/frontend/src/components/settings/McpManager.tsx b/frontend/src/components/settings/McpManager.tsx
@@ -8,6 +8,7 @@ import { AddMcpServerDialog } from './AddMcpServerDialog'
 import { McpServerCard } from './McpServerCard'
 import { useMcpServers } from '@/hooks/useMcpServers'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { invalidateConfigCaches } from '@/lib/queryInvalidation'
 
 interface McpServerConfig {
   type: 'local' | 'remote'
@@ -61,8 +62,7 @@ export function McpManager({ config, onUpdate, onConfigUpdate }: McpManagerProps
       await onUpdate(updatedConfig)
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['opencode-config'] })
-      queryClient.invalidateQueries({ queryKey: ['mcp-status'] })
+      invalidateConfigCaches(queryClient)
       setDeleteConfirmServer(null)
     },
   })
diff --git a/frontend/src/components/settings/OpenCodeConfigManager.tsx b/frontend/src/components/settings/OpenCodeConfigManager.tsx
@@ -18,6 +18,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useServerHealth } from '@/hooks/useServerHealth'
 import { parseJsonc, hasJsoncComments } from '@/lib/jsonc'
 import { showToast } from '@/lib/toast'
+import { invalidateConfigCaches } from '@/lib/queryInvalidation'
 import type { OpenCodeConfig } from '@/api/types/settings'
 
 interface Command {
@@ -86,7 +87,7 @@ export function OpenCodeConfigManager() {
       return await settingsApi.reloadOpenCodeConfig()
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+      invalidateConfigCaches(queryClient)
     },
   })
 
@@ -95,7 +96,7 @@ export function OpenCodeConfigManager() {
       return await settingsApi.restartOpenCodeServer()
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+      invalidateConfigCaches(queryClient)
     },
   })
 
@@ -104,17 +105,15 @@ export function OpenCodeConfigManager() {
       return await settingsApi.upgradeOpenCode()
     },
     onSuccess: (data) => {
-      queryClient.invalidateQueries({ queryKey: ['health'] })
-      queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+      invalidateConfigCaches(queryClient)
       if (data.upgraded) {
         showToast.success(`Upgraded to v${data.newVersion} and server restarted`, { id: 'upgrade-opencode' })
       } else {
         showToast.success('OpenCode is already up to date', { id: 'upgrade-opencode' })
       }
     },
     onError: (error) => {
-      queryClient.invalidateQueries({ queryKey: ['health'] })
-      queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+      invalidateConfigCaches(queryClient)
       
       const defaultMessage = 'Failed to upgrade OpenCode'
       
@@ -186,9 +185,8 @@ export function OpenCodeConfigManager() {
         }
       } else {
         showToast.success('Configuration updated')
+        invalidateConfigCaches(queryClient)
       }
-
-      queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
     } catch (error) {
       console.error('Failed to update config:', error)
       showToast.error(getApiErrorMessage(error, 'Failed to update config'), { id: 'update-restart' })
@@ -242,7 +240,7 @@ export function OpenCodeConfigManager() {
         showToast.success('Configuration created', { id: 'create-config' })
       }
 
-      queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+      invalidateConfigCaches(queryClient)
     } catch (error) {
       console.error('Failed to create config:', error)
       showToast.error(getApiErrorMessage(error, 'Failed to create configuration'), { id: 'create-config' })
@@ -259,9 +257,11 @@ export function OpenCodeConfigManager() {
       setIsUpdating(true)
       await settingsApi.deleteOpenCodeConfig(config.name)
       setDeleteConfirmConfig(null)
+      if (selectedConfig?.id === config.id) {
+        setSelectedConfig(null)
+      }
       fetchConfigs()
-      // Invalidate agents cache in case deleted config had agents
-      queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+      invalidateConfigCaches(queryClient)
     } catch (error) {
       console.error('Failed to delete config:', error)
     } finally {
@@ -501,7 +501,7 @@ export function OpenCodeConfigManager() {
               ? 'Configuration saved and server reloaded'
               : 'Configuration saved'
             showToast.success(successMsg, { id: 'edit-config' })
-            queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+            invalidateConfigCaches(queryClient)
           } catch (error) {
             showToast.error(getApiErrorMessage(error, 'Failed to save configuration'), { id: 'edit-config' })
             throw error
@@ -586,15 +586,15 @@ export function OpenCodeConfigManager() {
                         <div className="flex items-center gap-3 min-w-0">
                           <h4 className="text-sm font-medium truncate">Commands</h4>
                           <span className="text-xs text-muted-foreground">
-                            {Object.keys(selectedConfig.content.command as Record<string, Command> || {}).length} configured
+                            {Object.keys((selectedConfig.content?.command as Record<string, Command> | undefined) ?? {}).length} configured
                           </span>
                         </div>
                         <Edit className={`h-4 w-4 transition-transform ${expandedSections.commands ? 'rotate-90' : ''}`} />
                       </button>
                       <div className={`${expandedSections.commands ? 'block' : 'hidden'} border-t border-border`}>
                         <div className="p-1 sm:p-4 max-h-[50vh] overflow-y-auto">
                           <CommandsEditor
-                            commands={(selectedConfig.content.command as Record<string, Command>) || {}}
+                            commands={(selectedConfig.content?.command as Record<string, Command> | undefined) ?? {}}
                             onChange={(commands) => {
                               const updatedContent = {
                                 ...selectedConfig.content,
@@ -623,15 +623,15 @@ export function OpenCodeConfigManager() {
                         <div className="flex items-center gap-3 min-w-0">
                           <h4 className="text-sm font-medium truncate">Agents</h4>
                           <span className="text-xs text-muted-foreground">
-                            {Object.keys(selectedConfig.content.agent as Record<string, Agent> || {}).length} configured
+                            {Object.keys((selectedConfig.content?.agent as Record<string, Agent> | undefined) ?? {}).length} configured
                           </span>
                         </div>
                         <Edit className={`h-4 w-4 transition-transform ${expandedSections.agents ? 'rotate-90' : ''}`} />
                       </button>
                       <div className={`${expandedSections.agents ? 'block' : 'hidden'} border-t border-border`}>
                         <div className="p-4 max-h-[50vh] overflow-y-auto">
                           <AgentsEditor
-                            agents={(selectedConfig.content.agent as Record<string, Agent>) || {}}
+                            agents={(selectedConfig.content?.agent as Record<string, Agent> | undefined) ?? {}}
                             onChange={(agents) => {
                               const updatedContent = {
                                 ...selectedConfig.content,
@@ -660,7 +660,7 @@ export function OpenCodeConfigManager() {
                         <div className="flex items-center gap-3 min-w-0">
                           <h4 className="text-sm font-medium truncate">MCP Servers</h4>
                           <span className="text-xs text-muted-foreground">
-                            {Object.keys((selectedConfig.content.mcp as Record<string, unknown>) || {}).length} configured
+                            {Object.keys((selectedConfig.content?.mcp as Record<string, unknown> | undefined) ?? {}).length} configured
                           </span>
                         </div>
                         <Edit className={`h-4 w-4 transition-transform ${expandedSections.mcp ? 'rotate-90' : ''}`} />
diff --git a/frontend/src/hooks/useContextUsage.ts b/frontend/src/hooks/useContextUsage.ts
@@ -1,7 +1,6 @@
 import { useMemo } from 'react'
 import { useMessages } from './useOpenCode'
 import { useQuery } from '@tanstack/react-query'
-import { useSessionAgent } from './useSessionAgent'
 import { useModelSelection } from './useModelSelection'
 
 interface ContextUsage {
@@ -43,11 +42,8 @@ async function fetchProviders(opcodeUrl: string): Promise<ProvidersResponse> {
 
 export const useContextUsage = (opcodeUrl: string | null | undefined, sessionID: string | undefined, directory?: string): ContextUsage => {
   const { data: messages, isLoading: messagesLoading } = useMessages(opcodeUrl, sessionID, directory)
-  const sessionAgent = useSessionAgent(opcodeUrl, sessionID, directory)
   const { modelString: globalModelString } = useModelSelection(opcodeUrl, directory)
-  const modelString = sessionAgent.model 
-    ? `${sessionAgent.model.providerID}/${sessionAgent.model.modelID}` 
-    : globalModelString
+  const modelString = globalModelString
 
   const { data: providersData } = useQuery({
     queryKey: ['providers', opcodeUrl],
diff --git a/frontend/src/hooks/useServerHealth.ts b/frontend/src/hooks/useServerHealth.ts
@@ -1,8 +1,7 @@
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 import { settingsApi } from '@/api/settings'
-import { useMutation } from '@tanstack/react-query'
-import { useQueryClient } from '@tanstack/react-query'
+import { invalidateConfigCaches, invalidateSettingsCaches } from '@/lib/queryInvalidation'
 
 interface HealthResponse {
   status: 'healthy' | 'degraded' | 'unhealthy'
@@ -34,8 +33,7 @@ export function useServerHealth(enabled = true) {
       return await settingsApi.reloadOpenCodeConfig()
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['health'] })
-      queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+      invalidateConfigCaches(queryClient)
       toast.success('Server configuration reloaded successfully')
     },
     onError: (error: unknown) => {
@@ -53,9 +51,7 @@ export function useServerHealth(enabled = true) {
       return await settingsApi.rollbackOpenCodeConfig()
     },
     onSuccess: (data) => {
-      queryClient.invalidateQueries({ queryKey: ['health'] })
-      queryClient.invalidateQueries({ queryKey: ['settings'] })
-      queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+      invalidateSettingsCaches(queryClient)
       toast.success(data.message)
     },
     onError: () => {
diff --git a/frontend/src/hooks/useSettings.ts b/frontend/src/hooks/useSettings.ts
@@ -1,6 +1,7 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { settingsApi } from '@/api/settings'
 import type { UserPreferences } from '@/api/types/settings'
+import { invalidateConfigCaches } from '@/lib/queryInvalidation'
 
 export function useSettings(userId = 'default') {
   const queryClient = useQueryClient()
@@ -43,8 +44,8 @@ export function useSettings(userId = 'default') {
       }
     },
     onSettled: () => {
-      // Refetch to ensure server state
       queryClient.invalidateQueries({ queryKey: ['settings', userId] })
+      invalidateConfigCaches(queryClient)
     },
   })
 
diff --git a/frontend/src/lib/queryInvalidation.ts b/frontend/src/lib/queryInvalidation.ts
@@ -0,0 +1,30 @@
+import type { QueryClient } from '@tanstack/react-query'
+
+export function invalidateConfigCaches(queryClient: QueryClient) {
+  queryClient.invalidateQueries({ queryKey: ['opencode', 'config'] })
+  queryClient.invalidateQueries({ queryKey: ['opencode', 'agents'] })
+  queryClient.invalidateQueries({ queryKey: ['opencode-config'] })
+  queryClient.invalidateQueries({ queryKey: ['health'] })
+  queryClient.invalidateQueries({ queryKey: ['mcp-status'] })
+  queryClient.invalidateQueries({ queryKey: ['providers'] })
+}
+
+export function invalidateSettingsCaches(queryClient: QueryClient, userId = 'default') {
+  queryClient.invalidateQueries({ queryKey: ['settings', userId] })
+  invalidateConfigCaches(queryClient)
+}
+
+export function invalidateSessionCaches(queryClient: QueryClient) {
+  queryClient.invalidateQueries({
+    predicate: (query) =>
+      query.queryKey[0] === 'opencode' &&
+      (query.queryKey[1] === 'sessions' ||
+        query.queryKey[1] === 'session' ||
+        query.queryKey[1] === 'messages'),
+  })
+}
+
+export function invalidateAllConfigRelatedCaches(queryClient: QueryClient, userId = 'default') {
+  invalidateSettingsCaches(queryClient, userId)
+  invalidateSessionCaches(queryClient)
+}
