@graphiql/create-fetcher

a utility for generating a full-featured fetcher for GraphiQL including @stream, @defer IncrementalDeliveryand multipart

under the hood, it uses graphql-ws and meros which act as client reference implementations of the GraphQL over HTTP Working Group Spec specification, and the most popular transport spec proposals

Setup

graphiql and thus react and react-dom should already be installed.

you'll need to install @graphiql/create-fetcher

npm

npm install --save @graphiql/create-fetcher

yarn

yarn add @graphiql/create-fetcher

Getting Started

We have a few flexible options to get you started with the client. It's meant to cover the majority of common use cases with a simple encapsulation.

HTTP/Multipart Usage

Here's a simple example. In this case, a websocket client isn't even initialized, only http (with multipart @stream and @defer support of course!).

import * as React from 'react';
import ReactDOM from 'react-dom';
import { GraphiQL } from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/create-fetcher';

const url = 'https://myschema.com/graphql';

const fetcher = createGraphiQLFetcher({ url });

export const App = () => <GraphiQL fetcher={fetcher} />;

ReactDOM.render(document.getElementByID('graphiql'), <App />);

HTTP/Multipart & Websockets

Just by providing the subscriptionUrl, you can generate a graphql-ws client

import * as React from 'react';
import ReactDOM from 'react-dom';
import { GraphiQL } from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/create-fetcher';

const url = 'https://myschema.com/graphql';

const subscriptionUrl = 'wss://myschema.com/graphql';

const fetcher = createGraphiQLFetcher({
  url,
  subscriptionUrl,
});

export const App = () => <GraphiQL fetcher={fetcher} />;

ReactDOM.render(document.getElementByID('graphiql'), <App />);

You can further customize the wsClient implementation below

Options

url (required)

This is url used for all HTTP requests, and for schema introspection.

subscriptionUrl

This generates a graphql-ws client.

wsClient

provide your own subscriptions client. bypasses subscriptionUrl. In theory, this could be any client using any transport, as long as it matches graphql-ws Client signature.

headers

Pass headers to any and all requests

fetch

Pass a custom fetch implementation such as isomorphic-feth

Customization Examples

Custom wsClient Example

Just by providing the subscriptionUrl

import * as React from 'react';
import ReactDOM from 'react-dom';
import { GraphiQL } from 'graphiql';
import { createClient } from 'graphql-ws';
import { createGraphiQLFetcher } from '@graphiql/create-fetcher';

const url = 'https://myschema.com/graphql';

const subscriptionUrl = 'wss://myschema.com/graphql';

const fetcher = createGraphiQLFetcher({
  url,
  wsClient: createClient({
    url: subscriptionUrl,
    keepAlive: 2000,
  }),
});

export const App = () => <GraphiQL fetcher={fetcher} />;

ReactDOM.render(document.getElementByID('graphiql'), <App />);

Custom fetcher Example

For SSR, we might want to use something like isomorphic-fetch

import * as React from 'react';
import ReactDOM from 'react-dom';
import { GraphiQL } from 'graphiql';
import { fetch } from 'isomorphic-fetch';
import { createGraphiQLFetcher } from '@graphiql/create-fetcher';

const url = 'https://myschema.com/graphql';

const fetcher = createGraphiQLFetcher({
  url,
  fetch,
});

export const App = () => <GraphiQL fetcher={fetcher} />;

ReactDOM.render(document.getElementByID('graphiql'), <App />);