fetch-multipart-graphql

Cross-browser function to fetch and parse streaming multipart graphql responses.

This allows you to efficiently fetch streamed GraphQL responses that use the @defer directive as supported by Apollo Server. It can be easily used in a Relay Modern network layer to support deferred queries.

Usage

In a Relay Network Layer:

import fetchMultipart from 'fetch-multipart-graphql';
import { Observable } from 'relay-runtime';

function fetchQuery(operation, variables) {
    return Observable.create(sink => {
        fetchMultipart('/graphql', {
            method: 'POST',
            headers: {
                'content-type': 'application/json',
            },
            body: JSON.stringify({
                query: operation.text,
                variables,
            }),
            credentials: 'same-origin',
            onNext: parts => sink.next(parts),
            onError: err => sink.error(err),
            onComplete: () => sink.complete(),
        });
    });
}

Handling cookies and other auth headers

The credentials param is passed to fetch. For XHR requests, XMLHttpRequest.withCredentials is mapped to true when credentials: 'include'.

Handling additional request settings

When fetch is not available requests are sent through XHR, which supports standard method, headers, credentials and body settings; as seen in the code example above. When requests are sent through fetch we can also set, in addition to the properties already mentioned, all the options supported by fetch.

Browser Support

Tested in the latest Chrome, Firefox, Safari, Edge, and Internet Explorer 11. Requires a polyfill for TextEncoder/Decoder. Since only utf-8 encoding is required, it's recommended to use text-encoding-utf-8 to minimize impact on bundle size.