NextJS项目中TRPC公共流程多输入参数配置求助

方案1：合并输入Schema，同时传递购物车和用户信息 #

直接把购物车数组和用户信息包装成一个对象，用Zod合并两个Schema，就能在procedure里同时拿到两类参数：

首先修改输入Schema：

// 合并购物车与用户信息的Schema
export const checkoutInputSchema = z.object({
  cart: cartSchema,
  user: UserSchema
});

然后更新你的procedure：

createCheckoutSession: publicProcedure
  .input(checkoutInputSchema)
  .query(async (opts) => {
    const { cart, user } = opts.input;
    // 直接使用cart和user数据
    console.log('购物车数据:', cart);
    console.log('用户信息:', user);
  }),

方案2：通过TRPC Context注入用户信息（更推荐） #

TRPC后端不能用React的useContext，但TRPC本身有专属的Context机制。你可以在TRPC的上下文配置中注入用户信息，然后在procedure里通过opts.context获取：

第一步：配置TRPC Context #

在你的TRPC服务端配置文件中（比如trpc/server.ts），定义上下文并注入用户信息：

import { initTRPC } from '@trpc/server';
import type { CreateNextContextOptions } from '@trpc/server/adapters/next';
import { UserSchema } from './your-schema-path';

// 定义Context类型
type Context = {
  user: z.infer<typeof UserSchema> | null;
};

// 初始化TRPC并绑定Context
const t = initTRPC.context<Context>().create();

// 导出public procedure
export const publicProcedure = t.procedure;

// 创建上下文生成函数
export const createContext = async (opts: CreateNextContextOptions) => {
  // 这里从请求中获取用户信息，比如从cookie、session或NextAuth中读取
  // 示例：假设你从自定义cookie解析用户信息
  const user = parseUserFromCookie(opts.req); // 替换成你的实际获取逻辑
  // 用UserSchema验证数据格式
  const validatedUser = user ? UserSchema.parse(user) : null;

  return {
    user: validatedUser,
  };
};

第二步：在procedure中使用Context里的用户信息 #

更新你的createCheckoutSession方法：

createCheckoutSession: publicProcedure
  .input(cartSchema)
  .query(async (opts) => {
    const cart = opts.input;
    const user = opts.context.user;

    if (!user) {
      throw new Error('用户信息未找到，请先登录');
    }

    // 处理业务逻辑
    console.log('购物车:', cart);
    console.log('用户信息:', user);
  }),

方案对比 #

• 方案1简单直接，适合用户信息需要前端主动传递的场景，但存在前端篡改数据的风险，需要后端额外验证。
• 方案2更安全，用户信息由后端统一注入和验证，避免前端篡改，是生产环境的推荐方案。

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