apollo-upload-client

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

Setup

Install with npm:

npm install 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 { createBatchingNetworkInterface } from 'apollo-upload-client'

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

Also setup apollo-upload-server.

Usage

Once setup, you will be able to use FileList, File and ReactNativeFile instances anywhere within mutation or query input variables.

With apollo-upload-server setup, the files upload to a temp directory. Upload input type metadata replaces file instances in the arguments received by the resolver. See the server usage.

Single file

See server usage for this example.

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

export default graphql(gql`
  mutation updateUserAvatar($userId: String!, $avatar: Upload!) {
    updateUserAvatar(userId: $userId, avatar: $avatar) {
      id
    }
  }
`)(({ userId, mutate }) => {
  const handleChange = ({ target }) => {
    if (target.validity.valid) {
      mutate({
        variables: {
          userId,
          avatar: target.files[0]
        }
      }).then(({ data }) => console.log('Mutation response:', data))
    }
  }

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

Multiple files

See server usage for this example.

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

export default graphql(gql`
  mutation updateGallery($galleryId: String!, $images: [Upload!]!) {
    updateGallery(galleryId: $galleryId, images: $images) {
      id
    }
  }
`)(({ galleryId, mutate }) => {
  const handleChange = ({ target }) => {
    if (target.validity.valid) {
      mutate({
        variables: {
          galleryId,
          images: target.files
        }
      }).then(({ data }) => console.log('Mutation response:', data))
    }
  }

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

React Native

React Native polyfills FormData under the hood and objects with the properties uri, type and name substitute window.File. It would be risky to assume all objects with those properties in variables are files. Use ReactNativeFile instances in query or mutation variables to explicitly mark files for upload:

import { ReactNativeFile } from 'apollo-upload-client'

// ✂

// Single file
const file = new ReactNativeFile({
  uri: uriFromCameraRoll,
  type: 'image/jpeg',
  name: 'photo.jpg'
})

// Multiple files
const files = ReactNativeFile.list({
  uri: uriFromCameraRoll1,
  type: 'image/jpeg',
  name: 'photo-1.jpg'
}, {
  uri: uriFromCameraRoll2,
  type: 'image/jpeg',
  name: 'photo-2.jpg'
})

// ✂

Support

• > 2% market share browsers.
• React Native.

Inspiration

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