feat: ssr rpc

src/components/profile/profile-details.tsx

@@ -1,7 +1,10 @@
 import { TDictionary } from "@/lib/langs"
+import { serverTrpc } from "@/lib/trpc/server"
 import UpdateAccount from "./update-account"
 
-export default function ProfileDetails({ dictionary }: { dictionary: TDictionary }) {
+export default async function ProfileDetails({ dictionary }: { dictionary: TDictionary }) {
+  const serverAccount = await serverTrpc.me.getAccount()
+
   return (
     <section className="mt-4 p-2 text-foreground">
       <header>
@@ -10,7 +13,7 @@ export default function ProfileDetails({ dictionary }: { dictionary: TDictionary
           {dictionary.profilePage.profileDetails.updateAccountDescription}
         </p>
       </header>
-      <UpdateAccount dictionary={dictionary} />
+      <UpdateAccount dictionary={dictionary} serverAccount={serverAccount} />
     </section>
   )
 }

src/components/profile/update-account.tsx

@@ -9,7 +9,7 @@ import * as z from "zod"
 import { useAccount } from "@/contexts/account"
 import { TDictionary } from "@/lib/langs"
 import { logger } from "@/lib/logger"
-import { updateUserSchema } from "@/lib/schemas/user"
+import { getAccountResponseSchema, updateUserSchema } from "@/lib/schemas/user"
 import { trpc } from "@/lib/trpc/client"
 import { handleMutationError } from "@/lib/utils/client-utils"
 import NeedSavePopup from "../need-save-popup"
@@ -21,12 +21,20 @@ const nonSensibleSchema = updateUserSchema
 
 type INonSensibleForm = z.infer<ReturnType<typeof nonSensibleSchema>>
 
-export default function UpdateAccount({ dictionary }: { dictionary: TDictionary }) {
+export default function UpdateAccount({
+  dictionary,
+  serverAccount,
+}: {
+  dictionary: TDictionary
+  serverAccount: z.infer<ReturnType<typeof getAccountResponseSchema>>
+}) {
   const router = useRouter()
   const utils = trpc.useContext()
 
   const { update } = useSession()
-  const account = useAccount(dictionary)
+  const account = useAccount(dictionary, {
+    initialData: serverAccount,
+  })
 
   const updateUserMutation = trpc.me.updateUser.useMutation({
     onError: (error) => handleMutationError(error, dictionary, router),
@@ -75,7 +83,7 @@ export default function UpdateAccount({ dictionary }: { dictionary: TDictionary
               label={dictionary.profilePage.profileDetails.username.label}
               placeholder={dictionary.profilePage.profileDetails.username.placeholder}
               type="text"
-              disabled={updateUserMutation.isLoading || !account.isFetched}
+              disabled={updateUserMutation.isLoading || account.isInitialLoading}
               form={form}
               name="username"
             />

src/lib/server/trpc.ts

@@ -1,6 +1,7 @@
 import { initTRPC, TRPCError } from "@trpc/server"
 import superjson from "superjson"
 import { ZodError } from "zod"
+import { getAuthApi } from "@/components/auth/require-auth"
 import { apiRateLimiter } from "../rate-limit"
 import { Context } from "../trpc/context"
 import { throwableErrorsMessages } from "../utils"
@@ -41,11 +42,18 @@ const hasRateLimit = middleware(async (opts) => {
 })
 export const publicProcedure = t.procedure.use(hasRateLimit)
 const isAuthenticated = middleware(async (opts) => {
-  const { ctx } = opts
-  if (!ctx.session) {
+  const { session } = await getAuthApi()
+
+  if (!session) {
     throw new TRPCError({ code: "UNAUTHORIZED", message: throwableErrorsMessages.unauthorized })
   }
-  return opts.next()
+
+  return opts.next({
+    ctx: {
+      ...opts.ctx,
+      session,
+    },
+  })
 })
 const hasVerifiedEmail = middleware(async (opts) => {
   const { ctx } = opts

src/lib/trpc/context.ts

@@ -1,12 +1,9 @@
 import { FetchCreateContextFnOptions } from "@trpc/server/adapters/fetch"
-import { getAuthApi } from "@/components/auth/require-auth"
 import { ITrpcContext } from "@/types"
 
 export async function createContext(opts?: FetchCreateContextFnOptions) {
-  const { session } = await getAuthApi()
-
   const response: ITrpcContext = {
-    session,
+    session: null,
     headers: opts && Object.fromEntries(opts.req.headers),
     req: opts && opts.req,
   }

src/lib/trpc/server.ts

@@ -0,0 +1,7 @@
+import { createContext } from "./context"
+import { appRouter } from "../server/routers/_app"
+
+/**
+ * This client invokes procedures directly on the server without fetching over HTTP.
+ */
+export const serverTrpc = appRouter.createCaller(await createContext())

tsconfig.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Next.js",
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,