Browse Source

Fix File Watcher and Task Processing status not updating after start/stop

- Set staleTime and gcTime to 0 to prevent caching issues
- Use direct refetch() instead of invalidateQueries for immediate updates
- Await refetch in onSuccess to ensure UI updates before showing toast
- Applies to both FileWatcherCard and TaskProcessingCard
- Fixes issue where status showed success toast but UI didn't change
Timothy Pomeroy 3 tuần trước cách đây
mục cha
commit
026fa16b96

+ 4 - 1
apps/web/src/app/components/ApiHealth.tsx

@@ -62,7 +62,10 @@ export default function ApiHealth() {
       } catch (error) {
         if (attempts < maxAttempts) {
           // Try again with exponential backoff
-          setTimeout(checkHealth, Math.min(1000 * Math.pow(1.5, attempts), 10000));
+          setTimeout(
+            checkHealth,
+            Math.min(1000 * Math.pow(1.5, attempts), 10000)
+          );
         } else {
           setIsRestarting(false);
           toast.error("Failed to reconnect to API service");

+ 13 - 11
apps/web/src/app/components/FileWatcherCard.tsx

@@ -7,9 +7,15 @@ import Card from "./Card";
 export default function FileWatcherCard() {
   const queryClient = useQueryClient();
 
-  const { data: watcherStatus, isLoading: watcherLoading } = useQuery({
+  const {
+    data: watcherStatus,
+    isLoading: watcherLoading,
+    refetch: refetchWatcherStatus,
+  } = useQuery({
     queryKey: ["watcher", "status"],
     queryFn: () => get("/watcher/status"),
+    staleTime: 0, // Always consider data stale
+    gcTime: 0, // Don't cache
   });
 
   const { data: settings, isLoading: settingsLoading } = useQuery({
@@ -19,12 +25,10 @@ export default function FileWatcherCard() {
 
   const startWatcherMutation = useMutation({
     mutationFn: () => post("/watcher/start"),
-    onSuccess: () => {
+    onSuccess: async () => {
       toast.success("File watcher started");
-      queryClient.invalidateQueries({ queryKey: ["watcher", "status"] });
-      setTimeout(() => {
-        queryClient.refetchQueries({ queryKey: ["watcher", "status"] });
-      }, 100);
+      // Force immediate refetch
+      await refetchWatcherStatus();
     },
     onError: () => {
       toast.error("Failed to start file watcher");
@@ -33,12 +37,10 @@ export default function FileWatcherCard() {
 
   const stopWatcherMutation = useMutation({
     mutationFn: () => post("/watcher/stop"),
-    onSuccess: () => {
+    onSuccess: async () => {
       toast.success("File watcher stopped");
-      queryClient.invalidateQueries({ queryKey: ["watcher", "status"] });
-      setTimeout(() => {
-        queryClient.refetchQueries({ queryKey: ["watcher", "status"] });
-      }, 100);
+      // Force immediate refetch
+      await refetchWatcherStatus();
     },
     onError: () => {
       toast.error("Failed to stop file watcher");

+ 16 - 15
apps/web/src/app/components/TaskProcessingCard.tsx

@@ -20,11 +20,16 @@ export default function TaskProcessingCard() {
       queryFn: () => get("/files/stats/processed"),
     });
 
-  const { data: taskProcessingStatus, isLoading: taskProcessingLoading } =
-    useQuery({
-      queryKey: ["tasks", "processing-status"],
-      queryFn: () => get("/tasks/processing-status"),
-    });
+  const {
+    data: taskProcessingStatus,
+    isLoading: taskProcessingLoading,
+    refetch: refetchTaskProcessingStatus,
+  } = useQuery({
+    queryKey: ["tasks", "processing-status"],
+    queryFn: () => get("/tasks/processing-status"),
+    staleTime: 0,
+    gcTime: 0,
+  });
 
   const { data: queueStatus } = useQuery({
     queryKey: ["tasks", "queue", "status"],
@@ -33,12 +38,10 @@ export default function TaskProcessingCard() {
 
   const startTaskProcessingMutation = useMutation({
     mutationFn: () => post("/tasks/start-processing"),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["tasks", "processing-status"],
-      });
-      queryClient.invalidateQueries({ queryKey: ["tasks", "queue", "status"] });
+    onSuccess: async () => {
       toast.success("Task processing started");
+      await refetchTaskProcessingStatus();
+      queryClient.invalidateQueries({ queryKey: ["tasks", "queue", "status"] });
     },
     onError: () => {
       toast.error("Failed to start task processing");
@@ -47,12 +50,10 @@ export default function TaskProcessingCard() {
 
   const stopTaskProcessingMutation = useMutation({
     mutationFn: () => post("/tasks/stop-processing"),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["tasks", "processing-status"],
-      });
-      queryClient.invalidateQueries({ queryKey: ["tasks", "queue", "status"] });
+    onSuccess: async () => {
       toast.success("Task processing stopped");
+      await refetchTaskProcessingStatus();
+      queryClient.invalidateQueries({ queryKey: ["tasks", "queue", "status"] });
     },
     onError: () => {
       toast.error("Failed to stop task processing");