feat(widget): add prefetch for apps and bookmarks (#2895)

packages/widgets/src/app/prefetch.ts

@@ -0,0 +1,23 @@
+import { trpc } from "@homarr/api/server";
+import { db, inArray } from "@homarr/db";
+import { apps } from "@homarr/db/schema";
+import { logger } from "@homarr/log";
+
+import type { Prefetch } from "../definition";
+
+const prefetchAllAsync: Prefetch<"app"> = async (queryClient, items) => {
+  const appIds = items.map((item) => item.options.appId);
+  const distinctAppIds = [...new Set(appIds)];
+
+  const dbApps = await db.query.apps.findMany({
+    where: inArray(apps.id, distinctAppIds),
+  });
+
+  for (const app of dbApps) {
+    queryClient.setQueryData(trpc.app.byId.queryKey({ id: app.id }), app);
+  }
+
+  logger.info(`Successfully prefetched ${dbApps.length} apps for app widget`);
+};
+
+export default prefetchAllAsync;

packages/widgets/src/bookmarks/prefetch.ts

@@ -0,0 +1,30 @@
+import { trpc } from "@homarr/api/server";
+import { db, inArray } from "@homarr/db";
+import { apps } from "@homarr/db/schema";
+import { logger } from "@homarr/log";
+
+import type { Prefetch } from "../definition";
+
+const prefetchAllAsync: Prefetch<"bookmarks"> = async (queryClient, items) => {
+  const appIds = items.flatMap((item) => item.options.items);
+  const distinctAppIds = [...new Set(appIds)];
+
+  const dbApps = await db.query.apps.findMany({
+    where: inArray(apps.id, distinctAppIds),
+  });
+
+  for (const item of items) {
+    if (item.options.items.length === 0) {
+      continue;
+    }
+
+    queryClient.setQueryData(
+      trpc.app.byIds.queryKey(item.options.items),
+      dbApps.filter((app) => item.options.items.includes(app.id)),
+    );
+  }
+
+  logger.info(`Successfully prefetched ${dbApps.length} apps for bookmarks`);
+};
+
+export default prefetchAllAsync;

packages/widgets/src/definition.ts

@@ -1,9 +1,10 @@
 import type { LoaderComponent } from "next/dynamic";
+import type { QueryClient } from "@tanstack/react-query";
 import type { DefaultErrorData } from "@trpc/server/unstable-core-do-not-import";
 
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import type { ServerSettings } from "@homarr/server-settings";
-import type { SettingsContextProps } from "@homarr/settings";
+import type { SettingsContextProps } from "@homarr/settings/creator";
 import type { stringOrTranslation } from "@homarr/translation";
 import type { TablerIcon } from "@homarr/ui";
 
@@ -21,6 +22,15 @@ const createWithDynamicImport =
     componentLoader,
   });
 
+export type PrefetchLoader<TKind extends WidgetKind> = () => Promise<{ default: Prefetch<TKind> }>;
+export type Prefetch<TKind extends WidgetKind> = (
+  queryClient: QueryClient,
+  items: {
+    options: inferOptionsFromCreator<WidgetOptionsRecordOf<TKind>>;
+    integrationIds: string[];
+  }[],
+) => Promise<void>;
+
 export const createWidgetDefinition = <TKind extends WidgetKind, TDefinition extends WidgetDefinition>(
   kind: TKind,
   definition: TDefinition,

packages/widgets/src/index.tsx

@@ -5,7 +5,7 @@ import { Center, Loader as UiLoader } from "@mantine/core";
 
 import { objectEntries } from "@homarr/common";
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
-import type { SettingsContextProps } from "@homarr/settings";
+import type { SettingsContextProps } from "@homarr/settings/creator";
 
 import * as app from "./app";
 import * as bookmarks from "./bookmarks";

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -8,7 +8,7 @@ import { objectEntries } from "@homarr/common";
 import type { WidgetKind } from "@homarr/definitions";
 import { zodResolver } from "@homarr/form";
 import { createModal, useModalAction } from "@homarr/modals";
-import type { SettingsContextProps } from "@homarr/settings";
+import type { SettingsContextProps } from "@homarr/settings/creator";
 import { useI18n } from "@homarr/translation/client";
 import { zodErrorMap } from "@homarr/validation/form/i18n";
 

packages/widgets/src/prefetch.ts

@@ -0,0 +1,45 @@
+import { cache } from "react";
+import type { QueryClient } from "@tanstack/react-query";
+
+import { db } from "@homarr/db";
+import { getServerSettingsAsync } from "@homarr/db/queries";
+import type { WidgetKind } from "@homarr/definitions";
+import { createSettings } from "@homarr/settings/creator";
+
+import { reduceWidgetOptionsWithDefaultValues } from ".";
+import prefetchForApps from "./app/prefetch";
+import prefetchForBookmarks from "./bookmarks/prefetch";
+import type { Prefetch, WidgetOptionsRecordOf } from "./definition";
+import type { inferOptionsFromCreator } from "./options";
+
+const cachedGetServerSettingsAsync = cache(getServerSettingsAsync);
+
+const prefetchCallbacks: Partial<{
+  [TKind in WidgetKind]: Prefetch<TKind>;
+}> = {
+  bookmarks: prefetchForBookmarks,
+  app: prefetchForApps,
+};
+
+export const prefetchForKindAsync = async <TKind extends WidgetKind>(
+  kind: TKind,
+  queryClient: QueryClient,
+  items: {
+    options: inferOptionsFromCreator<WidgetOptionsRecordOf<TKind>>;
+    integrationIds: string[];
+  }[],
+) => {
+  const callback = prefetchCallbacks[kind];
+  if (!callback) {
+    return;
+  }
+
+  const serverSettings = await cachedGetServerSettingsAsync(db);
+
+  const itemsWithDefaultOptions = items.map((item) => ({
+    ...item,
+    options: reduceWidgetOptionsWithDefaultValues(kind, createSettings({ user: null, serverSettings }), item.options),
+  }));
+
+  await callback(queryClient, itemsWithDefaultOptions as never[]);
+};

packages/widgets/src/test/translation.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 
 import { objectEntries } from "@homarr/common";
-import type { SettingsContextProps } from "@homarr/settings";
+import type { SettingsContextProps } from "@homarr/settings/creator";
 import { createLanguageMapping } from "@homarr/translation";
 
 import { widgetImports } from "..";