使用Axios将突变发布到graphql

本文介绍了使用Axios将突变发布到graphql的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

grahiql中的此查询有效:

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

用axios发表信息等效于什么?

What is the equivalent to post with axios?

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

I've tried this, but keep getting a 400 request response.

{错误":[{消息":语法错误:未终止的字符串."，位置":[{行":3，列":82}]}]}}}

{"errors":[{"message":"Syntax Error: Unterminated string.","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，并且也不为空.

Am sure the values in the variables are of the right type and is not empty too.

推荐答案

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

I would avoid including variables directly in the query like this, because that way you have to constantly adjust how your variables fit into the template literal, like stringifying stuff and adding quotes.

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