This fork modifies the request format to support Absinthe's way of handling file uploads.
Enhances Apollo for intuitive file uploads via GraphQL queries or mutations. Use with the Absinthe library for Elixir.
Install with peer dependencies using npm:
npm install @richeterre/apollo-upload-client apollo-link
Initialize Apollo Client with this terminating link:
import { createUploadLink } from '@richeterre/apollo-upload-client'
const link = createUploadLink(/* Options */)
createUploadLink
options match createHttpLink
options:
includeExtensions
(boolean): Toggles sendingextensions
fields to the GraphQL server. (default:false
).uri
(string): GraphQL endpoint URI (default:/graphql
).credentials
(string): OverridesfetchOptions.credentials
.headers
(object): Merges with and overridesfetchOptions.headers
.fetchOptions
(object):fetch
init; overridden by upload requirements.fetch
(function): Fetch API to use (default: Globalfetch
).
Use FileList
, File
, Blob
or ReactNativeFile
instances anywhere within query or mutation input variables, as you would with strings, integers and other types.
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 } })
}
/>
))
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 } })
}
/>
))
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 }
})
Substitute File
with ReactNativeFile
from extract-files
:
import { ReactNativeFile } from '@richeterre/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'
}
])
- Node.js v6.10+, see
package.json
engines
. - Browsers >1% usage, see
package.json
browserslist
. - React Native.