refetch less aggressively (#231)

This commit is contained in:
Salih Altun
2024-04-24 21:14:05 +03:00
committed by GitHub
parent 2c4c309523
commit 1d329539e4
6 changed files with 19 additions and 26 deletions

View File

@@ -1,6 +1,5 @@
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO 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) - [Skyvern Frontend](#skyvern-frontend)
- [Development](#development) - [Development](#development)

View File

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

View File

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

View File

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

View File

@@ -1,6 +1,6 @@
import { client } from "@/api/AxiosClient"; import { client } from "@/api/AxiosClient";
import { Status, TaskApiResponse } from "@/api/types"; 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 { basicTimeFormat } from "@/util/timeFormat";
import { import {
Table, Table,
@@ -16,12 +16,16 @@ import { StatusBadge } from "@/components/StatusBadge";
function QueuedTasks() { function QueuedTasks() {
const navigate = useNavigate(); const navigate = useNavigate();
const { data: tasks } = useQuery<Array<TaskApiResponse>>({ const { data: tasks } = useQuery<Array<TaskApiResponse>>({
queryKey: ["tasks"], queryKey: ["tasks", "queued"],
queryFn: async () => { 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 const queuedTasks = tasks

View File

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