web-dev-qa-db-fra.com

Post mutation en graphql avec axios

Cette requête dans grahiql fonctionne:

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

Quel est l'équivalent de publier avec axios?

J'ai essayé, mais continuez à obtenir un 400 demande de réponse.

{"errors": [{"message": "Syntax Error: Unterminated string.", "locations": [{"line": 3, "column": 82}]}]}

Voici ce que j'ai essayé:

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

Je suis sûr que les valeurs dans le variables sont du bon type et ne sont pas vides aussi.

graphqlaxios
8
resting

J'éviterais d'inclure des variables directement dans la requête comme celle-ci, car de cette façon, vous devez constamment ajuster la façon dont vos variables s'intègrent dans le littéral du modèle, comme la stringence et l'ajout de guillemets.

Utilisez graphqlprint pour le faire pour vous!

Essaye ça:

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))
8
Mateus Dal Bianco

Trouvé le problème.

  1. Supprimez le mutation supplémentaire
  2. Déplacez le supplément " Après $name

Mise à jour - une version plus propre:

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

Voici la demande de travail de référence.

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