useQuery instead of mutation

packages/frontend/src/components/chat.tsx

@@ -16,7 +16,6 @@ export function Chat({ setHighlighted }: { setHighlighted: (ids: number[]) => vo
   const selectedOrganisation = useSelectedOrganisation();
   const selectedProject = useSelectedProject();
   const chat = useChat();
-  const models = useModels();
 
   const [isOpen, setIsOpen] = useState(false);
   const [message, setMessage] = useState("");
@@ -25,11 +24,7 @@ export function Chat({ setHighlighted }: { setHighlighted: (ids: number[]) => vo
   const [error, setError] = useState<string | null>(null);
   const [selectedModel, setSelectedModel] = useState<string>("");
 
-  useEffect(() => {
-    if (isOpen && !models.data) {
-      models.mutate();
-    }
-  }, [isOpen, models]);
+  const models = useModels(isOpen);
 
   useEffect(() => {
     if (models.data && models.data.length > 0 && !selectedModel) {

packages/frontend/src/lib/query/hooks/chat.ts

@@ -1,5 +1,5 @@
 import type { ChatRequest, ChatResponse, ModelsResponse } from "@sprint/shared";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { apiClient } from "@/lib/server";
 
 export function useChat() {
@@ -14,14 +14,17 @@ export function useChat() {
   });
 }
 
-export function useModels() {
-  return useMutation<ModelsResponse, Error>({
-    mutationKey: ["ai", "models"],
-    mutationFn: async () => {
+export function useModels(enabled: boolean) {
+  return useQuery<ModelsResponse, Error>({
+    queryKey: ["ai", "models"],
+    queryFn: async () => {
       const { data, error } = await apiClient.aiModels();
       if (error) throw new Error(error);
       if (!data) throw new Error("failed to get models");
       return data as ModelsResponse;
     },
+    enabled,
+    retry: false,
+    staleTime: 5 * 60 * 1000,
   });
 }