After setting up your server, you can integrate subscriptions into GraphiQL, the in-browser GraphQL IDE.
To get started, make a page for rendering GraphiQL, for example:
<!-- views/graphiqls/show.html -->
<div id="root" style="height: 100vh;"></div>
Then, install GraphiQL (eg, yarn add graphiql) and add JavaScript code to import GraphiQL and render it on your page:
import { GraphiQL } from 'graphiql';
import React from 'react';
import { createRoot } from 'react-dom/client';
import 'graphiql/graphiql.css';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
const fetcher = createGraphiQLFetcher({ url: '/graphql' });
const root = createRoot(document.getElementById('root'));
root.render(<GraphiQL fetcher={fetcher}/>);
After that, you should be able to load the page in your app and see the GraphiQL editor.
To integrate Ably subscriptions, use createAblyFetcher, for example:
import Ably from "ably"
import createAblyFetcher from 'graphql-ruby-client/subscriptions/createAblyFetcher';
// Initialize a client
// the key must have "subscribe" and "presence" permissions
const ably = new Ably.Realtime({ key: "your.application.key" })
// Initialize a new fetcher and pass it to GraphiQL below
var fetcher = createAblyFetcher({ ably: ably, url: "/graphql" })
const root = createRoot(document.getElementById('root'));
root.render(<GraphiQL fetcher={fetcher} />);
Under the hood, it will use window.fetch to send GraphQL operations to the server, then listen for X-Subscription-ID headers in responses. To customize its HTTP requests, you can pass a fetchOptions: object or a custom fetch: function to createAblyFetcher({ ... }).
To integrate Pusher subscriptions, use createPusherFetcher, for example:
import Pusher from "pusher-js"
import createPusherFetcher from 'graphql-ruby-client/subscriptions/createPusherFetcher';
// Initialize a client
const pusher = new Pusher("your-app-key", { cluster: "your-cluster" })
// Initialize a new fetcher and pass it to GraphiQL below
var fetcher = createPusherFetcher({ pusher: pusher, url: "/graphql" })
const root = createRoot(document.getElementById('root'));
root.render(<GraphiQL fetcher={fetcher} />);
Under the hood, it will use window.fetch to send GraphQL operations to the server, then listen for X-Subscription-ID headers in responses. To customize its HTTP requests, you can pass a fetchOptions: object or a custom fetch: function to createPusherFetcher({ ... }).
To integrate ActionCable subscriptions, use createActionCableFetcher, for example:
import { createConsumer } from "@rails/actioncable"
import createActionCableFetcher from 'graphql-ruby-client/subscriptions/createActionCableFetcher';
// Initialize a client
const actionCable = createConsumer()
// Initialize a new fetcher and pass it to GraphiQL below
var fetcher = createActionCableFetcher({ consumer: actionCable, url: "/graphql" })
const root = createRoot(document.getElementById('root'));
root.render(<GraphiQL fetcher={fetcher} />);
Under the hood, it will split traffic: it will send subscription { ... } operations via ActionCable and send queries and mutations via HTTP POST using window.fetch. To customize its HTTP requests, you can pass a fetchOptions: object or a custom fetch: function to createPusherFetcher({ ... }).