Fix an issue with running task recording (#607)

skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx

@@ -1,5 +1,4 @@
 import { getClient } from "@/api/AxiosClient";
-import { TaskApiResponse } from "@/api/types";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 import { getRecordingURL } from "./artifactUtils";
@@ -11,18 +10,22 @@ function TaskRecording() {
   const credentialGetter = useCredentialGetter();
 
   const {
-    data: task,
+    data: recordingURL,
-    isFetching: taskIsFetching,
+    isLoading: taskIsLoading,
     isError: taskIsError,
-  } = useQuery<TaskApiResponse>({
+  } = useQuery<string | undefined>({
-    queryKey: ["task", taskId],
+    queryKey: ["task", taskId, "recordingURL"],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
-      return client.get(`/tasks/${taskId}`).then((response) => response.data);
+      const task = await client
+        .get(`/tasks/${taskId}`)
+        .then((response) => response.data);
+      return getRecordingURL(task);
     },
+    refetchOnMount: true,
   });
 
-  if (taskIsFetching) {
+  if (taskIsLoading) {
     return (
       <div className="mx-auto flex">
         <div className="h-[450px] w-[800px]">
@@ -32,14 +35,14 @@ function TaskRecording() {
     );
   }
 
-  if (taskIsError || !task) {
+  if (taskIsError) {
     return <div>Error loading recording</div>;
   }
 
   return (
     <div className="mx-auto flex">
-      {task.recording_url ? (
+      {recordingURL ? (
-        <video width={800} height={450} src={getRecordingURL(task)} controls />
+        <video width={800} height={450} src={recordingURL} controls />
       ) : (
         <div>No recording available</div>
       )}