From 80d61f542815e8f39a83049b9e058697d6bb662e Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Wed, 10 Jun 2026 18:45:08 +0200
Subject: [PATCH] refactor(widgets): migrate Beszel widgets from
 useSuspenseQuery to useQuery

Convert all 4 Beszel widget components to use useQuery with staleTime
instead of useSuspenseQuery with refetchOnMount, matching the query
cache persistence pattern from PR #5811.
---
 .../widgets/src/beszel-alerts/component.tsx   | 13 +++++++-----
 .../src/beszel-system-grid/component.tsx      |  5 ++++-
 .../src/beszel-system-stats/component.tsx     | 20 ++++++++++++-------
 .../src/beszel-system-table/component.tsx     |  5 ++++-
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index 167b2ce1d..1048ebdae 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -36,11 +36,14 @@ export default function BeszelAlertsWidget({
   isEditMode,
 }: WidgetComponentProps<"beszelAlerts">) {
   const t = useScopedI18n("widget.beszelAlerts");
-  const [results] = clientApi.widget.beszel.getAlerts.useSuspenseQuery({
-    integrationIds,
-    includeHistory: options.showHistory,
-    maxHistoryItems: options.maxHistoryItems,
-  });
+  const { data: results = [] } = clientApi.widget.beszel.getAlerts.useQuery(
+    {
+      integrationIds,
+      includeHistory: options.showHistory,
+      maxHistoryItems: options.maxHistoryItems,
+    },
+    { staleTime: 30 * 1000 },
+  );
   const utils = clientApi.useUtils();
 
   clientApi.widget.beszel.subscribeAlerts.useSubscription(
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index f0a7c1ee0..6bdb7a139 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -344,7 +344,10 @@ export default function BeszelSystemGridWidget({
   height,
 }: WidgetComponentProps<"beszelSystemGrid">) {
   const t = useScopedI18n("widget.beszelSystemGrid");
-  const [results] = clientApi.widget.beszel.getSystems.useSuspenseQuery({ integrationIds });
+  const { data: results = [] } = clientApi.widget.beszel.getSystems.useQuery(
+    { integrationIds },
+    { staleTime: 30 * 1000 },
+  );
 
   useBeszelSystemsSubscription(integrationIds, !isEditMode);
   const filteredSystems = useBeszelFilteredSystems(results, options.statusFilter);
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index 99ee0f732..73715839e 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -39,7 +39,10 @@ export default function BeszelSystemStatsWidget({
   width,
 }: WidgetComponentProps<"beszelSystemStats">) {
   const t = useScopedI18n("widget.beszelSystemStats");
-  const [systemsResult] = clientApi.widget.beszel.getSystems.useSuspenseQuery({ integrationIds });
+  const { data: systemsResult = [] } = clientApi.widget.beszel.getSystems.useQuery(
+    { integrationIds },
+    { staleTime: 30 * 1000 },
+  );
 
   const systems = useMemo(
     () => systemsResult.flatMap((r) => r.systems.map((s) => ({ value: s.id, label: s.name }))),
@@ -50,12 +53,15 @@ export default function BeszelSystemStatsWidget({
 
   const showDocker = options.showDockerCpu || options.showDockerMemory || options.showDockerNetwork;
 
-  const [statsResult] = clientApi.widget.beszel.getSystemStats.useSuspenseQuery({
-    integrationIds,
-    systemId: selectedSystem ?? systems[0]?.value ?? "",
-    timePeriod: options.timePeriod as "1h" | "12h" | "24h" | "1w" | "30d",
-    includeDocker: showDocker,
-  });
+  const { data: statsResult } = clientApi.widget.beszel.getSystemStats.useQuery(
+    {
+      integrationIds,
+      systemId: selectedSystem ?? systems[0]?.value ?? "",
+      timePeriod: options.timePeriod as "1h" | "12h" | "24h" | "1w" | "30d",
+      includeDocker: showDocker,
+    },
+    { staleTime: 30 * 1000 },
+  );
 
   // BeszelSystemStats fields are documented in beszel-types.ts.
   // mu/du = bytes, dr/dw = bytes/s, b = public bandwidth [sent,recv] bytes/s, ns/nr = all-interface bytes/s
diff --git a/packages/widgets/src/beszel-system-table/component.tsx b/packages/widgets/src/beszel-system-table/component.tsx
index 1422ccce9..bb306d8f9 100644
--- a/packages/widgets/src/beszel-system-table/component.tsx
+++ b/packages/widgets/src/beszel-system-table/component.tsx
@@ -54,7 +54,10 @@ export default function BeszelSystemTableWidget({
   width,
 }: WidgetComponentProps<"beszelSystemTable">) {
   const t = useScopedI18n("widget.beszelSystemTable");
-  const [results] = clientApi.widget.beszel.getSystems.useSuspenseQuery({ integrationIds });
+  const { data: results = [] } = clientApi.widget.beszel.getSystems.useQuery(
+    { integrationIds },
+    { staleTime: 30 * 1000 },
+  );
   const size = getSizeConfig(width);
 
   useBeszelSystemsSubscription(integrationIds, !isEditMode);