GraphQL创建人员成功但React Dev Tools报create_person字段缺失错误

该错误由带缓存的GraphQL客户端（通常是Apollo Client）的缓存写入校验逻辑抛出，和Schema定义、返回值中的null字段无关，核心原因如下：

1. 你对create_person是查询名而非字段的认知存在偏差：在GraphQL的规范中，你调用的mutation名称本身就是返回结果data下的顶层字段，缓存会按照该结构做校验。
2. 你写入缓存的结果结构不符合预期：缓存期望收到的结构为{ "create_person": { /* PersonResponse 内容 */ } }，但实际传入的内容直接是PersonResponse对象，外层缺失了create_person字段，因此抛出字段缺失错误。

常见触发场景有两种：

• 你编写的mutation查询语句格式错误，没有将create_person作为顶层字段声明返回内容
• 你手动修改了接口返回结果、或者手动调用缓存写入方法（writeQuery/writeFragment）时，剥离了外层的create_person字段

按优先级依次尝试：

• 检查你的mutation查询语句，确保格式符合规范，示例如下：

mutation CreatePerson($personInput: PersonInput!) {
  create_person(person_input: $personInput) {
    status
    error
    person {
      person_id {
        id_
      }
      name {
        first_name
        last_name
        middle_name
      }
      hire_date
      preferred_name {
        first_name
        last_name
        middle_name
      }
    }
  }
}

• 如果你手动处理过返回结果或者手动更新缓存，确保写入缓存的对象外层包裹create_person字段，示例如下：

// 错误写法
cache.writeQuery({ query: CREATE_PERSON_MUTATION, data: personResponseData })
// 正确写法
cache.writeQuery({ query: CREATE_PERSON_MUTATION, data: { create_person: personResponseData } })

• 如果不需要缓存该mutation的结果，可以直接在请求配置中添加fetchPolicy: 'no-cache'，跳过缓存写入逻辑，即可消除报错。

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