
Security News
rv Is a New Rust-Powered Ruby Version Manager Inspired by Python's uv
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
apollo-upload-client-with-persisted-queries
Advanced tools
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.
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.
FileList
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>
)
File
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>
)
Blob
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 }
})
> 0.5%, not dead
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'
}
11.0.0
@babel/runtime
dependency and @babel/plugin-transform-runtime
dev dependency.FAQs
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.
The npm package apollo-upload-client-with-persisted-queries receives a total of 0 weekly downloads. As such, apollo-upload-client-with-persisted-queries popularity was classified as not popular.
We found that apollo-upload-client-with-persisted-queries demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.