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.
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.
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.
Be aware that inspecting network requests with Chrome dev tools interferes with the React Native FormData
implementation, causing network errors.
Type: Object
Property | Type | Description |
---|---|---|
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 . |
A camera roll file.
{ uri: uriFromCameraRoll, name: 'a.jpg', type: 'image/jpeg' }