GraphQL突变返回400错误，但在GraphiQL中可正常运行求助

这种情况我之前也碰到过——GraphiQL里一切正常，客户端调用就翻车，确实挺挠头的！既然Query能正常工作，说明基础的服务端配置、客户端连接都没大问题，问题大概率出在Mutation的请求格式、参数传递或者客户端请求配置上。咱们一步步来排查：

1. 先盯紧客户端的请求格式 #

GraphQL的Mutation请求和Query一样，必须严格遵循JSON结构，尤其是operationName、variables和query这三个核心字段，400错误很多时候都是格式不对导致的。

举个标准的请求body示例：

{
  "query": "mutation AddBook($title: String!, $author: String!) { addBook(title: $title, author: $author) { id title author } }",
  "operationName": "AddBook",
  "variables": { "title": "新书名", "author": "作者名" }
}

• 如果你用fetch或axios发起请求，务必确保请求头的Content-Type设为application/json，并且把上述对象用JSON.stringify转成字符串再发送。
• 别犯大小写敏感的低级错误：比如Schema里定义的是title，客户端就不能传Title；把mutation关键字写成query也会直接报错。

2. 确认服务端Resolver的参数处理逻辑 #

虽然GraphiQL能正常执行，但客户端传参的方式可能和GraphiQL的自动补全有差异，比如Resolver里的args是否正确接收变量？

比如你的Resolver如果是这样：

const resolvers = {
  Mutation: {
    addBook: (parent, args) => {
      const newBook = { id: books.length + 1, title: args.title, author: args.author };
      books.push(newBook);
      return newBook;
    }
  }
};

要确保客户端传的变量名和args里的字段完全匹配，比如Schema里要求title: String!，客户端就不能传bookTitle这种不匹配的字段。

另外可以顺带确认下CORS配置：虽然Query能跑，但Mutation的请求可能触发预检，确保Express里已经用了cors()中间件（不过400错误一般和CORS无关，但排查时可以排除这个点）。

3. 打印客户端请求的详细错误信息 #

400错误通常会返回具体的错误描述，别只看状态码，把响应body打出来才是关键。比如用fetch的话可以这么写：

fetch('/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(你的Mutation数据)
})
.then(res => {
  if (!res.ok) {
    return res.json().then(err => { throw err; });
  }
  return res.json();
})
.catch(err => console.log('详细错误:', err));

打印出来的错误信息会直接告诉你是语法错误、变量缺失还是字段不匹配，这是最直接的排查方式。

4. 检查服务端GraphQL的基础配置 #

确认Express的GraphQL中间件是否正确挂载，尤其是Resolver的Mutation部分有没有被正确关联：

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: resolvers,
  graphiql: true
}));

这里的rootValue必须正确指向你的Resolver对象，要是Mutation的Resolver没定义或者路径错了，客户端调用自然会报错。

最后提个高频坑：客户端Mutation字符串的语法错误 #

GraphiQL会自动帮你补全语法，但手动写客户端Mutation时很容易犯这种错：
❌ 错误写法（带变量却没定义）：

mutation AddBook {
  addBook(title: "test", author: "test") { id }
}

✅ 正确写法（必须先定义变量）：

mutation AddBook($title: String!, $author: String!) {
  addBook(title: $title, author: $author) { id title author }
}

如果按上面的步骤排查后还是没解决，可以把客户端的Mutation代码、请求代码和服务端的Schema/Resolver贴出来，能更精准定位问题！

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