Multipart Fetch Exchange

The @urql/exchange-multipart-fetch package contains an addon multipartFetchExchange for urql that enables file uploads via multipart/form-data POST requests.

It follows the unofficial GraphQL Multipart Request Spec which is supported by the Apollo Sever package.

This exchange uses the same fetch logic as the fetchExchange and the persistedFetchExchange by reusing logic from @urql/core/internal. The multipartFetchExchange is a drop-in replacement for the default fetchExchange and will act exactly like the fetchExchange unless the variables that it receives for mutations contain any Files as detected by the extract-files package.

Installation and Setup

First install @urql/exchange-multipart-fetch alongside urql:

yarn add @urql/exchange-multipart-fetch
# or
npm install --save @urql/exchange-multipart-fetch

The multipartFetchExchange is a drop-in replacement for the fetchExchange, which should be replaced in the list of exchanges:

import { createClient, dedupExchange, cacheExchange } from 'urql';
import { multipartFetchExchange } from '@urql/exchange-multipart-fetch';

const client = createClient({
  url: '/graphql',
  exchanges: [dedupExchange, cacheExchange, multipartFetchExchange],
});