在NextJS 13中如何为tRPC服务端客户端动态设置上下文？

你当前的问题是：使用tRPC服务端调用器时，硬编码的上下文覆盖了从createContext中动态获取的用户信息，需要实现动态生成符合当前请求的上下文。

问题根源 #

你直接创建了固定的trpcServerClient并传入硬编码的上下文，而tRPC服务端调用器的createCaller方法会直接使用你传入的上下文对象，不会自动调用createContext。要实现动态上下文，需要复用createContext的逻辑来生成当前请求对应的上下文。

解决方案 #

将固定的服务端客户端改为动态生成函数，每次调用时先执行createContext获取当前请求的上下文，再创建调用器。

1. 修改server.ts，创建动态获取客户端的函数

import { appRouter } from "@/server";
import { createContext } from "@/server/context";

// 替换硬编码的客户端，改为动态生成函数
export async function getTrpcServerClient() {
  // 复用createContext逻辑，动态获取当前请求的上下文
  const dynamicContext = await createContext();
  // 传入动态上下文创建调用器
  return appRouter.createCaller(dynamicContext);
}

2. 在Next.js 13服务器组件/路由中使用

在支持Server Context的环境（如服务器组件、Route Handler、Server Action）中调用该函数，即可获取带有动态上下文的服务端客户端：

// 示例：服务器组件
import { getTrpcServerClient } from "@/server/server";

export default async function UserPage() {
  // 动态生成带有当前请求上下文的客户端
  const trpc = await getTrpcServerClient();
  
  // 调用授权后的流程，此时ctx.user会是从cookie中解析的真实用户
  const userData = await trpc.userProfile.query();

  return <div>当前用户：{userData.username}</div>;
}

关键说明 #

• createContext中使用的cookies()属于Next.js Server Context API，只能在服务器环境中运行，因此getTrpcServerClient必须在服务器组件、路由处理函数等Server Context环境中调用，不能在客户端组件中使用。
• 通过复用createContext，你不需要重复编写从cookie解析用户的逻辑，保证了上下文生成逻辑的一致性。

内容的提问来源于stack exchange，提问作者Cameron Cheung