perf: cache TRPC queries in /event-types RSC (#21381)

* improve trpc funcs

* cache /event-types

* remove unused code

* add comments

* add keys

* improve typing

apps/web/app/(use-page-wrapper)/(main-nav)/event-types/page.tsx

@@ -1,7 +1,8 @@
 import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
-import { createRouterCaller } from "app/_trpc/context";
-import type { PageProps } from "app/_types";
+import { createRouterCaller, getTRPCContext } from "app/_trpc/context";
+import type { PageProps, ReadonlyHeaders, ReadonlyRequestCookies } from "app/_types";
 import { _generateMetadata, getTranslate } from "app/_utils";
+import { unstable_cache } from "next/cache";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 
@@ -23,9 +24,40 @@ export const generateMetadata = async () =>
     "/event-types"
   );
 
+const getCachedMe = unstable_cache(
+  async (headers: ReadonlyHeaders, cookies: ReadonlyRequestCookies) => {
+    const meCaller = await createRouterCaller(meRouter, await getTRPCContext(headers, cookies));
+    return await meCaller.get();
+  },
+  ["viewer.me.get"],
+  { revalidate: 3600 } // seconds
+);
+
+const getCachedEventGroups = unstable_cache(
+  async (
+    headers: ReadonlyHeaders,
+    cookies: ReadonlyRequestCookies,
+    filters?: {
+      teamIds?: number[] | undefined;
+      userIds?: number[] | undefined;
+      upIds?: string[] | undefined;
+    }
+  ) => {
+    const eventTypesCaller = await createRouterCaller(
+      eventTypesRouter,
+      await getTRPCContext(headers, cookies)
+    );
+    return await eventTypesCaller.getUserEventGroups({ filters });
+  },
+  ["viewer.eventTypes.getUserEventGroups"],
+  { revalidate: 3600 } // seconds
+);
+
 const Page = async ({ params, searchParams }: PageProps) => {
   const _searchParams = await searchParams;
-  const context = buildLegacyCtx(await headers(), await cookies(), await params, _searchParams);
+  const _headers = await headers();
+  const _cookies = await cookies();
+  const context = buildLegacyCtx(_headers, _cookies, await params, _searchParams);
   const session = await getServerSession({ req: context.req });
 
   if (!session?.user?.id) {
@@ -34,15 +66,9 @@ const Page = async ({ params, searchParams }: PageProps) => {
 
   const t = await getTranslate();
   const filters = getTeamsFiltersFromQuery(_searchParams);
-
-  const [meCaller, eventTypesCaller] = await Promise.all([
-    createRouterCaller(meRouter),
-    createRouterCaller(eventTypesRouter),
-  ]);
-
   const [me, userEventGroupsData] = await Promise.all([
-    meCaller.get(),
-    eventTypesCaller.getUserEventGroups({ filters }),
+    getCachedMe(_headers, _cookies),
+    getCachedEventGroups(_headers, _cookies, filters),
   ]);
 
   return (
@@ -56,4 +82,3 @@ const Page = async ({ params, searchParams }: PageProps) => {
 };
 
 export default Page;
-export const revalidate = 3600; // 1 hour in seconds

apps/web/app/_trpc/context.ts

@@ -1,20 +1,22 @@
+import type { ReadonlyHeaders, ReadonlyRequestCookies } from "app/_types";
 import { cookies, headers } from "next/headers";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { createContext } from "@calcom/trpc/server/createContext";
 import { createCallerFactory } from "@calcom/trpc/server/trpc";
+import type { TRPCContext } from "@calcom/trpc/types/server/createContext";
 
 import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
 import type { AnyRouter } from "@trpc/server";
 
-const getTRPCContext = async () => {
-  const legacyReq = buildLegacyRequest(await headers(), await cookies());
+export const getTRPCContext = async (_headers?: ReadonlyHeaders, _cookies?: ReadonlyRequestCookies) => {
+  const legacyReq = buildLegacyRequest(_headers ?? (await headers()), _cookies ?? (await cookies()));
   return await createContext({ req: legacyReq, res: {} as any }, getServerSession);
 };
 
-export async function createRouterCaller<TRouter extends AnyRouter>(router: TRouter) {
-  const trpcContext = await getTRPCContext();
+export async function createRouterCaller<TRouter extends AnyRouter>(router: TRouter, context?: TRPCContext) {
+  const trpcContext = context ? context : await getTRPCContext();
   const createCaller = createCallerFactory<TRouter>(router);
   return createCaller(trpcContext);
 }

apps/web/app/_types.ts

@@ -12,3 +12,6 @@ export type PageProps = {
 };
 
 export type LayoutProps = { params: Promise<Params>; children: React.ReactElement };
+
+export { type ReadonlyHeaders } from "next/dist/server/web/spec-extension/adapters/headers";
+export { type ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies";