perf: cache TRPC queries in /event-types/[eventTypeId] RSC (#21401)

* cache /event-types details page

* fix

apps/web/app/(use-page-wrapper)/event-types/[type]/page.tsx

@@ -1,6 +1,7 @@
-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 } from "app/_utils";
+import { unstable_cache } from "next/cache";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 import { z } from "zod";
@@ -30,6 +31,15 @@ export const generateMetadata = async () => {
   );
 };
 
+const getCachedEventType = unstable_cache(
+  async (eventTypeId: number, headers: ReadonlyHeaders, cookies: ReadonlyRequestCookies) => {
+    const caller = await createRouterCaller(eventTypesRouter, await getTRPCContext(headers, cookies));
+    return await caller.get({ id: eventTypeId });
+  },
+  ["viewer.eventTypes.get"],
+  { revalidate: 3600 } // Cache for 1 hour
+);
+
 const ServerPage = async ({ params }: PageProps) => {
   const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
   if (!session?.user?.id) {
@@ -41,8 +51,10 @@ const ServerPage = async ({ params }: PageProps) => {
     throw new Error("Invalid Event Type id");
   }
   const eventTypeId = parsed.data.type;
-  const caller = await createRouterCaller(eventTypesRouter);
-  const data = await caller.get({ id: eventTypeId });
+  const _headers = await headers();
+  const _cookies = await cookies();
+
+  const data = await getCachedEventType(eventTypeId, _headers, _cookies);
   if (!data?.eventType) {
     throw new Error("This event type does not exist");
   }