@allsquare/apollo-upload-client

apollo-upload-client

Enhances Apollo for intuitive file uploads via GraphQL queries or mutations. Use with a GraphQL multipart request spec server implementation such as apollo-upload-server.

IMPORTANT NOTICE

This package has been modified to work with older versions of apollo-upload-server, but still retain compatibility with apollo-client > 2.0.

The sole purpose of this package is to allow an apollo-client v2 to communicate with a GraphQL backed that was built to work with earlier versions of apollo-upload-client, that are not compatible with apollo-client v2.

This package has been modified to mimic client requests of apollo-upload-client version ^5.1.1, while keeping apollo-client v2 compatibility.

Now I've said it 3 times, I hope that's clear enough. If you intented to indeed use this client to work with older servers, feel free to grab version 8.0.2 and see the magic happen!

Setup

Install with peer dependencies using npm:

npm install apollo-upload-client apollo-link

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 FileList, File, Blob or ReactNativeFile instances anywhere within query or mutation input variables to send a GraphQL multipart request. See also apollo-upload-server usage and the example API and client.

FileList

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: { validity, files } }) =>
      validity.valid && mutate({ variables: { files } })
    }
  />
))

File

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: {
        validity,
        files: [file]
      }
    }) => validity.valid && mutate({ variables: { file } })}
  />
))

Blob

import gql from 'graphql-tag'

// Apollo Client instance
import client from './apollo'

const file = new Blob(['Foo.'], { type: 'text/plain' })

// Optional, defaults to `blob`
file.name = 'bar.txt'

client.mutate({
  mutation: gql`
    mutation($file: Upload!) {
      uploadFile(file: $file) {
        id
      }
    }
  `,
  variables: { file }
})

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

• Node.js v6.10+, see package.json engines.
• Browsers >1% usage, see package.json browserslist.
• React Native.