Vue+Apollo调用GraphQL Mutation提示$id必填参数未提供如何解决

解决方案 #

错误原因 #

前端调用apolloClient.mutate时，variables参数格式不符合GraphQL要求：variables必须传入键值对对象，键名需要和你定义的GraphQL变量名完全匹配，你直接传入了字符串类型的id，框架无法解析到名为id的变量，因此抛出必填变量缺失的报错。

修复代码 #

修改前端业务代码中的variables传参：

async deleteAmbiente() {
  try {
    let id = this.item._id
    const res =  await apolloClient.mutate({
      mutation: ELIMINAR_AMBIENTE,
      // 替换为对象格式，键名对应mutation中定义的$id变量
      variables: {
        id: id
        // ES6简写可直接写为 variables: { id }
      },
    });
    console.log(res)
  } catch (err) {
    console.error(err)
  }
},

可选优化：后端Resolver规范写法 #

标准GraphQL Resolver的第二个参数是所有请求参数组成的总对象，推荐先取总对象再解构对应参数，避免后续多参数场景下的取值混乱：

async deleteAmbiente(_, args, context) {
        const { _id } = args
        console.log("hi there!", _id)
        // 补充后续的数据库删除逻辑即可
}

修改完成后重新请求即可正常传递参数。

内容的提问来源于stack exchange，提问作者Agustin G.