Post request Mutation does not work in axios

[benjaminhon]

Hi,
I have a post request mutation done using axios,
I am quite sure it is correct, as it works in graphiql.
My queries are alright, just the mutations do not work.

errors

POST http://127.0.0.1:5000/graphql 400 (Bad Request)
dispatchXhrRequest @ bundle.js:903
xhrAdapter @ bundle.js:740
dispatchRequest @ bundle.js:1261

Am i missing something? thanks

axios.post("#{graphqlUrl}",{
      query: "mutation {
        createDevice(input: $input)
      }"
      variables:
        input: device
    })

... in schema
type Mutation {
  createDevice(input: CreateDeviceInput): Device
}

[jeanpaulversace]

@benjaminhon Did you figure out what was wrong? I'm getting this exact same error, and I've been stuck on it for the greater part of a day

[benjaminhon]

@jeanpaulversace yep, you have to put it in this format somehow

query = "
      mutation ($input: CreateDeviceInput!) {
        createDevice(input: $input) { id }
      }
    "

[jeanpaulversace]

@benjaminhon Mine still does not work..

The funny thing is that it works from graphiql

Here's code from the client-side request:

const post = {
userId: store.user.id,
imageURLs: store.post.request.aws.imageURLs,
tags: store.post.tags,
link: store.post.link,
};

const query = `
  mutation ($post: PostInput!) {
    createPost(post: $post) { user, tags, imageURLs, link }
  }
`;

return fetch('/graphql', {
  method: 'post',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query,
    variables: {
      post,
    },
  }),
  credentials: 'include',
})

[benjaminhon]

@jeanpaulversace if you are using axios, its the 'data' property and not the 'body' property

here is how i do my axios request

this is my helper function

request = ({query, variables}) ->
  axios({
    method:   'post'
    url:      "#{graphqlUrl}"
    headers:  {'Content-Type': 'application/json'}
    data:     JSON.stringify({query, variables})
  })

one case how i use it

create: (device) -> (dispatch) ->
    variables = {input: device}
    query = "
      mutation ($input: CreateDeviceInput!) {
        createDevice(input: $input) { id }
      }
    "
    request({query, variables})
    .then ->
      dispatch actions.fetch()

one my back end server

cors        = require 'cors'
graphqlHTTP = require 'express-graphql'
app.use('/graphql', cors(), graphqlHTTP({schema, graphiql: true}))

[Paddy-Hamilton]

@benjaminhon @jeanpaulversace and just in case anybody else arrives at this thread with the same issue.

I was sending the data through correctly on the data property, but I was getting 400 error as the obj I was sending wasn't complete / what the api was expecting ( it was a rather large obj and took a while to find the missing piece).

[IvanGoncharov]

@Paddy-Hamilton @jeanpaulversace You can always validate your query and variables inside GraphiQL:

@benjaminhon Can I close this issue?