apollo-upload-client-temp v6.0.3

apollo-upload-client

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

Setup

Install with peer dependencies using npm:

npm install apollo-upload-client apollo-link graphql

Initialize Apollo Client with this terminating link:

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

const link = createUploadLink({
  // Options…
})

See also the setup instructions for the apollo-upload-server middleware.

Options

createUploadLink options match createHttpLink options:

• includeExtensions: Toggles sending extensions fields to the GraphQL server. Default is false.
• uri: GraphQL endpoint URI. Default is /graphql.
• credentials: Overrides fetchOptions.credentials.
• headers: Merges with and overrides fetchOptions.headers.
• fetchOptions: fetch init object. Overridden by upload requirements.
• fetch: Default is global fetch.

Usage

Use File, FileList or ReactNativeFile instances anywhere within mutation or query 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.