Try to fix stale queries when tasks and workflows are created (#1169)

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

@@ -6,7 +6,11 @@ import { ZoomableImage } from "@/components/ZoomableImage";
 import { useCostCalculator } from "@/hooks/useCostCalculator";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { envCredential } from "@/util/env";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import {
@@ -41,6 +45,7 @@ function TaskActions() {
     number | "stream" | null
   >(null);
   const costCalculator = useCostCalculator();
+  const queryClient = useQueryClient();
 
   const { data: task, isLoading: taskIsLoading } = useQuery<TaskApiResponse>({
     queryKey: ["task", taskId],
@@ -95,6 +100,9 @@ function TaskActions() {
             message.status === "terminated"
           ) {
             socket?.close();
+            queryClient.invalidateQueries({
+              queryKey: ["tasks"],
+            });
             if (
               message.status === "failed" ||
               message.status === "terminated"
@@ -129,7 +137,7 @@ function TaskActions() {
         socket = null;
       }
     };
-  }, [credentialGetter, taskId, taskIsRunningOrQueued]);
+  }, [credentialGetter, taskId, taskIsRunningOrQueued, queryClient]);
 
   const { data: steps, isLoading: stepsIsLoading } = useQuery<
     Array<StepApiResponse>

skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx

@@ -31,7 +31,7 @@ function QueuedTasks() {
         })
         .then((response) => response.data);
     },
-    refetchOnMount: true,
+    refetchOnMount: "always",
   });
 
   function handleNavigate(event: React.MouseEvent, id: string) {

skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx

@@ -31,7 +31,7 @@ function RunningTasks() {
         })
         .then((response) => response.data);
     },
-    refetchOnMount: true,
+    refetchOnMount: "always",
   });
 
   if (runningTasks?.length === 0) {

skyvern-frontend/src/routes/workflows/WorkflowPage.tsx

@@ -52,6 +52,7 @@ function WorkflowPage() {
         })
         .then((response) => response.data);
     },
+    refetchOnMount: "always",
   });
 
   const { data: workflow, isLoading: workflowIsLoading } =

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -40,7 +40,11 @@ import {
   PlayIcon,
   ReaderIcon,
 } from "@radix-ui/react-icons";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import fetchToCurl from "fetch-to-curl";
 import { useEffect, useState } from "react";
 import {
@@ -73,6 +77,7 @@ function WorkflowRun() {
   const [streamImgSrc, setStreamImgSrc] = useState<string>("");
   const navigate = useNavigate();
   const apiCredential = useApiCredential();
+  const queryClient = useQueryClient();
 
   const { data: workflow, isLoading: workflowIsLoading } = useWorkflowQuery({
     workflowPermanentId,
@@ -101,7 +106,7 @@ function WorkflowRun() {
         if (!query.state.data) {
           return false;
         }
-        return statusIsRunningOrQueued(query.state.data);
+        return statusIsRunningOrQueued(query.state.data) ? "always" : false;
       },
       refetchOnWindowFocus: (query) => {
         if (!query.state.data) {
@@ -130,8 +135,9 @@ function WorkflowRun() {
       return false;
     },
     placeholderData: keepPreviousData,
-    refetchOnMount: workflowRun?.status === Status.Running,
+    refetchOnMount: workflowRun?.status === Status.Running ? "always" : false,
-    refetchOnWindowFocus: workflowRun?.status === Status.Running,
+    refetchOnWindowFocus:
+      workflowRun?.status === Status.Running ? "always" : false,
   });
 
   const currentRunningTask = workflowTasks?.find(
@@ -174,6 +180,15 @@ function WorkflowRun() {
             message.status === "terminated"
           ) {
             socket?.close();
+            queryClient.invalidateQueries({
+              queryKey: ["workflowRuns"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["workflowRun", workflowPermanentId, workflowRunId],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["workflowTasks", workflowRunId],
+            });
             if (
               message.status === "failed" ||
               message.status === "terminated"
@@ -208,7 +223,13 @@ function WorkflowRun() {
         socket = null;
       }
     };
-  }, [credentialGetter, workflowRunId, workflowRunIsRunningOrQueued]);
+  }, [
+    credentialGetter,
+    workflowRunId,
+    workflowRunIsRunningOrQueued,
+    queryClient,
+    workflowPermanentId,
+  ]);
 
   function getStream() {
     if (workflowRun?.status === Status.Created) {

skyvern-frontend/src/routes/workflows/Workflows.tsx

@@ -93,6 +93,7 @@ function Workflows() {
         })
         .then((response) => response.data);
     },
+    refetchOnMount: "always",
   });
 
   const createNewWorkflowMutation = useMutation({