An Apollo Link for Apollo Client that allows FileList, File, Blob or ReactNativeFile instances within query or mutation variables and sends GraphQL multipart requests.
Install with npm:
npm install apollo-upload-clientIf you use Apollo Boost, migrate to a manual Apollo Client setup.
Initialize Apollo Client with a terminating Apollo Link using createUploadLink.
Also ensure the GraphQL server implements the GraphQL multipart request spec and that uploads are handled correctly in resolvers.
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')
// Apollo Client instance.
const client = require('./client')
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) {
success
}
}
`,
variables: { file }
})- Node.js v6+
- Browsers
> 0.5%, not dead - React Native
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.
| Parameter | Type | Description |
|---|---|---|
file |
ReactNativeFileSubstitute | A React Native File substitute. |
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' })
Creates a terminating Apollo Link capable of file uploads. Options match createHttpLink.
| Parameter | Type | Description |
|---|---|---|
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.
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() })
GraphQL request fetch options.
Type: Object
| Property | Type | Description |
|---|---|---|
headers |
Object | HTTP request headers. |
credentials |
string? | Authentication credentials mode. |
A React Native File substitute.
Type: Object
| Property | Type | Description |
|---|---|---|
uri |
String | Filesystem path. |
name |
String? | File name. |
type |
String? | File content type. |
A camera roll file.
{ uri: uriFromCameraRoll, name: 'a.jpg', type: 'image/jpeg' }