React Apollo执行delete Mutation返回400状态码错误如何解决？

排查与解决步骤 #

• 首先获取具体错误信息
  打开浏览器开发者工具的「网络」面板，找到对应deleteTask mutation的HTTP请求，查看响应体的具体内容，400状态码对应的GraphQL错误会明确告知是变量不合法、字段不存在还是参数缺失，这是定位问题最快的方式。
• 修复mutation触发逻辑
  你当前直接将deleteTask函数绑定给onClick事件，点击时事件对象会作为参数传入deleteTask函数，覆盖你提前定义的variables配置，这是最常见的触发原因，修改方式如下：

  <IconButton aria-label="Löschen" onClick={() => deleteTask()}>
      <CloseIcon />
  </IconButton>
  

  用箭头函数包裹调用，避免将事件对象传入mutation触发函数。
• 校验传入参数的合法性
  在TaskListItem组件内添加打印日志，确认props.projectId和props.id的值均为合法的ID格式，没有出现undefined、null或者格式错误的情况：

  const projectId = props.projectId
  const taskId = props.id
  // 新增日志排查
  console.log('传入参数', {projectId, taskId})
  

• 核对返回字段与后端定义
  检查你mutation中请求返回的字段（gage、result、note1等），是否和后端typeDefs中定义的Project类型字段完全匹配，如果请求了后端没有定义的字段，也会触发400错误。
• 对比请求头配置
  对比该mutation请求和其他正常请求的请求头，确认是否携带了正确的认证信息，没有出现头缺失或格式错误的问题。

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