apollo-upload-client

This is a fork that is used to be able to support Absinthe's way of handling file uploads

Enhances Apollo for intuitive file uploads via GraphQL queries or mutations.

Setup

Install with peer dependencies using npm:

npm install @novistore/apollo-upload-client apollo-link graphql

Initialize Apollo Client with this terminating link:

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

const link = createUploadLink(/* Options */)

Options

createUploadLink options match createHttpLink options:

• includeExtensions (boolean): Toggles sending extensions fields to the GraphQL server. (default: false).
• uri (string): GraphQL endpoint URI (default: /graphql).
• credentials (string): Overrides fetchOptions.credentials.
• headers (object): Merges with and overrides fetchOptions.headers.
• fetchOptions (object): fetch init; overridden by upload requirements.
• fetch (function): Fetch API to use (default: Global fetch).

Usage

Use File, FileList or ReactNativeFile instances anywhere within query or mutation input variables. For server instructions see apollo-upload-server. See the example API and client.

File example

import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

export default graphql(gql`
  mutation($file: Upload!) {
    uploadFile(file: $file) {
      id
    }
  }
`)(({ mutate }) => (
  <input
    type="file"
    required
    onChange={({ target }) =>
      target.validity.valid && mutate({ variables: { file: target.files[0] } })
    }
  />
))

FileList example

import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

export default graphql(gql`
  mutation($files: [Upload!]!) {
    uploadFiles(files: $files) {
      id
    }
  }
`)(({ mutate }) => (
  <input
    type="file"
    multiple
    required
    onChange={({ target }) =>
      target.validity.valid && mutate({ variables: { files: target.files } })
    }
  />
))

React Native

Substitute File with ReactNativeFile from extract-files:

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

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

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

Support

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