Enhances Apollo for intuitive file uploads via GraphQL queries or mutations. Use with apollo-upload-server.
Install with peer dependencies using npm:
npm install apollo-upload-client apollo-link graphqlInitialize Apollo Client with this terminating link:
import { createUploadLink } from 'apollo-upload-client'
const link = createUploadLink(/* Options */)See also the setup instructions for the apollo-upload-server middleware.
createUploadLink options match createHttpLink options:
includeExtensions(boolean): Toggles sendingextensionsfields 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):fetchinit; overridden by upload requirements.fetch(function): Fetch API to use (default: Globalfetch).
Use File, FileList or ReactNativeFile instances anywhere within query or mutation input variables. For server instructions see apollo-upload-server. See the example API and client.
File example
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 }) =>
target.validity.valid && mutate({ variables: { file: target.files[0] } })
}
/>
))FileList example
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 }) =>
target.validity.valid && mutate({ variables: { files: target.files } })
}
/>
))Substitute File with ReactNativeFile from extract-files:
import { ReactNativeFile } from '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.jsonengines. - Browsers >1% usage, see
package.jsonbrowserslist. - React Native.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent