Fix API Health restart to handle connection loss gracefully

- Add retry logic with exponential backoff to health query
- Invalidate all queries when restart is triggered
- Multiple refetch attempts (3s, 5s, 8s) to reconnect after restart
- Handle onError case as success since server restart is expected to fail
- Prevents site from showing errors during API restart
- Improves reconnection reliability after service restart

apps/web/src/app/components/ApiHealth.tsx

@@ -20,6 +20,8 @@ export default function ApiHealth() {
       return result;
     },
     refetchInterval: 30000, // Check every 30 seconds
+    retry: 3, // Retry failed requests 3 times
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), // Exponential backoff
   });
 
   const restartMutation = useMutation({
@@ -27,13 +29,35 @@ export default function ApiHealth() {
     onSuccess: () => {
       toast.success("API service restarting...");
       setShowRestartConfirm(false);
-      // Retry health check after a delay to see if service is back
+      // Invalidate all queries to prevent stale data
+      queryClient.invalidateQueries();
+      // Retry health check after delays to see if service is back
       setTimeout(() => {
-        queryClient.invalidateQueries({ queryKey: ["api", "health"] });
+        queryClient.refetchQueries({ queryKey: ["api", "health"] });
       }, 3000);
+      setTimeout(() => {
+        queryClient.refetchQueries({ queryKey: ["api", "health"] });
+      }, 5000);
+      setTimeout(() => {
+        queryClient.refetchQueries({ queryKey: ["api", "health"] });
+      }, 8000);
     },
     onError: (error: any) => {
-      toast.error("Failed to restart API service");
+      // Expected to fail since server is restarting
+      toast.success("API service restart initiated...");
+      setShowRestartConfirm(false);
+      // Invalidate all queries to prevent stale data
+      queryClient.invalidateQueries();
+      // Still try to reconnect
+      setTimeout(() => {
+        queryClient.refetchQueries({ queryKey: ["api", "health"] });
+      }, 3000);
+      setTimeout(() => {
+        queryClient.refetchQueries({ queryKey: ["api", "health"] });
+      }, 5000);
+      setTimeout(() => {
+        queryClient.refetchQueries({ queryKey: ["api", "health"] });
+      }, 8000);
     },
   });