/apollo-upload-client

Enhances Apollo for intuitive file uploads via GraphQL mutations.

Primary LanguageJavaScript

Apollo upload client

NPM version Github issues Github stars

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 {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 from 'react'
import {graphql, gql} from 'react-apollo'

export default graphql(gql`
  mutation updateUserAvatar ($userId: String!, $avatar: File!) {
    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: [File!]!) {
    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} />
})

Inspiration