apollo-upload-client

A terminating Apollo Link for Apollo Client that allows FileList, File, Blob instances within query or mutation variables and sends GraphQL multipart requests.

Setup

Install with npm:

npm install apollo-js-multipart

Apollo Boost doesn’t allow link customization; if you are using it migrate to a manual Apollo Client setup.

Apollo Client can only have 1 “terminating” Apollo Link that sends the GraphQL requests; if one such as apollo-link-http is already setup, remove it.

Initialize the client with a terminating link using createUploadLink.

Also ensure the GraphQL server implements the GraphQL multipart request spec and that uploads are handled correctly in resolvers.

Usage

import gql from 'graphql-tag';
import VueApollo from 'vue-apollo';
import apolloJSMultipart from 'apollo-js-multipart';

$apollo
  .mutate({
    mutation: QUERY,
    context: {
      fileUpload: this.file ? true : false
    },
    variables: {
      file: this.file
    }
  })
  .then(res => {
    console.log('File Uploaded Successfully');
  })
  .catch(err => {
    console.log('Error while Uploading file');
  });