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.