From e0fa51e7beb1ee74df234035a9e57f69314d624d Mon Sep 17 00:00:00 2001 From: Shuchang Zheng Date: Mon, 11 Nov 2024 07:47:31 -0800 Subject: [PATCH] Try to fix stale queries when tasks and workflows are created (#1169) --- .../src/routes/tasks/detail/TaskActions.tsx | 12 +++++-- .../src/routes/tasks/running/QueuedTasks.tsx | 2 +- .../src/routes/tasks/running/RunningTasks.tsx | 2 +- .../src/routes/workflows/WorkflowPage.tsx | 1 + .../src/routes/workflows/WorkflowRun.tsx | 31 ++++++++++++++++--- .../src/routes/workflows/Workflows.tsx | 1 + 6 files changed, 40 insertions(+), 9 deletions(-) diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx index 43368535..c6cf61e5 100644 --- a/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx +++ b/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({ 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 diff --git a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx b/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx index efff6725..736a170d 100644 --- a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx +++ b/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) { diff --git a/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx b/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx index 4c28c669..b677cf06 100644 --- a/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx +++ b/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) { diff --git a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx b/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx index 426a3ff6..84a9d388 100644 --- a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx +++ b/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx @@ -52,6 +52,7 @@ function WorkflowPage() { }) .then((response) => response.data); }, + refetchOnMount: "always", }); const { data: workflow, isLoading: workflowIsLoading } = diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx index 454d6202..39a3b88f 100644 --- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx +++ b/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(""); 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, - refetchOnWindowFocus: workflowRun?.status === Status.Running, + refetchOnMount: workflowRun?.status === Status.Running ? "always" : false, + 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) { diff --git a/skyvern-frontend/src/routes/workflows/Workflows.tsx b/skyvern-frontend/src/routes/workflows/Workflows.tsx index 265d64dd..cc058766 100644 --- a/skyvern-frontend/src/routes/workflows/Workflows.tsx +++ b/skyvern-frontend/src/routes/workflows/Workflows.tsx @@ -93,6 +93,7 @@ function Workflows() { }) .then((response) => response.data); }, + refetchOnMount: "always", }); const createNewWorkflowMutation = useMutation({