Using a GraphQL Subscription with Vanilla JS

I was looking for a way to use GraphQL subscriptions without Apollo, Relay, urql, or any other heavy libraries or frameworks that were locked to React. It turns out you can use Apollo's subscriptinos-transport-ws library by itself, without the rest of the framework. You can use it for both Subscriptions and for Query/Mutation.

Here's an example of making an authenticated GraphQL subscription request:

import gql from 'graphql-tag';
import {SubscriptionClient} from 'subscriptions-transport-ws';

const wsclient = new SubscriptionClient(
  'wss://example.com',
  {
      reconnect: true,
      connectionParams: {
        headers: {
          'Authorization': `Bearer foobar`,
        }
      },
    }
);
wsclient.request({
  query: gql`
    fragment transaction on transactions {
      id
      user_id
    }
    subscription SubscribeTransactions($user_id: String!) {
      transactions(where: { user_id: { _eq: $user_id } }) {
        ...transaction
      }
    }
  `,
  variables: { user_id: 'capncrunch' }
  // Don't forget to check for an `errors` property in the next() handler
}).subscribe({next: console.log, error: console.error})