fix(widgets): add per-widget refetchIntervalSeconds to WidgetDefinition

The v1.69.0 caching refactor replaced Redis pub/sub push with a global 30s client-side refetchInterval. This caused fast-refresh widgets like health-monitoring (Dashdot, 5s) to only update every 30s. Adds refetchIntervalSeconds field to WidgetDefinition. Each widget declares its own refresh rate alongside its other config. The TRPC provider iterates all widget definitions and calls setQueryDefaults with the widget's queryKey (or auto-derived from widget kind). Widgets whose kind doesn't match their tRPC path set queryKey explicitly (e.g. dnsHoleSummary -> widget.dnsHole, systemResources -> widget.healthMonitoring). Beszel already does this for cache sharing. Removed inline refetchInterval from docker widget component since it's now on the definition. Fixes #6268
2026-07-15 11:29:24 +02:00
1 parent a0034b2cfc
commit 789e71096e
@@ -2,6 +2,7 @@

 import type { PropsWithChildren } from "react";
 import { useState } from "react";
+import type { QueryKey } from "@tanstack/react-query";
 import { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
@@ -33,6 +34,7 @@ import {
 import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
 import { env } from "@homarr/common/env";
 import { showWarningNotification } from "@homarr/notifications";
+import { widgetImports } from "@homarr/widgets";

 import { createWidgetQueryPersister } from "./query-cache-persister";

@@ -90,6 +92,12 @@ export function TRPCReactProvider(props: PropsWithChildren) {
      },
    });
    client.setQueryDefaults([["widget"]], { refetchInterval: queryCacheDefaultRefetchIntervalMs });
+    for (const { definition } of Object.values(widgetImports)) {
+      const def = definition as { refetchIntervalSeconds?: number; queryKey?: QueryKey; kind: string };
+      if (!def.refetchIntervalSeconds) continue;
+      const key = def.queryKey ?? [["widget", def.kind]];
+      client.setQueryDefaults(key, { refetchInterval: def.refetchIntervalSeconds * 1000 });
+    }
    return client;
  });

@@ -5,6 +5,8 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("anchorNote", {
  icon: IconNotes,
+  queryKey: [["widget", "anchorNotes"]],
+  refetchIntervalSeconds: 15,
  supportedIntegrations: ["anchor"],
  createOptions() {
    return optionsBuilder.from((factory) => ({
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("archiveTeamWarrior", {
  icon: IconArchive,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      showBroadcastMessage: factory.switch({
@@ -14,6 +14,7 @@ const hideUnlessAudiobookshelf = {

 export const { definition, componentLoader } = createWidgetDefinition("audioStats", {
  icon: IconHeadphones,
+  refetchIntervalSeconds: 600,
  supportedIntegrations: ["navidrome", "audiobookshelf"],
  integrationsRequired: true,
  maxIntegrations: 1,
@@ -9,6 +9,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("calendar", {
  icon: IconCalendar,
+  refetchIntervalSeconds: 60,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      releaseType: factory.multiSelect({
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("coolify", {
  icon: IconCloud,
+  refetchIntervalSeconds: 30,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      showServers: factory.switch({
@@ -70,6 +70,7 @@ export const createWidgetDefinition = <TKind extends WidgetKind, TDefinition ext
 export interface WidgetDefinition {
  icon: TablerIcon;
  queryKey?: QueryKey;
+  refetchIntervalSeconds?: number;
  supportedIntegrations?: IntegrationKind[];
  integrationsRequired?: boolean;
  maxIntegrations?: number;
@@ -9,6 +9,8 @@ export const widgetKind = "dnsHoleControls";

 export const { definition, componentLoader } = createWidgetDefinition(widgetKind, {
  icon: IconDeviceGamepad,
+  queryKey: [["widget", "dnsHole"]],
+  refetchIntervalSeconds: 5,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      showToggleAllButtons: factory.switch({
@@ -9,6 +9,8 @@ export const widgetKind = "dnsHoleSummary";

 export const { definition, componentLoader } = createWidgetDefinition(widgetKind, {
  icon: IconAd,
+  queryKey: [["widget", "dnsHole"]],
+  refetchIntervalSeconds: 5,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      usePiHoleColors: factory.switch({
@@ -188,9 +188,7 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
    data,
    refetch,
    isFetching,
-  } = clientApi.docker.getContainers.useQuery(undefined, {
-    refetchInterval: 30_000,
-  });
+  } = clientApi.docker.getContainers.useQuery(undefined, {});
  const containers = data?.containers ?? [];
  const timestamp = useMemo(() => data?.timestamp ?? new Date(), [data?.timestamp]);
  const relativeTime = useTimeAgo(timestamp);
@@ -26,6 +26,7 @@ const columnTranslationKeyMap = {
 export const { definition, componentLoader } = createWidgetDefinition("dockerContainers", {
  icon: IconBrandDocker,
  queryKey: [["docker", "getContainers"]],
+  refetchIntervalSeconds: 20,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      columns: factory.multiSelect({
@@ -33,6 +33,7 @@ const columnsSort = columnsList.filter((column) =>

 export const { definition, componentLoader } = createWidgetDefinition("downloads", {
  icon: IconDownload,
+  refetchIntervalSeconds: 5,
  createOptions() {
    return optionsBuilder.from(
      (factory) => ({
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("firewall", {
  icon: IconWall,
+  refetchIntervalSeconds: 5,
  createOptions() {
    return optionsBuilder.from(() => ({}));
  },
@@ -8,6 +8,7 @@ import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options

 export const { definition, componentLoader } = createWidgetDefinition("healthMonitoring", {
  icon: IconHeartRateMonitor,
+  refetchIntervalSeconds: 5,
  createOptions() {
    return optionsBuilder.from(
      (factory) => ({
@@ -8,6 +8,8 @@ import { optionsBuilder } from "../../options";

 export const { definition, componentLoader } = createWidgetDefinition("immich-albumCarousel", {
  icon: IconPhoto,
+  queryKey: [["widget", "immich"]],
+  refetchIntervalSeconds: 900,
  supportedIntegrations: ["immich"],
  integrationsRequired: true,
  createOptions() {
@@ -5,6 +5,8 @@ import { optionsBuilder } from "../../options";

 export const { definition, componentLoader } = createWidgetDefinition("immich-serverStats", {
  icon: IconGraphFilled,
+  queryKey: [["widget", "immich"]],
+  refetchIntervalSeconds: 900,
  supportedIntegrations: ["immich"],
  integrationsRequired: true,
  createOptions() {
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
  icon: IconReportSearch,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      openIndexerSiteInNewTab: factory.switch({
@@ -5,6 +5,8 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("mediaReleases", {
  icon: IconTicket,
+  queryKey: [["widget", "mediaRelease"]],
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      layout: factory.select({
@@ -8,6 +8,8 @@ import { optionsBuilder } from "../../options";

 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestList", {
  icon: IconZoomQuestion,
+  queryKey: [["widget", "mediaRequests"]],
+  refetchIntervalSeconds: 60,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      linksTargetNewTab: factory.switch({
@@ -7,6 +7,8 @@ import { createWidgetDefinition } from "../../definition";

 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestStats", {
  icon: IconChartBar,
+  queryKey: [["widget", "mediaRequests"]],
+  refetchIntervalSeconds: 60,
  createOptions() {
    return {};
  },
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";

 export const { componentLoader, definition } = createWidgetDefinition("mediaServer", {
  icon: IconVideo,
+  refetchIntervalSeconds: 5,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      showOnlyPlaying: factory.switch({ defaultValue: true, withDescription: true }),
@@ -11,6 +11,7 @@ export const views = ["workers", "queue", "statistics"] as const;

 export const { componentLoader, definition } = createWidgetDefinition("mediaTranscoding", {
  icon: IconTransform,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      defaultView: factory.select({
@@ -6,6 +6,7 @@ import { optionsBuilder } from "../../options";

 export const { componentLoader, definition } = createWidgetDefinition("minecraftServerStatus", {
  icon: IconBrandMinecraft,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      title: factory.text({ defaultValue: "" }),
@@ -7,6 +7,8 @@ import { optionsBuilder } from "../../options";

 export const { definition, componentLoader } = createWidgetDefinition("networkControllerStatus", {
  icon: IconTopologyFull,
+  queryKey: [["widget", "networkController"]],
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      content: factory.select({
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../../options";

 export const { definition, componentLoader } = createWidgetDefinition("networkControllerSummary", {
  icon: IconTopologyFull,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from(() => ({}));
  },
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";

 export const { componentLoader, definition } = createWidgetDefinition("notifications", {
  icon: IconMessage,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      hideLogos: factory.switch({ defaultValue: false }),
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("paperlessNgx", {
  icon: IconFileText,
+  refetchIntervalSeconds: 900,
  supportedIntegrations: ["paperlessNgx"],
  integrationsRequired: true,
  createOptions() {
@@ -14,6 +14,7 @@ const relativeDateSchema = z

 export const { definition, componentLoader } = createWidgetDefinition("releases", {
  icon: IconRocket,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      newReleaseWithin: factory.text({
@@ -12,6 +12,7 @@ import { optionsBuilder } from "../options";
 */
 export const { definition, componentLoader } = createWidgetDefinition("rssFeed", {
  icon: IconRss,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      feedUrls: factory.multiText({
@@ -7,6 +7,8 @@ import { optionsBuilder } from "../../options";

 export const { definition, componentLoader } = createWidgetDefinition("smartHome-entityState", {
  icon: IconBinaryTree,
+  queryKey: [["widget", "smartHome"]],
+  refetchIntervalSeconds: 60,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      entityId: factory.text({
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("speedtestTracker", {
  icon: IconSpeedboat,
+  refetchIntervalSeconds: 600,
  createOptions() {
    return optionsBuilder.from(
      (factory) => ({
@@ -13,6 +13,7 @@ const timeIntervalOptions = stockPriceTimeFrames.interval;

 export const { definition, componentLoader } = createWidgetDefinition("stockPrice", {
  icon: IconBuildingBank,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      stock: factory.text({
@@ -6,6 +6,8 @@ import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options

 export const { definition, componentLoader } = createWidgetDefinition("systemDisks", {
  icon: IconServer2,
+  queryKey: [["widget", "healthMonitoring"]],
+  refetchIntervalSeconds: 5,
  supportedIntegrations: ["dashDot", "openmediavault", "truenas", "unraid", "synology"],
  createOptions() {
    return optionsBuilder.from(
@@ -14,6 +14,8 @@ const labelDisplayModeOptions = {

 export const { definition, componentLoader } = createWidgetDefinition("systemResources", {
  icon: IconGraphFilled,
+  queryKey: [["widget", "healthMonitoring"]],
+  refetchIntervalSeconds: 5,
  supportedIntegrations: ["dashDot", "openmediavault", "truenas", "unraid", "glances", "synology"],
  createOptions() {
    return optionsBuilder.from((factory) => ({
@@ -8,6 +8,7 @@ import { optionsBuilder } from "../options";

 export const { componentLoader, definition } = createWidgetDefinition("timetable", {
  icon: IconBusStop,
+  refetchIntervalSeconds: 60,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      baseUrl: factory.text({
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("tracearr", {
  icon: IconActivityHeartbeat,
+  refetchIntervalSeconds: 5,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      showStreams: factory.switch({
@@ -8,6 +8,7 @@ export const timeFrameValues = ["today", "24h", "7d", "30d", "month", "lastMonth

 export const { definition, componentLoader } = createWidgetDefinition("umami", {
  icon: IconChartBar,
+  refetchIntervalSeconds: 300,
  supportedIntegrations: ["umami"],
  createOptions() {
    return optionsBuilder.from(
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("ups", {
  icon: IconBatteryCharging,
+  refetchIntervalSeconds: 60,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      showBattery: factory.switch({
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("uptimeKuma", {
  icon: IconHeartbeat,
+  refetchIntervalSeconds: 60,
  createOptions() {
    return optionsBuilder.from((factory) => ({
      showAverageUptime: factory.switch({
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";

 export const { componentLoader, definition } = createWidgetDefinition("vpn", {
  icon: IconShieldLock,
+  refetchIntervalSeconds: 300,
  createOptions() {
    return optionsBuilder.from(() => ({}));
  },
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("weather", {
  icon: IconCloud,
+  refetchIntervalSeconds: 60,
  createOptions() {
    return optionsBuilder.from(
      (factory) => ({