
apollo-upload-client

A terminating Apollo Link for Apollo Client that allows FileList
, File
, Blob
or ReactNativeFile
instances within query or mutation variables and sends GraphQL multipart requests.
Setup
Install with npm:
npm install apollo-upload-client
Apollo Boost doesn’t allow link customization; if you are using it migrate to a manual Apollo Client setup.
Apollo Client can only have 1 “terminating” Apollo Link that sends the GraphQL requests; if one such as apollo-link-http
is already setup, remove it.
Initialize the client with a terminating link using createUploadLink
.
Also ensure the GraphQL server implements the GraphQL multipart request spec and that uploads are handled correctly in resolvers.
Usage
Use FileList
, File
, Blob
or ReactNativeFile
instances anywhere within query or mutation variables to send a GraphQL multipart request.
See also the example API and client.
const gql = require('graphql-tag')
const { Mutation } = require('react-apollo')
const UploadFiles = () => (
<Mutation
mutation={gql`
mutation($files: [Upload!]!) {
uploadFiles(files: $files) {
success
}
}
`}
>
{mutate => (
<input
type="file"
multiple
required
onChange={({ target: { validity, files } }) =>
validity.valid && mutate({ variables: { files } })
}
/>
)}
</Mutation>
)
const gql = require('graphql-tag')
const { Mutation } = require('react-apollo')
const UploadFile = () => (
<Mutation
mutation={gql`
mutation($file: Upload!) {
uploadFile(file: $file) {
success
}
}
`}
>
{mutate => (
<input
type="file"
required
onChange={({
target: {
validity,
files: [file]
}
}) => validity.valid && mutate({ variables: { file } })}
/>
)}
</Mutation>
)
const gql = require('graphql-tag')
const client = require('./client')
const file = new Blob(['Foo.'], { type: 'text/plain' })
file.name = 'bar.txt'
client.mutate({
mutation: gql`
mutation($file: Upload!) {
uploadFile(file: $file) {
success
}
}
`,
variables: { file }
})
Support
API
Table of contents
class ReactNativeFile
Used to mark a React Native File
substitute. It’s too risky to assume all objects with uri
, type
and name
properties are files to extract. Re-exported from extract-files
for convenience.
Examples
A React Native file that can be used in query or mutation variables.
const { ReactNativeFile } = require('apollo-upload-client')
const file = new ReactNativeFile({
uri: uriFromCameraRoll,
name: 'a.jpg',
type: 'image/jpeg'
})
function createUploadLink
Creates a terminating Apollo Link capable of file uploads. Options match createHttpLink
.
options | Object | Options. |
options.uri | string? = /graphql | GraphQL endpoint URI. |
options.fetch | function? | fetch implementation to use, defaulting to the fetch global. |
options.fetchOptions | FetchOptions? | fetch options; overridden by upload requirements. |
options.credentials | string? | Overrides options.fetchOptions.credentials . |
options.headers | Object? | Merges with and overrides options.fetchOptions.headers . |
options.includeExtensions | boolean? = false | Toggles sending extensions fields to the GraphQL server. |
Returns: ApolloLink — A terminating Apollo Link capable of file uploads.
See
Examples
A basic Apollo Client setup.
const { ApolloClient } = require('apollo-client')
const { InMemoryCache } = require('apollo-cache-inmemory')
const { createUploadLink } = require('apollo-upload-client')
const client = new ApolloClient({
cache: new InMemoryCache(),
link: createUploadLink()
})
type FetchOptions
GraphQL request fetch
options.
Type: Object
headers | Object | HTTP request headers. |
credentials | string? | Authentication credentials mode. |
See
type ReactNativeFileSubstitute
A React Native File
substitute.
Be aware that inspecting network requests with Chrome dev tools interferes with the React Native FormData
implementation, causing network errors.
Type: Object
uri | String | Filesystem path. |
name | String? | File name. |
type | String? | File content type. Some environments (particularly Android) require a valid MIME type; Expo ImageResult.type is unreliable as it can be just image . |
See
Examples
A camera roll file.
{
uri: uriFromCameraRoll,
name: 'a.jpg',
type: 'image/jpeg'
}