apollo-upload-client

What is apollo-upload-client?

The apollo-upload-client package is a client for Apollo GraphQL that enables file uploads via GraphQL mutations. It extends Apollo Client to support file uploads using the GraphQL multipart request specification.

What are apollo-upload-client's main functionalities?

File Upload

This feature allows you to upload files via GraphQL mutations. The code sample demonstrates how to set up an Apollo Client with the upload link and perform a file upload mutation.

const { ApolloClient, InMemoryCache, HttpLink } = require('@apollo/client');
const { createUploadLink } = require('apollo-upload-client');

const link = createUploadLink({ uri: 'http://localhost:4000/graphql' });

const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
});

const UPLOAD_FILE = gql`
  mutation($file: Upload!) {
    uploadFile(file: $file) {
      url
    }
  }
`;

const file = new File(['foo'], 'foo.txt', {
  type: 'text/plain',
});

client.mutate({
  mutation: UPLOAD_FILE,
  variables: { file }
}).then(response => {
  console.log(response.data.uploadFile.url);
});

Other packages similar to apollo-upload-client

apollo-link-rest

This package allows you to call REST endpoints from Apollo Client. While it does not specifically handle file uploads, it can be used to integrate RESTful file upload endpoints with Apollo Client.

graphql-request

A minimal GraphQL client that supports file uploads via the multipart request specification. It is more lightweight compared to apollo-upload-client and can be used in environments where a full Apollo Client setup is not required.

README

Enhances Apollo for intuitive file uploads via GraphQL mutations or queries. Use with Apollo upload server.

• > 2% market share browsers supported.
• MIT license.

Setup

Install with Yarn:

yarn add apollo-upload-client

Setup Apollo client with a special network interface:

import ApolloClient from 'apollo-client'
import {createNetworkInterface} from 'apollo-upload-client'

const client = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: '/graphql'
  })
})

Alternatively enable query batching:

import ApolloClient from 'apollo-client'
import {createBatchNetworkInterface} from 'apollo-upload-client'

const client = new ApolloClient({
  networkInterface: createBatchNetworkInterface({
    uri: '/graphql',
    batchInterval: 10
  })
})

Also setup Apollo upload server.

Usage

Once setup, you will be able to use File objects, FileList objects, or File arrays within query or mutation input variables.

The files upload to a temp directory; the paths and metadata will be available under the variable name in the resolver. See the server usage.

Single file

See server usage for this example.

import React, {Component, PropTypes} from 'react'
import {graphql} from 'react-apollo'
import gql from 'graphql-tag'

@graphql(gql`
  mutation updateUserAvatar ($userId: String!, $avatar: File!) {
    updateUserAvatar (userId: $userId, avatar: $avatar) {
      id
    }
  }
`)
export default class extends Component {
  static propTypes = {
    userId: PropTypes.string.isRequired,
    mutate: PropTypes.func.isRequired
  }

  onChange = ({target}) => {
    if (target.validity.valid) {
      this.props
        .mutate({
          variables: {
            userId: this.props.userId,
            avatar: target.files[0]
          }
        })
        .then(({data}) => console.log('Mutation response:', data))
    }
  }

  render () {
    return <input type='file' accept={'image/jpeg,image/png'} required onChange={this.onChange} />
  }
}

Multiple files

See server usage for this example.

import React, {Component, PropTypes} from 'react'
import {graphql} from 'react-apollo'
import gql from 'graphql-tag'

@graphql(gql`
  mutation updateGallery ($galleryId: String!, $images: [File!]!) {
    updateGallery (galleryId: $galleryId, images: $images) {
      id
    }
  }
`)
export default class extends Component {
  static propTypes = {
    galleryId: PropTypes.string.isRequired,
    mutate: PropTypes.func.isRequired
  }

  onChange = ({target}) => {
    if (target.validity.valid) {
      this.props
        .mutate({
          variables: {
            galleryId: this.props.galleryId,
            images: target.files
          }
        })
        .then(({data}) => console.log('Mutation response:', data))
    }
  }

  render () {
    return <input type='file' accept={'image/jpeg,image/png'} multiple required onChange={this.onChange} />
  }
}

Inspiration

• @HriBB’s graphql-server-express-upload and apollo-upload-network-interface projects.
• @danielbuechele’s Medium article.
• @jessedvrs’s example code.