How to add additional request body values to Apollo GraphQL request?

Question

I'm using Apollo with the Scaphold.io service and for writing blobs to that service I need to be able to add additional options to the request body.

The full Scaphold example can be found here: https://scaphold.io/docs/#uploading-files

But it does something like this:

form.append("variables", JSON.stringify({
  "input": {
    "name": "Mark Zuck Profile Picture",
    "userId": "VXNlcjoxMA==",
    "blobFieldName": "myBlobField"
  }
}));
// The file's key matches the value of the field `blobFieldName` in the variables
form.append("myBlobField", fs.createReadStream('./mark-zuckerberg.jpg'));

fetch("https://us-west-2.api.scaphold.io/graphql/scaphold-graphql", {
  method: 'POST',
  body: form
}).then(function(res) {
  return res.text();
}).then(function(body) {
  console.log(body);
});

Where it adds a blobField to the request body.

Based on this, I need to pass into the variables a blobFieldName property, and then add to the request body the value passed to that property with the blob. However, using Apollo I can't add to the request body. I tried the following, but it's absent from the request body when I check in the network inspector:

export const withCreateCoverPhoto = graphql(CreateCoverPhoto, {
  props: ({mutate}) => ({
    createCoverPhoto: (name, file) => mutate({
      variables: {
        input: {
          blobFieldName: name,
        },
      },
      [name]: file
    }),
  }),
});

Please advise.

score 1 · Accepted Answer · answered Mar 29 '17 at 17:08

Thanks for the question. Currently the best way to upload files is by [appending it to FormData and sending it up to the server using fetch] (https://medium.com/@danielbuechele/file-uploads-with-graphql-and-apollo-5502bbf3941e). Basically, you won't be able to have caching here for the file itself, but this is the best way to handle uploading files on Scaphold using a multipart request.

How to add additional request body values to Apollo GraphQL request?

1 Answers1