From cc8d004aa45f842f8cb415612158abd60919925f Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Fri, 8 Nov 2024 16:53:56 -0700
Subject: [PATCH] using batching to mitigate startup request cost

---
 nextjs/src/app/api/trpc/[trpc]/route.ts     |  2 +-
 nextjs/src/app/layout.tsx                   | 11 +++++++++--
 nextjs/src/app/providersQueryClientUtils.ts |  2 +-
 nextjs/src/services/trpc/TrpcProvider.tsx   | 11 +++--------
 nextjs/src/services/utils/queryClient.tsx   | 21 ---------------------
 5 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/nextjs/src/app/api/trpc/[trpc]/route.ts b/nextjs/src/app/api/trpc/[trpc]/route.ts
index f76a8e6..ab28aca 100644
--- a/nextjs/src/app/api/trpc/[trpc]/route.ts
+++ b/nextjs/src/app/api/trpc/[trpc]/route.ts
@@ -2,7 +2,7 @@ import { createTrpcContext } from "@/services/trpc/context";
 import { trpcAppRouter } from "@/services/trpc/router/app";
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 
-const handler = (request: Request) => {
+const handler = async (request: Request) => {
   return fetchRequestHandler({
     endpoint: "/api/trpc",
     req: request,
diff --git a/nextjs/src/app/layout.tsx b/nextjs/src/app/layout.tsx
index bb34528..b8cbcfe 100644
--- a/nextjs/src/app/layout.tsx
+++ b/nextjs/src/app/layout.tsx
@@ -52,6 +52,13 @@ async function DataHydration({
     router: trpcAppRouter,
     ctx: createTrpcContext(),
     transformer: superjson,
+    queryClientConfig: {
+      defaultOptions: {
+        queries: {
+          staleTime: Infinity,
+        },
+      },
+    },
   });
   const allSettings = await fileStorageService.settings.getAllCoursesSettings();
   await Promise.all(
@@ -63,7 +70,7 @@ async function DataHydration({
       await Promise.all(
         moduleNames.map(
           async (moduleName) =>
-            await trpcHelper.assignment.getAllAssignments.prefetch({
+            await trpcHelper.assignment.getAllAssignments.fetch({
               courseName,
               moduleName,
             })
@@ -75,7 +82,7 @@ async function DataHydration({
   await Promise.all(
     allSettings.map(
       async (settings) =>
-        await trpcHelper.lectures.getLectures.prefetch({
+        await trpcHelper.lectures.getLectures.fetch({
           courseName: settings.name,
         })
     )
diff --git a/nextjs/src/app/providersQueryClientUtils.ts b/nextjs/src/app/providersQueryClientUtils.ts
index e7e7f87..20396b3 100644
--- a/nextjs/src/app/providersQueryClientUtils.ts
+++ b/nextjs/src/app/providersQueryClientUtils.ts
@@ -8,7 +8,7 @@ export function makeQueryClient() {
         // above 0 to avoid refetching immediately on the client
         // staleTime: 60_000,
         staleTime: 1000 * 60 * 60, // 1 hour
-        // refetchInterval: 5000, // debug only
+        // refetchInterval: 7000, // debug only
         refetchOnWindowFocus: false,
         retry: 0,
         refetchOnMount: false,
diff --git a/nextjs/src/services/trpc/TrpcProvider.tsx b/nextjs/src/services/trpc/TrpcProvider.tsx
index f6639ed..0551e2e 100644
--- a/nextjs/src/services/trpc/TrpcProvider.tsx
+++ b/nextjs/src/services/trpc/TrpcProvider.tsx
@@ -4,24 +4,19 @@ import superjson from "superjson";
 import { httpBatchLink, httpLink } from "@trpc/client";
 import { trpc } from "./utils";
 import { getQueryClient } from "@/app/providersQueryClientUtils";
+import { isServer } from "@tanstack/react-query";
 
 export default function TrpcProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  // NOTE: Your production URL environment variable may be different
-  const url = "http://localhost:3000/api/trpc/"
-   //"/api/trpc";
-    // process.env.NEXT_PUBLIC_APP_DOMAIN &&
-    // !process.env.NEXT_PUBLIC_APP_DOMAIN.includes("localhost")
-    //   ? `https://www.${process.env.NEXT_PUBLIC_APP_DOMAIN}/api/trpc/`
-    //   : "http://localhost:3000/api/trpc/";
+  const url = isServer ? "http://localhost:3000/api/trpc/" : "/api/trpc"
 
   const [trpcClient] = useState(() =>
     trpc.createClient({
       links: [
-        httpLink({
+        httpBatchLink({
           url,
           transformer: superjson,
         }),
diff --git a/nextjs/src/services/utils/queryClient.tsx b/nextjs/src/services/utils/queryClient.tsx
index 269cf20..47fdd7e 100644
--- a/nextjs/src/services/utils/queryClient.tsx
+++ b/nextjs/src/services/utils/queryClient.tsx
@@ -122,24 +122,3 @@ export function createSuccessToast(message: string) {
     }
   );
 }
-
-// export function createQueryClient() {
-//   return new QueryClient({
-//     defaultOptions: {
-//       queries: {
-//         refetchOnWindowFocus: false,
-//         retry: 0,
-//       },
-//       mutations: {
-//         onError: addErrorAsToast,
-//         retry: 0,
-//       },
-//     },
-//     queryCache: new QueryCache({
-//       onError: addErrorAsToast,
-//     }),
-//     mutationCache: new MutationCache({
-//       onError: addErrorAsToast,
-//     }),
-//   });
-// }