JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 720090
  • Score
    100M100P100Q193661F
  • License MIT

Enhances Apollo Client for intuitive file uploads via GraphQL mutations.

Package Exports

  • apollo-upload-client

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (apollo-upload-client) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

React Native installs packages without their dev dependencies and unconventionally Babel is run over node_modules. Babel errors when it tries to respect config found in this package with presets and plugins absent. To overcome this install these dev dependencies (at versions matching package.json):

npm install --save-dev babel-preset-env babel-preset-stage-0 babel-plugin-transform-runtime

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.

For React Native, any object with the properties name, type and uri within variables will be treated as a file.

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