From 325c74548df644dde1450fc65eb8f3cae63e796b Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <ryan@berri.ai>
Date: Mon, 27 Apr 2026 15:48:27 -0700
Subject: [PATCH] refactor(ui): invalidate proxyConfig query after spend-logs
 mutations

Previously, useStoreRequestInSpendLogs and useDeleteProxyConfigField
did not refresh the proxyConfig cache on success, so the Logging
Settings form continued to render the pre-save values until React
Query refetched on its own. Wire both hooks to invalidate
proxyConfigKeys on success so any active observer (currently the
Logging Settings page) repulls fresh data.

Export proxyConfigKeys for cross-hook reuse.
---
 .../hooks/proxyConfig/useProxyConfig.test.ts  | 23 +++++++++++++++++++
 .../hooks/proxyConfig/useProxyConfig.ts       |  8 +++++--
 .../useStoreRequestInSpendLogs.ts             |  7 +++++-
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.test.ts
index a8ce55d274..4ba80df5c6 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.test.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.test.ts
@@ -7,6 +7,7 @@ import {
   useDeleteProxyConfigField,
   getProxyConfigCall,
   deleteProxyConfigFieldCall,
+  proxyConfigKeys,
   ConfigType,
   GeneralSettingsFieldName,
   type ProxyConfigResponse,
@@ -426,6 +427,28 @@ describe("useDeleteProxyConfigField", () => {
 
     expect(result.current.error).toBeDefined();
   });
+
+  it("should invalidate proxyConfig queries after a successful delete", async () => {
+    (fetchSpy as any).mockResolvedValue({
+      ok: true,
+      json: async () => mockDeleteResponse,
+    });
+
+    const invalidateSpy = vi.spyOn(queryClient, "invalidateQueries");
+
+    const { result } = renderHook(() => useDeleteProxyConfigField(), { wrapper });
+
+    result.current.mutate({
+      config_type: ConfigType.GENERAL_SETTINGS,
+      field_name: GeneralSettingsFieldName.MAXIMUM_SPEND_LOGS_RETENTION_PERIOD,
+    });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: proxyConfigKeys.all });
+  });
 });
 
 describe("getProxyConfigCall", () => {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.ts
index b823ce4ffd..485c7cc1f9 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.ts
@@ -1,4 +1,4 @@
-import { useQuery, useMutation, UseMutationResult } from "@tanstack/react-query";
+import { useQuery, useMutation, UseMutationResult, useQueryClient } from "@tanstack/react-query";
 import { createQueryKeys } from "../common/queryKeysFactory";
 import useAuthorized from "../useAuthorized";
 import { proxyBaseUrl, getGlobalLitellmHeaderName, deriveErrorMessage, handleError } from "@/components/networking";
@@ -101,7 +101,7 @@ export const getProxyConfigCall = async (accessToken: string, configType: Config
   }
 };
 
-const proxyConfigKeys = createQueryKeys("proxyConfig");
+export const proxyConfigKeys = createQueryKeys("proxyConfig");
 
 /**
  * Network call function to delete a proxy config field
@@ -168,6 +168,7 @@ export const useDeleteProxyConfigField = (): UseMutationResult<
   DeleteProxyConfigFieldRequest
 > => {
   const { accessToken } = useAuthorized();
+  const queryClient = useQueryClient();
 
   return useMutation<DeleteProxyConfigFieldResponse, Error, DeleteProxyConfigFieldRequest>({
     mutationFn: async (request: DeleteProxyConfigFieldRequest) => {
@@ -176,5 +177,8 @@ export const useDeleteProxyConfigField = (): UseMutationResult<
       }
       return await deleteProxyConfigFieldCall(accessToken, request);
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: proxyConfigKeys.all });
+    },
   });
 };
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/storeRequestInSpendLogs/useStoreRequestInSpendLogs.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/storeRequestInSpendLogs/useStoreRequestInSpendLogs.ts
index 9c6211c308..67b52997a0 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/storeRequestInSpendLogs/useStoreRequestInSpendLogs.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/storeRequestInSpendLogs/useStoreRequestInSpendLogs.ts
@@ -1,6 +1,7 @@
-import { useMutation, UseMutationResult } from "@tanstack/react-query";
+import { useMutation, UseMutationResult, useQueryClient } from "@tanstack/react-query";
 import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "@/components/networking";
 import useAuthorized from "../useAuthorized";
+import { proxyConfigKeys } from "../proxyConfig/useProxyConfig";
 
 export interface StoreRequestInSpendLogsParams {
   store_prompts_in_spend_logs: boolean;
@@ -51,6 +52,7 @@ export const useStoreRequestInSpendLogs = (): UseMutationResult<
   StoreRequestInSpendLogsParams
 > => {
   const { accessToken } = useAuthorized();
+  const queryClient = useQueryClient();
 
   return useMutation<StoreRequestInSpendLogsResponse, Error, StoreRequestInSpendLogsParams>({
     mutationFn: async (params: StoreRequestInSpendLogsParams) => {
@@ -59,5 +61,8 @@ export const useStoreRequestInSpendLogs = (): UseMutationResult<
       }
       return await performStoreRequestInSpendLogs(accessToken, params);
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: proxyConfigKeys.all });
+    },
   });
 };