Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
apollo-upload-client
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.
The apollo-upload-client package is a client for Apollo GraphQL that enables file uploads via GraphQL mutations. It extends Apollo Client to support file uploads using the GraphQL multipart request specification.
File Upload
This feature allows you to upload files via GraphQL mutations. The code sample demonstrates how to set up an Apollo Client with the upload link and perform a file upload mutation.
const { ApolloClient, InMemoryCache, HttpLink } = require('@apollo/client');
const { createUploadLink } = require('apollo-upload-client');
const link = createUploadLink({ uri: 'http://localhost:4000/graphql' });
const client = new ApolloClient({
link,
cache: new InMemoryCache()
});
const UPLOAD_FILE = gql`
mutation($file: Upload!) {
uploadFile(file: $file) {
url
}
}
`;
const file = new File(['foo'], 'foo.txt', {
type: 'text/plain',
});
client.mutate({
mutation: UPLOAD_FILE,
variables: { file }
}).then(response => {
console.log(response.data.uploadFile.url);
});
This package allows you to call REST endpoints from Apollo Client. While it does not specifically handle file uploads, it can be used to integrate RESTful file upload endpoints with Apollo Client.
A minimal GraphQL client that supports file uploads via the multipart request specification. It is more lightweight compared to apollo-upload-client and can be used in environments where a full Apollo Client setup is not required.
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 { useMutation } = require('@apollo/react-hooks');
const gql = require('graphql-tag');
const MUTATION = gql`
mutation($files: [Upload!]!) {
uploadFiles(files: $files) {
success
}
}
`;
function UploadFiles() {
const [mutate] = useMutation(MUTATION);
function onChange({ target: { validity, files } }) {
if (validity.valid) mutate({ variables: { files } });
}
return <input type="file" multiple required onChange={onChange} />;
}
File
const { useMutation } = require('@apollo/react-hooks');
const gql = require('graphql-tag');
const MUTATION = gql`
mutation($file: Upload!) {
uploadFile(file: $file) {
success
}
}
`;
function UploadFile() {
const [mutate] = useMutation(MUTATION);
function onChange({
target: {
validity,
files: [file],
},
}) {
if (validity.valid) mutate({ variables: { file } });
}
return <input type="file" required onChange={onChange} />;
}
Blob
const { useMutation } = require('@apollo/react-hooks');
const gql = require('graphql-tag');
const MUTATION = gql`
mutation($file: Upload!) {
uploadFile(file: $file) {
success
}
}
`;
function UploadFile() {
const [mutate] = useMutation(MUTATION);
function onChange({ target: { validity, value } }) {
if (validity.valid) {
const file = new Blob([value], { type: 'text/plain' });
// Optional, defaults to `blob`.
file.name = 'text.txt';
mutate({ variables: { file } });
}
}
return <input type="text" required onChange={onChange} />;
}
> 0.5%, not OperaMini all, not dead
Consider polyfilling:
Used to mark React Native File
substitutes as it’s too risky to assume all objects with uri
, type
and name
properties are extractable files.
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.
The link matches and extracts files in the GraphQL operation. If there are files it uses a FormData
instance as the fetch
options.body
to make a GraphQL multipart request, otherwise it sends a regular POST request.
Some of the options are similar to the createHttpLink
options.
Parameter | Type | Description |
---|---|---|
options | object | Options. |
options.uri | string? = /graphql | GraphQL endpoint URI. |
options.isExtractableFile | ExtractableFileMatcher? = isExtractableFile | Customizes how files are matched in the GraphQL operation for extraction. |
options.FormData | class? | FormData implementation to use, defaulting to the FormData global. |
options.formDataAppendFile | FormDataFileAppender? = formDataAppendFile | Customizes how extracted files are appended to the FormData instance. |
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(),
});
The default implementation for createUploadLink
options.formDataAppendFile
that uses the standard FormData.append
method.
Type: FormDataFileAppender
Parameter | Type | Description |
---|---|---|
formData | FormData | FormData instance to append the specified file to. |
fieldName | string | Field name for the file. |
file | * | File to append. |
The default implementation for createUploadLink
options.isExtractableFile
.
Type: ExtractableFileMatcher
Parameter | Type | Description |
---|---|---|
value | * | Value to check. |
Returns: boolean — Is the value an extractable file.
A function that checks if a value is an extractable file.
Type: Function
Parameter | Type | Description |
---|---|---|
value | * | Value to check. |
Returns: boolean — Is the value an extractable file.
isExtractableFile
has this type.How to check for the default exactable files, as well as a custom type of file.
const { isExtractableFile } = require('apollo-upload-client');
const isExtractableFileEnhanced = (value) =>
isExtractableFile(value) ||
(typeof CustomFile !== 'undefined' && value instanceof CustomFile);
GraphQL request fetch
options.
Type: object
Property | Type | Description |
---|---|---|
headers | object | HTTP request headers. |
credentials | string? | Authentication credentials mode. |
Appends a file extracted from the GraphQL operation to the FormData
instance used as the fetch
options.body
for the GraphQL multipart request.
Parameter | Type | Description |
---|---|---|
formData | FormData | FormData instance to append the specified file to. |
fieldName | string | Field name for the file. |
file | * | File to append. The file type depends on what the ExtractableFileMatcher extracts. |
formDataAppendFile
has this type.createUploadLink
accepts this type in options.formDataAppendFile
.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'
}
FAQs
A terminating Apollo Link for Apollo Client that fetches a GraphQL multipart request if the GraphQL variables contain files (by default FileList, File, or Blob instances), or else fetches a regular GraphQL POST or GET request (depending on the config and
The npm package apollo-upload-client receives a total of 502,949 weekly downloads. As such, apollo-upload-client popularity was classified as popular.
We found that apollo-upload-client demonstrated a healthy version release cadence and project activity because the last version was released less than 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.