如何为tRPC查询编码Query Param？手动Fetch请求失败排查

失败原因 #

核心问题是tRPC版本差异导致的请求格式不匹配：

• 你参考的官方文档大概率是tRPC v9及更早版本的格式，而当前使用的tRPC v10+版本默认采用批量请求结构——哪怕单个查询也需要包裹在数组中，并且携带路由路径、请求类型等元信息。
• 你之前模仿的{"0":{"json":{"text":"my message"}}}是错误结构：tRPC v10的批量请求是数组而非带数字索引的对象，且缺少path、type这类必要元字段，直接导致服务端解析失败。

正确的参数构造方式 #

1. 构造完整请求Payload结构 #

针对你的example.hello查询，需构造数组格式的Payload（单个请求也要放在数组内）：

const payload = [
  {
    path: "example.hello", // 与服务端定义一致的完整路由路径
    type: "query", // 请求类型：query（查询）/mutation（变更）
    json: { text: "my message" } // 实际业务输入参数
  }
];

2. 编码并拼接请求URL #

对整个Payload做JSON序列化后进行URI编码，再拼接包含batch=1参数的完整URL：

const encodedInput = encodeURIComponent(JSON.stringify(payload));
const requestUrl = `/api/trpc/example.hello?batch=1&input=${encodedInput}`;

3. 发起Fetch请求 #

fetch(requestUrl)
  .then(res => res.json())
  .then(result => {
    // 成功响应的业务结果在result[0].data.json中
    console.log(result[0].data.json);
  });

关键注意事项 #

• batch=1参数必须存在：tRPC v10的GET请求默认启用批量模式，缺少该参数会触发解析错误。
• path字段必须完全匹配：比如服务端将hello挂载在example路由下，就必须写example.hello，不能简写或写错。
• 业务参数要与Procedure的Schema严格匹配：如果hello要求text为字符串，传入非字符串类型也会返回400错误。

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