perf: use repository for apiKeys list query & caching in /settings/developer/api-keys RSC (#21776)

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/api-keys/actions.ts

@@ -1,7 +1,7 @@
 "use server";
 
-import { revalidatePath } from "next/cache";
+import { revalidateTag } from "next/cache";
 
 export async function revalidateApiKeysList() {
-  revalidatePath("/settings/developer/api-keys");
+  revalidateTag("viewer.apiKeys.list");
 }

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/api-keys/page.tsx

@@ -1,8 +1,13 @@
-import { createRouterCaller } from "app/_trpc/context";
 import { _generateMetadata } from "app/_utils";
+import { unstable_cache } from "next/cache";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { APP_NAME } from "@calcom/lib/constants";
-import { apiKeysRouter } from "@calcom/trpc/server/routers/viewer/apiKeys/_router";
+import { ApiKeyRepository } from "@calcom/lib/server/repository/apiKey";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
 import ApiKeysView from "~/settings/developer/api-keys-view";
 
@@ -15,9 +20,24 @@ export const generateMetadata = async () =>
     "/settings/developer/api-keys"
   );
 
+const getCachedApiKeys = unstable_cache(
+  async (userId: number) => {
+    return await ApiKeyRepository.findApiKeysFromUserId({ userId });
+  },
+  undefined,
+  { revalidate: 3600, tags: ["viewer.apiKeys.list"] } // Cache for 1 hour
+);
+
 const Page = async () => {
-  const caller = await createRouterCaller(apiKeysRouter);
-  const apiKeys = await caller.list();
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session) {
+    redirect("/auth/login?callbackUrl=/settings/developer/api-keys");
+  }
+
+  const userId = session.user.id;
+  const apiKeys = await getCachedApiKeys(userId);
+
   return <ApiKeysView apiKeys={apiKeys} />;
 };
 

packages/lib/server/repository/apiKey.ts

@@ -0,0 +1,22 @@
+import prisma from "@calcom/prisma";
+
+export class ApiKeyRepository {
+  static async findApiKeysFromUserId({ userId }: { userId: number }) {
+    return await prisma.apiKey.findMany({
+      where: {
+        userId,
+        OR: [
+          {
+            NOT: {
+              appId: "zapier",
+            },
+          },
+          {
+            appId: null,
+          },
+        ],
+      },
+      orderBy: { createdAt: "desc" },
+    });
+  }
+}

packages/trpc/server/routers/viewer/apiKeys/list.handler.ts

@@ -1,4 +1,4 @@
-import prisma from "@calcom/prisma";
+import { ApiKeyRepository } from "@calcom/lib/server/repository/apiKey";
 
 import type { TrpcSessionUser } from "../../../types";
 
@@ -9,20 +9,5 @@ type ListOptions = {
 };
 
 export const listHandler = async ({ ctx }: ListOptions) => {
-  return await prisma.apiKey.findMany({
-    where: {
-      userId: ctx.user.id,
-      OR: [
-        {
-          NOT: {
-            appId: "zapier",
-          },
-        },
-        {
-          appId: null,
-        },
-      ],
-    },
-    orderBy: { createdAt: "desc" },
-  });
+  return ApiKeyRepository.findApiKeysFromUserId({ userId: ctx.user.id });
 };