GraphQL post request in axios

Question

I have a problem with GraphQL. I want to send axios.post request to my server. I can do it in postman:

{     "query":"mutation{updateUserCity(userID: 2, city:\"test\"){id name age city knowledge{language frameworks}}} " } 

and in graphiql:

mutation {   updateUserCity(userID: 2, city: "test") {     id     name     age     city     knowledge {       language       frameworks     }   } } 

but can't do it in my code:(( here is my code snippet:

const data = await axios.post(API_URL, {   query: mutation updateUserCity(${ id }: Int!, ${ city }: String!) {     updateUserCity(userID: ${ id }, city: ${ city }){       id       name       age       city       knowledge{         language         frameworks       }     }   } }, {     headers: {       'Content-Type': 'application/json'     }   }) 

what's wrong in my code?

Answer 1

Value of query parameter to be passed in request has to be string and names of variables passed to GraphQL queries should be prefixed by $. You have used string literals for variables in request instead. Also, variables can be passed in post request using variables key.

Changing your code to something like below should get it to working:

const data = await axios.post(API_URL, {   query: `mutation updateUserCity($id: Int!, $city: String!) {     updateUserCity(userID: $id, city: $city){       id       name       age       city       knowledge{         language         frameworks       }     }   }`,   variables: {     id: 2,     city: 'Test'   } }, {     headers: {       'Content-Type': 'application/json'     }   }) 

Answer 2

I enjoy using the following syntax, which is similar to the accepted answer, but more explicit.

Note that the variables object is nested inside of the data object, and is a sibling of the query object.

const data = await axios({   url: API_URL,   method: 'post',   headers: {     'Content-Type': 'application/json',     // any other headers you require go here   },   data: {     query: `       mutation updateUserCity($id: Int!, $city: String!) {         updateUserCity(userID: $id, city: $city){           id           name           age           city           knowledge{             language             frameworks           }         }       }     `,     variables: {       id: 2,       city: 'Test'     }   } });