refetch less aggressively (#231)

skyvern-frontend/README.md

@@ -1,6 +1,5 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
 - [Skyvern Frontend](#skyvern-frontend)
   - [Development](#development)

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

@@ -39,7 +39,7 @@ function TaskDetails() {
         query.state.data?.status === Status.Running ||
         query.state.data?.status === Status.Queued
       ) {
-        return 3000;
+        return 30000;
       }
       return false;
     },

skyvern-frontend/src/routes/tasks/list/TaskList.tsx

@@ -1,6 +1,6 @@
 import { client } from "@/api/AxiosClient";
 import { TaskApiResponse } from "@/api/types";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import {
   Table,
   TableBody,
@@ -44,7 +44,7 @@ function TaskList() {
     isError,
     error,
   } = useQuery<Array<TaskApiResponse>>({
-    queryKey: ["tasks", page],
+    queryKey: ["tasks", "all", page],
     queryFn: async () => {
       return client
         .get("/tasks", {
@@ -55,8 +55,6 @@ function TaskList() {
         })
         .then((response) => response.data);
     },
-    refetchInterval: 3000,
-    placeholderData: keepPreviousData,
   });
 
   if (isError) {

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

@@ -56,7 +56,7 @@ function LatestScreenshot({ id }: Props) {
 
       return Promise.reject("No screenshots found");
     },
-    refetchInterval: 2000,
+    refetchInterval: 5000,
     placeholderData: keepPreviousData,
   });
 

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

@@ -1,6 +1,6 @@
 import { client } from "@/api/AxiosClient";
 import { Status, TaskApiResponse } from "@/api/types";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { basicTimeFormat } from "@/util/timeFormat";
 import {
   Table,
@@ -16,12 +16,16 @@ import { StatusBadge } from "@/components/StatusBadge";
 function QueuedTasks() {
   const navigate = useNavigate();
   const { data: tasks } = useQuery<Array<TaskApiResponse>>({
-    queryKey: ["tasks"],
+    queryKey: ["tasks", "queued"],
     queryFn: async () => {
-      return client.get("/tasks").then((response) => response.data);
+      return client
+        .get("/tasks", {
+          params: {
+            task_status: "queued",
+          },
+        })
+        .then((response) => response.data);
     },
-    refetchInterval: 3000,
-    placeholderData: keepPreviousData,
   });
 
   const queuedTasks = tasks

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

@@ -1,7 +1,7 @@
 import { client } from "@/api/AxiosClient";
-import { Status, TaskApiResponse } from "@/api/types";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { TaskApiResponse } from "@/api/types";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
 import {
   Card,
   CardContent,
@@ -10,33 +10,25 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { PAGE_SIZE } from "../constants";
 import { basicTimeFormat } from "@/util/timeFormat";
 import { LatestScreenshot } from "./LatestScreenshot";
 
 function RunningTasks() {
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
 
-  const { data: tasks } = useQuery<Array<TaskApiResponse>>({
-    queryKey: ["tasks", page],
+  const { data: runningTasks } = useQuery<Array<TaskApiResponse>>({
+    queryKey: ["tasks", "running"],
     queryFn: async () => {
       return client
         .get("/tasks", {
           params: {
-            page: 1,
-            page_size: PAGE_SIZE,
+            task_status: "running",
           },
         })
         .then((response) => response.data);
     },
-    refetchInterval: 3000,
-    placeholderData: keepPreviousData,
   });
 
-  const runningTasks = tasks?.filter((task) => task.status === Status.Running);
-
   if (runningTasks?.length === 0) {
     return <div>No running tasks</div>;
   }