使用 axios 将突变发布到 graphql

Posted 2023-03-08

【中文标题】使用 axios 将突变发布到 graphql

【英文标题】：Post mutation to graphql with axios

【发布时间】：2019-01-08 20:08:27

【问题描述】：

grahiql 中的此查询有效：

mutation 
  addSkill(id:"5",name:"javascript",level:1,type:"frontend") 
    status
    id
    name
    level
    type
  

什么相当于用axios发帖？

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

"errors":["message":"语法错误：未终止的字符串。","locations":["line":3,"column":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 并且也不为空。

【参考方案1】：

我会避免像这样直接在查询中包含变量，因为这样你必须不断调整你的变量如何适应模板文字，比如字符串化和添加引号。

使用graphqlprint为你做这件事！

试试这个：

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))

【参考方案2】：

找到问题了。

删除多余的mutation R 删除" 后的额外$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))