The Guild LogoThe Guild Monogram

Search docs

Search icon

Products by The Guild

Products

Hive logoHive blurred logo

Hive

Schema Registry for your GraphQL Workflows

Docs

Get Started

GraphQL Upload#

In GQty you can add File Upload support easily, following the GraphQL multipart request specification.

Preparation#

Normally, in the API servers, they implement graphql-upload, inbuilt in Apollo Server, or via mercurius-upload for Fastify.

Meanwhile in the client, to follow the GraphQL multipart spec, you can easily use extract-files.

yarn add extract-files yarn add -D @types/extract-files

And then, use it in your QueryFetcher, like the following example:

Compatible with browser's File and Blob, and React Native using ReactNativeFile

import { extractFiles } from 'extract-files'; // ... const queryFetcher: QueryFetcher = async function (query, variables) { const extracted = extractFiles({ query, variables, }); if (extracted.files.size > 0) { const form = new FormData(); form.append('operations', JSON.stringify(extracted.clone)); const map: Record<number, string[]> = {}; let i = 0; extracted.files.forEach((paths) => { map[++i] = paths; }); form.append('map', JSON.stringify(map)); i = 0; extracted.files.forEach((_paths, file) => { form.append(++i + '', file as File); }); const response = await fetch('/api/graphql', { method: 'POST', headers: {}, body: form, mode: 'cors', }); const json = await response.json(); return json; } // Fallback to regular queries const response = await fetch('/api/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ query, variables, }), mode: 'cors', }); const json = await response.json(); return json; };

Usage#

Core#

Since the images are not serializable, GQty might be confused while using them, that's why you have to specify a special option nonSerializableVariables in your resolveds

import { resolved, mutation } from '../gqty'; resolved( () => { return mutation.uploadFile({ file, })!; }, { //... // You should specify this flag nonSerializableVariables: true, } ) .then((data) => { // ... }) .catch((error) => { // ... });

React#

Since the images are not serializable, GQty might be confused while using them, that's why you have to specify a special option nonSerializableVariables in your useMutations

const [uploadFile, { isLoading, data, error }] = useMutation( (mutation, file: File) => { return mutation.uploadFile({ file, })!; }, { // ... // You should specify this flag nonSerializableVariables: true, } );