tRPC批量调用报错“input需为对象”，但输入已是对象

基于create-t3-app搭建的Next.js项目，使用tRPC和Prisma开发功能，通过FB IG Graph API获取用户信息后发送至第三方网站接口，触发tRPC错误：

Error while dealing with tRPC procedures "input needs to be an object when doing a batch call"

已通过typeof(input)验证输入为object，但问题依然存在。奇怪的是，更换为自建POST接口时无报错，项目中其他axios GET请求也正常，项目部署在Vercel。

相关代码 #

import { TRPCError } from "@trpc/server";
import { z } from "zod";
import { env } from "~/env.mjs";
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
import axios from "axios";

export const profileRouter = createTRPCRouter({
  sendProfileInfo: publicProcedure
    .input(
      z.object({
        ig_account: z.string(),
        followers_count: z.number(),
        audience_city: z.record(z.number()),
        audience_country: z.record(z.number()),
        audience_gender_age: z.record(z.number()),
        audience_locale: z.record(z.number()),
      })
    )
    .mutation(async ({ input }) => {
      const axiosConfig = {
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json",
          "Authorization": `${env.TOKEN}`,
        },
      };
      try {
        // 注意：此处$env.URL应为笔误，需改为env.URL
        const response = await axios.post($env.URL, input, axiosConfig);
        return {response: response.data, inputType: typeof(input)};
      } catch (e) {
        throw new TRPCError({
          message: "Error",
          code: "BAD_REQUEST",
        });
      }
    }),
});

项目依赖版本 #

{
  "name": "viveapp-ig-api",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@greatsumini/react-facebook-login": "^3.3.3",
    "@prisma/client": "^4.11.0",
    "@t3-oss/env-nextjs": "^0.2.1",
    "@tanstack/react-query": "^4.28.0",
    "@trpc/client": "^10.18.0",
    "@trpc/next": "^10.18.0",
    "@trpc/react-query": "^10.18.0",
    "@trpc/server": "^10.18.0",
    "axios": "^1.4.0",
    "next": "^12.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "recharts": "^2.7.2",
    "superjson": "1.12.2",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@types/eslint": "^8.21.3",
    "@types/node": "^18.15.5",
    "@types/prettier": "^2.7.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.36.0",
    "eslint-config-next": "^13.4.1",
    "postcss": "^8.4.21",
    "prettier": "^2.8.6",
    "prettier-plugin-tailwindcss": "^0.2.6",
    "prisma": "^4.11.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5.0.2"
  },
  "ct3aMetadata": {
    "initVersion": "7.13.0"
  }
}

排查建议 #

• 修正环境变量笔误：代码中$env.URL改为env.URL，避免因URL错误导致的异常请求触发tRPC逻辑错误。
• 禁用tRPC批量调用：客户端初始化tRPC时，在httpBatchLink中设置batch: false，验证是否为批量调用逻辑导致的问题：

  const trpc = createTRPCNext<AppRouter>({
    config() {
      return {
        transformer: superjson,
        links: [
          httpBatchLink({
            url: `${getBaseUrl()}/api/trpc`,
            batch: false,
          }),
        ],
      };
    },
  });
  

• 深拷贝输入对象：使用structuredClone(input)或JSON.parse(JSON.stringify(input))深拷贝input后再传入axios，避免原对象存在代理或不可枚举属性导致tRPC识别异常：

  const clonedInput = structuredClone(input);
  const response = await axios.post(env.URL, clonedInput, axiosConfig);
  

• 检查第三方接口交互：部分第三方接口可能返回特殊响应头或修改请求上下文，干扰tRPC批量调用逻辑。在axios请求前后添加日志，确认input状态及接口响应是否正常。
• 升级tRPC依赖：当前tRPC版本10.18.0存在批量调用相关bug的可能性，尝试升级至10.30.0+等稳定版本。

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