apollo-upload-client
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 { createBatchingNetworkInterface } from 'apollo-upload-client'
const client = new ApolloClient({
networkInterface: createBatchingNetworkInterface({
uri: '/graphql'
})
})
Also setup apollo-upload-server.
Usage
Once setup, you will be able to use FileList, File and ReactNativeFile instances anywhere within mutation or query input variables.
With apollo-upload-server setup, the files upload to a temp directory. Upload input type metadata replaces file instances in the arguments received by 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: Upload!) {
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: [Upload!]!) {
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}
/>
)
})
React Native
React Native polyfills FormData under the hood and objects with the properties uri, type and name substitute window.File. It would be risky to assume all objects with those properties in variables are files. Use ReactNativeFile instances in query or mutation variables to explicitly mark files for upload:
import { ReactNativeFile } from 'apollo-upload-client'
// ✂
// Single file
const file = new ReactNativeFile({
uri: uriFromCameraRoll,
type: 'image/jpeg',
name: 'photo.jpg'
})
// Multiple files
const files = ReactNativeFile.list({
uri: uriFromCameraRoll1,
type: 'image/jpeg',
name: 'photo-1.jpg'
}, {
uri: uriFromCameraRoll2,
type: 'image/jpeg',
name: 'photo-2.jpg'
})
// ✂
Support
- > 2% market share browsers.
- React Native.
Inspiration
