GraphQL调用createReview报错 表单数据无法提交至GraphCMS数据库

核心报错原因 #

报错是GraphQL语法校验不通过导致的。GraphQL强制要求：所有返回对象类型的字段（包含mutation变更操作的返回值），必须明确声明需要返回的子字段集合，不能仅写字段名不指定返回内容。
你当前编写的createReview变更操作没有追加子字段选择集，直接触发了报错，报错提示里也明确给出了修正方向：createReview字段是Review对象类型，必须补充子字段选择，格式为createReview { ... }。

额外潜在问题 #

现有代码还有两处不影响当前报错、但可能引发后续异常的小问题：

• api/reviews.js中解构了未从前端传递的slug参数，属于无效代码
• 调用GraphQL请求时直接传入整个req.body作为变量，若后续前端提交多余字段可能触发GraphQL参数校验错误

修复步骤 #

1. 修改api/reviews.js中的GraphQL变更语句，补充返回子字段配置，示例代码如下：

const query = gql`
  mutation CreateReview($name: String!, $email: String!, $testimonial: String!){
    createReview(data: {name: $name, email: $email, testimonial: $testimonial}) {
      id
      name
      createdAt
    }
  }
`

大括号内为创建成功后需要GraphCMS返回的字段，可根据业务需求自行增减，只要不为空即可解决当前核心报错。

2. （可选优化）清理无效代码、规范传参：
   • 删除api/reviews.js中解构语句里无用的slug参数，改为const {name, email, testimonial} = req.body
   • 调用GraphQL请求时显式传入所需变量，改为const result = await graphQLClient.request(query, {name, email, testimonial})

其他代码校验 #

services/index.js的接口请求逻辑、components/reviewForm.jsx的表单提交逻辑均无问题，完成上述修改后即可正常提交用户评价。

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