tRPC Query请求无法传递查询参数的问题排查求助

问题原因分析 #

1. ?val=teststring 请求报错：
   tRPC的Express适配器默认仅读取查询参数中的input字段作为接口输入，不会识别自定义的val参数。因此你的test procedure接收的输入值为undefined，触发输入校验错误。

2. ?input=teststring 请求报错：
   tRPC要求input参数的值必须是合法的JSON格式。直接传递teststring时，它不是有效的JSON字符串（JSON字符串需要用双引号包裹），导致JSON解析失败，抛出语法错误。

正确的请求方式 #

方式1：符合tRPC规范的GET请求 #

将input参数的值用JSON字符串格式传递，字符串需用双引号包裹：

curl "http://localhost:5000/trpc/test?input=\"teststring\""

此时tRPC能正确解析input为字符串类型，通过校验并返回预期结果。

方式2：使用POST请求（推荐） #

tRPC更推荐用POST请求传递参数，将输入放在请求体中（JSON格式）：

curl -X POST "http://localhost:5000/trpc/test" \
  -H "Content-Type: application/json" \
  -d '"teststring"'

这种方式更适合复杂参数场景，也避免了GET请求的JSON转义问题。

自定义参数名的处理（可选） #

如果需要支持?val=xxx这类自定义参数名的GET请求，可以在Express中间件中手动将查询参数映射为tRPC的输入：

app.use(
  "/trpc",
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    async createContext({ req }) {
      // 仅在GET请求时处理val参数
      if (req.method === 'GET' && typeof req.query.val === 'string') {
        // 将val的值作为input传入tRPC
        (req as any).input = req.query.val;
      }
      return {};
    },
  })
);

修改后，http://localhost:5000/trpc/test?val=teststring就能正常返回结果。

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