refactor: replace serverdata with suspense query (#1265)

* refactor: replace serverdata with suspense query

* fix: deepsource issues

packages/widgets/src/health-monitoring/component.tsx

@@ -17,7 +17,7 @@ import {
   Text,
   Tooltip,
 } from "@mantine/core";
-import { useDisclosure, useElementSize, useListState } from "@mantine/hooks";
+import { useDisclosure, useElementSize } from "@mantine/hooks";
 import {
   IconBrain,
   IconClock,
@@ -30,19 +30,27 @@ import {
   IconVersions,
 } from "@tabler/icons-react";
 
+import { clientApi } from "@homarr/api/client";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { NoIntegrationSelectedError } from "../errors";
 
-export default function HealthMonitoringWidget({
-  options,
-  integrationIds,
-  serverData,
-}: WidgetComponentProps<"healthMonitoring">) {
+export default function HealthMonitoringWidget({ options, integrationIds }: WidgetComponentProps<"healthMonitoring">) {
   const t = useI18n();
-  const [healthData] = useListState(serverData?.initialData ?? []);
+  const [healthData] = clientApi.widget.healthMonitoring.getHealthStatus.useSuspenseQuery(
+    {
+      integrationIds,
+    },
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      retry: false,
+      select: (data) => data.filter((health) => health !== null),
+    },
+  );
   const [opened, { open, close }] = useDisclosure(false);
 
   if (integrationIds.length === 0) {

packages/widgets/src/health-monitoring/index.ts

@@ -3,7 +3,7 @@ import { IconHeartRateMonitor, IconServerOff } from "@tabler/icons-react";
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
-export const { definition, componentLoader, serverDataLoader } = createWidgetDefinition("healthMonitoring", {
+export const { definition, componentLoader } = createWidgetDefinition("healthMonitoring", {
   icon: IconHeartRateMonitor,
   options: optionsBuilder.from((factory) => ({
     fahrenheit: factory.switch({
@@ -26,6 +26,4 @@ export const { definition, componentLoader, serverDataLoader } = createWidgetDef
       message: (t) => t("widget.healthMonitoring.error.internalServerError"),
     },
   },
-})
-  .withServerData(() => import("./serverData"))
-  .withDynamicImport(() => import("./component"));
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/health-monitoring/serverData.ts

@@ -1,27 +0,0 @@
-"use server";
-
-import { api } from "@homarr/api/server";
-
-import type { WidgetProps } from "../definition";
-
-export default async function getServerDataAsync({ integrationIds }: WidgetProps<"healthMonitoring">) {
-  if (integrationIds.length === 0) {
-    return {
-      initialData: [],
-    };
-  }
-
-  try {
-    const currentHealthInfo = await api.widget.healthMonitoring.getHealthStatus({
-      integrationIds,
-    });
-
-    return {
-      initialData: currentHealthInfo.filter((health) => health !== null),
-    };
-  } catch {
-    return {
-      initialData: [],
-    };
-  }
-}