using batching to mitigate startup request cost

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,

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,
         })
     )

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,

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,
         }),

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,
-//     }),
-//   });
-// }