使用axios

Question

grahiql中的此查询有效：

mutation {
  addSkill(id:"5",name:"Javascript",level:1,type:"frontend") {
    status
    id
    name
    level
    type
  }
}

用axios发布信息等效于什么？

我已经尝试过了，但是一直收到400请求响应。

  

{“错误”：[{“消息”：“语法错误：未终止的字符串。”，“位置”：[{“行”：3，“列”：82}]}]}}}

这是我尝试过的：

axios
  .post(config.apiendpoint, {
    query: `
      mutation addSkill($id:String!, $name:String!, $level:Float!, $type:String!) {
        mutation addSkill(id:$id, name:$name", level:$level, type:$type) { 
          status
          id
          name
          level
          type
        }
      }
    `,
    variables: {
      id: String(id),
      name: this.form.name,
      level: this.form.level,
      type: this.form.type,
    },
  })
  .then(res => console.log(res))
  .catch(err => console.log(err))

确保variables中的值是正确的type并且也不为空。

Answer 1

我会避免像这样直接在查询中包含变量，因为那样一来，您就必须不断调整变量如何适合模板文字，例如对内容进行字符串化和添加引号。

使用graphql print帮您做到！

尝试一下：

import axios from 'axios';
import { print } from 'graphql';
import gql from 'graphql-tag';

const ADD_SKILL = gql`
mutation addSkill($id:String!, $name:String!, $level:Float!, $type:String!) {
  addSkill(id:$id, name:$name, level:$level, type:$type) { 
    status
    id
    name
    level
    type
  }
}
`

axios
.post(config.apiendpoint, {
  query: print(ADD_SKILL),
  variables: {
    id: String(id),
    name: this.form.name,
    level: parseFloat(this.form.level),
    type: this.form.type,
  },
})
.then(res => console.log(res))
.catch(err => console.log(err))

Answer 2

发现了问题。

1. 删除多余的mutation
2. 在"之后删除多余的$name

更新-清洁版本：

axios
.post(config.apiendpoint, {
  query: `mutation {
      addSkill(id:"${id}", name:"${this.form.name}", level:${parseFloat(this.form.level)}, type:"${this.form.type}") {
        status
        id
        name
        level
        type
      }
    }
  `,
}).then().catch()

这是工作要求供参考。

axios
.post(config.apiendpoint, {
  query: `
    mutation addSkill($id:String!, $name:String!, $level:Float!, $type:String!) {
      addSkill(id:$id, name:$name, level:$level, type:$type) { 
        status
        id
        name
        level
        type
      }
    }
  `,
  variables: {
    id: String(id),
    name: this.form.name,
    level: parseFloat(this.form.level),
    type: this.form.type,
  },
})
.then(res => console.log(res))
.catch(err => console.log(err))