ai-workspace-services/litellm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): invalidate proxyConfig query after spend-logs mutations

Browse Source 
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.
This commit is contained in:
Ryan Crabbe 2026-04-27 15:48:27 -07:00
parent adff1c93d0
commit 325c74548d
No known key found for this signature in database
3 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.test.ts
View File

@ -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", () => {

8
ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.ts
View File

@ -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 });
},
});
};

7
ui/litellm-dashboard/src/app/(dashboard)/hooks/storeRequestInSpendLogs/useStoreRequestInSpendLogs.ts
View File

@ -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 });
},
});
};