Search code examples
jsonaxiosgraphqlmultipartform-data

Problem sending formdata to graphql server

I am trying to send form data to a graphql server using axios:

let data = new FormData();
let img = {}
img.file = e.target.files[0];
data.append('operations', '{ "query" : "mutation($file:Upload!){createImage(input:{title: \"test\", image:$file}) {_id, title, image, pin}}"}');
data.append('map', {"0":["variables.file"]})
data.append('0', img);
axios({
          method: "post",
          url: "http://localhost:8000/pin/62310a56ca26b64f107de717/image/",
          data: data,
          headers: { "Content-Type": "multipart/form-data" },
        })
          .then(function (res) {
            console.log(res)
          })
          .catch(function(err){
            console.error(err);
     })

but I keep getting "Invalid JSON in the ‘operations’ multipart field" from my server even though the very same "operation" object works fine in postman. Anybody know what's going on?

Solution

  • Your "json" is indeed invalid...

    Unexpected token t in JSON at position 64

    This is because you would have needed to escape the backslashes to escape the nested quotes.

    Never manually create JSON strings. Use JSON.stringify() instead

    const query = 'mutation($file:Upload!){createImage(input:{title: "test", image:$file}) {_id, title, image, pin}}';

data.append("operations", JSON.stringify({ query }));

    You also generally don't need to manually set content-type headers unless you're making the request from a Node backend. See this answer for more details on that.