how to enable subscriptions

[barbalex]

I have read:

• hasura documentation on subscriptions as that is my graphql api
• the very short documentation I found in mst-gql itself. It basically only says: "The gqlWsClient needs to be set during the store creation to make this possible"
• the readme for graphql-request. Which baffles me as graphql-request does not currently support subscriptions

So basically I do not know how this should work as it is not supported by graphql-request. Yet "The gqlWsClient needs to be set during the store creation to make this possible" seems to imply that it is possible.

I have also searched for an analog method to createHttpClient, something like createWsClient. But it does not seem to exist.

So my questions are:

• can it really be done?
• if yes: how?

[chrisdrackett]

I think example 1 supports subscriptions, but I'm not 100% sure. We don't use them in our app so I have 0 experience with them myself.

[barbalex]

O.k., seems that https://github.com/mobxjs/mst-gql/blob/master/src/MSTGQLStore.ts gives some important clues:

Need to

import { SubscriptionClient } from 'subscriptions-transport-ws'

build a ws client:

// see: https://www.npmjs.com/package/subscriptions-transport-ws#hybrid-websocket-transport
const gqlWsClient = new SubscriptionClient(constants.graphQlWsUri, {
  reconnect: true,
  connectionParams: {
    headers: { authorization: `Bearer ${tokenWithRoles}` },
  },
})

add the ws client when creating the store:

// see: https://github.com/mobxjs/mst-gql/blob/master/src/MSTGQLStore.ts#L42-L43
const store = RootStore.create(undefined, {
  gqlHttpClient,
  gqlWsClient,
})

Works for me so far without yet actually using websockets. Will see if I can get that to work too.

[barbalex]

Works like a charm. Would you like me to create a pull-request for an example in the readme?

[chrisdrackett]

that would be great!

[barbalex]

Additional caveat:

When using server side rendered tools like gatsby/next/nuxt it is necessary to prevent using subscriptions server side. Otherwise there will be an error because the server is missing a websocket implementation.

This is how I do it in gatsby:

const gqlHttpClient = createHttpClient(constants.graphQlUri)
const tokenWithRoles =
  typeof window !== 'undefined'
    ? window.localStorage.getItem('token') || 'none'
    : 'none'
gqlHttpClient.setHeaders({ authorization: `Bearer ${tokenWithRoles}` })

// ws client only works in the browser
// need to prevent gatsby from executing it server side
// see: https://github.com/apollographql/subscriptions-transport-ws/issues/333#issuecomment-359261024
let gqlWsClient
let storeOptions = {
  gqlHttpClient,
}
if (typeof window !== 'undefined') {
  // https://www.npmjs.com/package/subscriptions-transport-ws#hybrid-websocket-transport
  gqlWsClient = new SubscriptionClient(constants.graphQlWsUri, {
    reconnect: true,
    connectionParams: {
      headers: { authorization: `Bearer ${tokenWithRoles}` },
    },
  })
  // https://github.com/mobxjs/mst-gql/blob/master/src/MSTGQLStore.ts#L42-L43
  storeOptions = {
    gqlHttpClient,
    gqlWsClient,
  }
}

const store = RootStore.create(undefined, storeOptions)