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

packages/api/package.json

@@ -41,9 +41,11 @@
     "@homarr/server-settings": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@kubernetes/client-node": "^1.1.2",
+    "@tanstack/react-query": "^5.75.1",
     "@trpc/client": "^11.1.2",
     "@trpc/react-query": "^11.1.2",
     "@trpc/server": "^11.1.2",
+    "@trpc/tanstack-react-query": "^11.1.2",
     "lodash.clonedeep": "^4.5.0",
     "next": "15.3.1",
     "react": "19.1.0",

packages/api/src/server.ts

@@ -1,9 +1,12 @@
 import { cache } from "react";
 import { headers } from "next/headers";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 
-import { createCaller, createTRPCContext } from "@homarr/api";
+import { appRouter, createCaller, createTRPCContext } from "@homarr/api";
 import { auth } from "@homarr/auth/next";
 
+import { makeQueryClient } from "./shared";
+
 /**
  * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
  * handling a tRPC call from a React Server Component.
@@ -19,3 +22,12 @@ const createContext = cache(async () => {
 });
 
 export const api = createCaller(createContext);
+
+// IMPORTANT: Create a stable getter for the query client that
+//            will return the same client during the same request.
+export const getQueryClient = cache(makeQueryClient);
+export const trpc = createTRPCOptionsProxy({
+  ctx: createContext,
+  router: appRouter,
+  queryClient: getQueryClient,
+});

packages/api/src/shared.ts

@@ -1,3 +1,5 @@
+import { defaultShouldDehydrateQuery, QueryClient } from "@tanstack/react-query";
+
 /**
  * Creates a headers callback for a given source
  * It will set the x-trpc-source header and cookies if needed
@@ -51,3 +53,16 @@ export const trpcPath = "/api/trpc";
 export function getTrpcUrl() {
   return `${getBaseUrl()}${trpcPath}`;
 }
+
+export const makeQueryClient = () => {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 5 * 1000,
+      },
+      dehydrate: {
+        shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === "pending",
+      },
+    },
+  });
+};