From fb42dee78122d8f3f4078ced6b6c72ab8d35f3eb Mon Sep 17 00:00:00 2001
From: Sachin Raja <me@s4n.land>
Date: Tue, 1 Nov 2022 06:43:29 -0700
Subject: [PATCH] conditional rsc or trpc client

---
 .vscode/settings.json                     |  3 ++-
 @trpc/next-layout/client.ts               | 32 +++++++++++++++++++++++
 @trpc/next-layout/createTRPCNextLayout.ts | 14 +++++-----
 @trpc/next-layout/index.ts                |  1 +
 @trpc/next-layout/package.json            |  7 +++++
 @trpc/next-layout/server.ts               |  1 +
 app/layout.tsx                            | 18 ++++++-------
 client/CreatePostForm.tsx                 | 23 +++++++++-------
 next.config.js                            |  8 ++++--
 package.json                              |  1 +
 pnpm-lock.yaml                            |  7 +++++
 server-rsc/getUser.tsx                    |  2 +-
 server-rsc/trpc/client.ts                 |  4 +++
 server-rsc/trpc/index.ts                  |  1 +
 server-rsc/trpc/package.json              |  8 ++++++
 server-rsc/{trpc.ts => trpc/server.ts}    | 10 +++----
 16 files changed, 106 insertions(+), 34 deletions(-)
 create mode 100644 @trpc/next-layout/client.ts
 create mode 100644 @trpc/next-layout/package.json
 create mode 100644 @trpc/next-layout/server.ts
 create mode 100644 server-rsc/trpc/client.ts
 create mode 100644 server-rsc/trpc/index.ts
 create mode 100644 server-rsc/trpc/package.json
 rename server-rsc/{trpc.ts => trpc/server.ts} (51%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c3d9d94..ac72b45 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
   "typescript.tsdk": "./node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "prettier.requireConfig": false
 }
\ No newline at end of file
diff --git a/@trpc/next-layout/client.ts b/@trpc/next-layout/client.ts
new file mode 100644
index 0000000..6f05662
--- /dev/null
+++ b/@trpc/next-layout/client.ts
@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { AnyRouter, ProcedureType } from "@trpc/server";
+import { createRecursiveProxy } from "@trpc/server/shared";
+import { createContext } from "react";
+import { DecoratedProcedureRecord } from "./createTRPCNextLayout";
+import superjson from "superjson";
+export type TRPCSchemaContext = Record<string, ProcedureType>;
+export const TRPCSchemaContext = createContext<TRPCSchemaContext>(null as any);
+export const TRPCSchemaContextProvider = TRPCSchemaContext.Provider;
+
+export async function createTRPCNextClientLayout<
+  TRouter extends AnyRouter
+>(): Promise<DecoratedProcedureRecord<TRouter["_def"]["record"]>> {
+  const client = createTRPCClient({
+    links: [httpBatchLink({ url: "/api/trpc" })],
+    transformer: superjson,
+  });
+
+  return createRecursiveProxy((callOpts) => {
+    const path = [...callOpts.path];
+    path.pop();
+    const flatPath = path.join(".");
+    // const schema = useContext(TRPCSchemaContext);
+    // const procedureType = schema[flatPath];
+
+    const { data } = useQuery([...path, callOpts.args[0]], () => {
+      return client.query(flatPath, callOpts.args[0]);
+    });
+    return data;
+  }) as DecoratedProcedureRecord<TRouter["_def"]["record"]>;
+}
diff --git a/@trpc/next-layout/createTRPCNextLayout.ts b/@trpc/next-layout/createTRPCNextLayout.ts
index a71b8bd..fe4e264 100644
--- a/@trpc/next-layout/createTRPCNextLayout.ts
+++ b/@trpc/next-layout/createTRPCNextLayout.ts
@@ -11,7 +11,7 @@ import {
 import { createRecursiveProxy } from "@trpc/server/shared";
 import { use } from "react";
 
-interface CreateTRPCNextLayoutOptions<TRouter extends AnyRouter> {
+export interface CreateTRPCNextLayoutOptions<TRouter extends AnyRouter> {
   router: TRouter;
   createContext: () => MaybePromise<inferRouterContext<TRouter>>;
 }
@@ -23,7 +23,7 @@ export type DecorateProcedure<TProcedure extends AnyProcedure> =
   TProcedure extends AnyQueryProcedure
     ? {
         use(
-          input: inferProcedureInput<TProcedure>,
+          input: inferProcedureInput<TProcedure>
           // FIXME: maybe this should be cache options?
           // opts?:
         ): inferProcedureOutput<TProcedure>;
@@ -41,7 +41,7 @@ type OmitNever<TType> = Pick<
  */
 export type DecoratedProcedureRecord<
   TProcedures extends ProcedureRouterRecord,
-  TPath extends string = "",
+  TPath extends string = ""
 > = OmitNever<{
   [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
     ? DecoratedProcedureRecord<
@@ -53,9 +53,9 @@ export type DecoratedProcedureRecord<
     : never;
 }>;
 
-export function createTRPCNextLayout<TRouter extends AnyRouter>(
-  opts: CreateTRPCNextLayoutOptions<TRouter>,
-): DecoratedProcedureRecord<TRouter["_def"]["record"]> {
+export async function createTRPCNextLayout<TRouter extends AnyRouter>(
+  opts: CreateTRPCNextLayoutOptions<TRouter>
+): Promise<DecoratedProcedureRecord<TRouter["_def"]["record"]>> {
   return createRecursiveProxy((callOpts) => {
     const path = [...callOpts.path];
     path.pop();
@@ -65,7 +65,7 @@ export function createTRPCNextLayout<TRouter extends AnyRouter>(
         const caller = opts.router.createCaller(ctx);
 
         return caller.query(path.join("."), callOpts.args[0]) as any;
-      })(),
+      })()
     ) as any;
   }) as DecoratedProcedureRecord<TRouter["_def"]["record"]>;
 }
diff --git a/@trpc/next-layout/index.ts b/@trpc/next-layout/index.ts
index 61c958c..95ab9e7 100644
--- a/@trpc/next-layout/index.ts
+++ b/@trpc/next-layout/index.ts
@@ -1 +1,2 @@
 export { createTRPCNextLayout } from "./createTRPCNextLayout";
+ 
\ No newline at end of file
diff --git a/@trpc/next-layout/package.json b/@trpc/next-layout/package.json
new file mode 100644
index 0000000..a71b706
--- /dev/null
+++ b/@trpc/next-layout/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@trpc/next-layout",
+  "exports": {
+    "./client": "./client.ts",
+    "./server": "./server.ts"
+  }
+}
diff --git a/@trpc/next-layout/server.ts b/@trpc/next-layout/server.ts
new file mode 100644
index 0000000..43417c0
--- /dev/null
+++ b/@trpc/next-layout/server.ts
@@ -0,0 +1 @@
+export { createTRPCNextLayout as createTRPCNextServerLayout } from "./createTRPCNextLayout";
diff --git a/app/layout.tsx b/app/layout.tsx
index 5623893..50f9bd9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,24 +12,24 @@ export default function RootLayout(props: Props) {
   const user = rsc.whoami.use();
   return (
     <ClientProvider>
-      <html lang='en'>
+      <html lang="en">
         <head>
           <title>Next.js hello</title>
           <meta
-            name='viewport'
-            content='width=device-width, initial-scale=1.0'
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
           />
         </head>
         <body>
-          <nav className='p-4'>
-            <ul className='flex flex-col sm:flex-row space-y-2 sm:space-y-0 space-x-2 justify-center items-center'>
+          <nav className="p-4">
+            <ul className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 space-x-2 justify-center items-center">
               <li>
-                <Link href='/' className='text-indigo-500 underline'>
+                <Link href="/" className="text-indigo-500 underline">
                   Home
                 </Link>
               </li>
               <li>
-                <Link href='/secret' className='text-indigo-500 underline'>
+                <Link href="/secret" className="text-indigo-500 underline">
                   Secret page
                 </Link>
               </li>
@@ -37,13 +37,13 @@ export default function RootLayout(props: Props) {
                 {user ? (
                   <>
                     Hi <em>{user.name}</em>.{" "}
-                    <Link href='/api/auth/signout' className='underline'>
+                    <Link href="/api/auth/signout" className="underline">
                       Logout
                     </Link>
                   </>
                 ) : (
                   <>
-                    <Link href='/api/auth/signin' className='button'>
+                    <Link href="/api/auth/signin" className="button">
                       Login
                     </Link>
                   </>
diff --git a/client/CreatePostForm.tsx b/client/CreatePostForm.tsx
index 4dfd051..b5e770f 100644
--- a/client/CreatePostForm.tsx
+++ b/client/CreatePostForm.tsx
@@ -2,10 +2,15 @@
 
 import { useRouter } from "next/navigation";
 import { trpc } from "~/client/trpcClient";
+import { rsc } from "~/server-rsc/trpc/client";
 import { Inputs } from "~/shared/utils";
 
 export function CreatePostForm() {
   const addPost = trpc.post.add.useMutation();
+  // const a = rsc.health.healthz.use();
+
+  const data = rsc.health.healthz.use();
+  console.log(data);
 
   const router = useRouter();
 
@@ -36,16 +41,16 @@ export function CreatePostForm() {
           console.error({ cause }, "Failed to add post");
         }
       }}
-      className='space-y-2'
+      className="space-y-2"
     >
       <fieldset>
-        <label htmlFor='title' className='label'>
+        <label htmlFor="title" className="label">
           Title
         </label>
         <input
-          id='title'
-          name='title'
-          type='text'
+          id="title"
+          name="title"
+          type="text"
           disabled={addPost.isLoading}
           className={
             "input" + (addPost.error?.data?.zod?.title ? " input--error" : "")
@@ -57,13 +62,13 @@ export function CreatePostForm() {
       </fieldset>
 
       <fieldset>
-        <label htmlFor='text' className='label'>
+        <label htmlFor="text" className="label">
           Text
         </label>
 
         <textarea
-          id='text'
-          name='text'
+          id="text"
+          name="text"
           disabled={addPost.isLoading}
           className={
             "input" + (addPost.error?.data?.zod?.text ? " input--error" : "")
@@ -74,7 +79,7 @@ export function CreatePostForm() {
         )}
       </fieldset>
       <fieldset>
-        <input type='submit' disabled={addPost.isLoading} className='button' />
+        <input type="submit" disabled={addPost.isLoading} className="button" />
         {addPost.error && !addPost.error.data?.zod && (
           <p style={{ color: "red" }}>
             {addPost.error.message}
diff --git a/next.config.js b/next.config.js
index 4487c5f..cef843b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,13 +1,17 @@
 // @ts-check
 
 /* eslint-disable @typescript-eslint/no-var-requires */
-const { env } = require('./server/env');
+const { env } = require("./server/env");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
     appDir: true,
   },
+  webpack: (config, options) => {
+    config.experiments = { ...config.experiments, ...{ topLevelAwait: true } };
+    return config;
+  },
 };
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/package.json b/package.json
index d1a4d1a..d12c7c2 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@trpc/client": "^10.0.0-rc.1",
     "@trpc/react-query": "^10.0.0-rc.1",
     "@trpc/server": "^10.0.0-rc.1",
+    "@trpc/next-layout": "file:@trpc/next-layout",
     "next": "^13.0.0",
     "next-auth": "4.14.0",
     "npm-run-all": "^4.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 519c24e..cea3d8d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,7 @@ specifiers:
   '@tailwindcss/typography': ^0.5.7
   '@tanstack/react-query': ^4.13.0
   '@trpc/client': ^10.0.0-rc.1
+  '@trpc/next-layout': file:@trpc/next-layout
   '@trpc/react-query': ^10.0.0-rc.1
   '@trpc/server': ^10.0.0-rc.1
   '@types/node': 18.8.5
@@ -34,6 +35,7 @@ dependencies:
   '@tailwindcss/typography': 0.5.7_tailwindcss@3.2.1
   '@tanstack/react-query': 4.13.0_biqbaboplfbrettd7655fr4n2y
   '@trpc/client': 10.0.0-rc.1_@trpc+server@10.0.0-rc.1
+  '@trpc/next-layout': file:@trpc/next-layout
   '@trpc/react-query': 10.0.0-rc.1_j3pstw3g7plkegerh6sxuce5zm
   '@trpc/server': 10.0.0-rc.1
   next: 13.0.0_biqbaboplfbrettd7655fr4n2y
@@ -2668,3 +2670,8 @@ packages:
   /zod/3.19.1:
     resolution: {integrity: sha512-LYjZsEDhCdYET9ikFu6dVPGp2YH9DegXjdJToSzD9rO6fy4qiRYFoyEYwps88OseJlPyl2NOe2iJuhEhL7IpEA==}
     dev: false
+
+  file:@trpc/next-layout:
+    resolution: {directory: '@trpc/next-layout', type: directory}
+    name: '@trpc/next-layout'
+    dev: false
diff --git a/server-rsc/getUser.tsx b/server-rsc/getUser.tsx
index eb9c7a7..4956f1a 100644
--- a/server-rsc/getUser.tsx
+++ b/server-rsc/getUser.tsx
@@ -1,5 +1,4 @@
 import { getToken } from "next-auth/jwt";
-import { cookies } from "next/headers";
 
 export interface User {
   id: string;
@@ -7,6 +6,7 @@ export interface User {
   name: string;
 }
 export async function getUser(): Promise<User | null> {
+  const cookies = (await import("next/headers")).cookies;
   const $cookies = cookies();
 
   const newCookies = new Map<string, string>();
diff --git a/server-rsc/trpc/client.ts b/server-rsc/trpc/client.ts
new file mode 100644
index 0000000..5b1db2e
--- /dev/null
+++ b/server-rsc/trpc/client.ts
@@ -0,0 +1,4 @@
+import { createTRPCNextClientLayout } from "@trpc/next-layout/client";
+import { AppRouter } from "~/server/routers/_app";
+
+export const rsc = await createTRPCNextClientLayout<AppRouter>();
diff --git a/server-rsc/trpc/index.ts b/server-rsc/trpc/index.ts
new file mode 100644
index 0000000..364a925
--- /dev/null
+++ b/server-rsc/trpc/index.ts
@@ -0,0 +1 @@
+export * from "./server";
diff --git a/server-rsc/trpc/package.json b/server-rsc/trpc/package.json
new file mode 100644
index 0000000..a2af2a7
--- /dev/null
+++ b/server-rsc/trpc/package.json
@@ -0,0 +1,8 @@
+{
+  "exports": {
+    ".": {
+      "react-server": "./server.ts",
+      "default": "./client.ts"
+    }
+  }
+}
diff --git a/server-rsc/trpc.ts b/server-rsc/trpc/server.ts
similarity index 51%
rename from server-rsc/trpc.ts
rename to server-rsc/trpc/server.ts
index cf21ad4..e3be7d3 100644
--- a/server-rsc/trpc.ts
+++ b/server-rsc/trpc/server.ts
@@ -1,11 +1,11 @@
-import { createTRPCNextLayout } from "~/@trpc/next-layout";
-import { createContext } from "~/server/context";
 import { appRouter } from "~/server/routers/_app";
-import { getUser } from "./getUser";
+import { createContext } from "~/server/context";
+import { getUser } from "../getUser";
+import { createTRPCNextServerLayout } from "@trpc/next-layout/server";
 
-export const rsc = createTRPCNextLayout({
+export const rsc = await createTRPCNextServerLayout({
   router: appRouter,
-  createContext() {
+  async createContext() {
     return createContext({
       type: "rsc",
       getUser,