Fix model invalidation (#2024)

 > [!NOTE] > Ensures model lists refresh reliably by standardizing React Query invalidations. > > - Use `useQueryClient` and `invalidateQueries` in `ModelsSection.tsx` after create/edit/delete instead of local `refetch` > - Update `useDeleteCustomModel` to invalidate `['language-models', providerId]` and `['language-models-by-providers']` (replacing `['languageModels']`) > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e2184c3150a264360519994290e1677993120cd2. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>   ## Summary by cubic Fixes stale model lists by properly invalidating React Query caches after create, edit, and delete actions. The UI now updates immediately without manual refetches. - **Bug Fixes** - Added invalidateModels in ModelsSection to invalidate ["language-models", providerId] and ["language-models-by-providers"]. - Replaced manual refetches with cache invalidation on success for create/edit/delete. - Updated useDeleteCustomModel to invalidate ["language-models-by-providers"] instead of the incorrect "languageModels" key. <sup>Written for commit e2184c3150a264360519994290e1677993120cd2. Summary will update automatically on new commits.</sup>

Fix model invalidation (#2024)
64b36f4e · Will Chen · GitHub · ed5ff1e5 · 64b36f4e · 64b36f4e
--- a/src/components/settings/ModelsSection.tsx
+++ b/src/components/settings/ModelsSection.tsx
@@ -17,6 +17,7 @@ import {
  AlertDialogHeader,
  AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { useQueryClient } from "@tanstack/react-query";

 interface ModelsSectionProps {
  providerId: string;
@@ -30,19 +31,28 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
  const [modelToDelete, setModelToDelete] = useState<string | null>(null);
  const [modelToEdit, setModelToEdit] = useState<any | null>(null);
  const [selectedModel, setSelectedModel] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  const invalidateModels = () => {
+    queryClient.invalidateQueries({
+      queryKey: ["language-models", providerId],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["language-models-by-providers"],
+    });
+  };

  // Fetch custom models within this component now
  const {
    data: models,
    isLoading: modelsLoading,
    error: modelsError,
-    refetch: refetchModels,
  } = useLanguageModelsForProvider(providerId);

  const { mutate: deleteModel, isPending: isDeleting } = useDeleteCustomModel({
    onSuccess: () => {
-      refetchModels(); // Refetch models list after successful deletion
      // Optionally show a success toast here
+      invalidateModels();
    },
    onError: (error: Error) => {
      // Optionally show an error toast here
@@ -214,7 +224,7 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
        onClose={() => setIsCustomModelDialogOpen(false)}
        onSuccess={() => {
          setIsCustomModelDialogOpen(false);
-          refetchModels(); // Refetch models on success
+          invalidateModels();
        }}
        providerId={providerId}
      />
@@ -224,7 +234,7 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
        onClose={() => setIsEditModelDialogOpen(false)}
        onSuccess={() => {
          setIsEditModelDialogOpen(false);
-          refetchModels(); // Refetch models on success
+          invalidateModels();
        }}
        providerId={providerId}
        model={modelToEdit}

--- a/src/hooks/useDeleteCustomModel.ts
+++ b/src/hooks/useDeleteCustomModel.ts
@@ -32,7 +32,9 @@ export function useDeleteCustomModel({
        queryKey: ["language-models", params.providerId],
      });
      // Invalidate general model list if needed
-      queryClient.invalidateQueries({ queryKey: ["languageModels"] });
+      queryClient.invalidateQueries({
+        queryKey: ["language-models-by-providers"],
+      });
      onSuccess?.();
    },
    onError: (error: Error) => {