React中发送GraphQL mutation请求返回400错误该如何排查

架构老林

2026-9-23

错误排查步骤

400 Bad Request在GraphQL请求中绝大多数是请求本身不符合后端校验规则导致的，你可以按照以下顺序逐一排查：

检查传入变量的类型和非空校验
你在mutation中定义的activityid、memberid都是非空字符串类型String!，请先确认调用createActivityEnrollment时传入的两个变量确实是字符串类型，不存在undefined、null或者数值类型的情况，类型不匹配或者为空都会直接触发400错误。
核对变量名、字段结构和后端Schema是否一致
1. 确认后端要求的变量名是否为驼峰格式：很多后端Schema会定义为activityId、memberId（字母I大写），你当前使用的全小写命名如果和后端定义不匹配会直接报错
2. 确认createActivityEnrollment的入参结构是否和你写的完全一致：比如是否要求直接传activityId、memberId作为参数，而非嵌套在data.activity.connect.id结构里
检查请求头配置
确认你的GraphQL客户端发起请求时，请求头已经正确设置了Content-Type: application/json，否则后端无法正确解析请求体，会直接返回400。
打印完整错误信息获取具体提示
你当前的捕获逻辑只打印了错误对象本身，可以修改catch代码输出更详细的返回内容：
```
.catch((error) => {
  // 输出完整的错误响应，GraphQL的400返回通常会携带具体错误说明
  console.log('请求错误详情：', error?.response?.data || error)
})
```
常见的错误提示包括Variable $x of type String! was not provided（变量未传）、Field "xxx" is not defined by type xxx（字段名写错），根据提示可以直接定位问题。
用本地GraphQL playground测试验证
如果你的后端开启了调试 playground，可以直接访问http://localhost:3000/api/graphql，把你的mutation代码和变量值粘贴进去直接运行，playground会给出非常明确的错误提示，方便快速定位问题。