initiate_subscription.js

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

const getToken = () => {
  const none =
    'eyJhbGciOiJIUzUxMiIsImtpZCI6IjRlMjdmNWIwNjllYWQ4ZjliZWYxZDE0Y2M2Mjc5YmRmYWYzNGM1MWIiLCJ0eXAiOiJKV1QifQ.eyJodHRwczovL2hhc3VyYS5pby9qd3QvY2xhaW1zIjp7IngtaGFzdXJhLWRlZmF1bHQtcm9sZSI6Im5vbmUiLCJ4LWhhc3VyYS1hbGxvd2VkLXJvbGVzIjpbIm5vbmUiXSwieC1oYXN1cmEtdXNlci1pZCI6ImFhYWFhYWFhLWFhYWEtMTFlYS1hYWFhLWFhYWFhYWFhYWFhYSJ9LCJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vdmVybWVocnVuZy1hYWFhYSIsImF1ZCI6InZlcm1laHJ1bmctZjQ4YzQiLCJhdXRoX3RpbWUiOjE1OTE5Njg3MzQsInVzZXJfaWQiOiJYUnV6eHAxWDJ3YWFhYWF5ek9hV1Y2emdhYWFhIiwic3ViIjoiWFJ1enhwMVhhYWFhb3l6T2FXVjZ6Z0NDTDIiLCJpYXQiOjE1OTE5NjkzNDksImV4cCI6MTU5MTk3Mjk0OSwiZW1haWwiOiJ0ZXN0QHRlc3QuY2giLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsiZW1haWwiOlsidGVzdEB0ZXN0LmNoIl19LCJzaWduX2luX3Byb3ZpZGVyIjoicGFzc3dvcmQifX0._BWw-QO7K_oTr72pHZBl4OlXox3_x59IGEnllj3PwaFO8fylhQX7YZyaNev7iqeiyzx2DRZyAQyFhffNjEWyog'
  return window.localStorage.getItem('token') ?? none
}
  
const gqlWsClient = (() => {
  token = getToken()

  return new SubscriptionClient(constants?.graphQlWsUri, {
    reconnect: true,
    lazy: true,
    connectionCallback: (error) => {
      if (error) {
        console.log('gqlWsClient connectionCallback:', {
          error,
        })
        token = getToken()
      } else {
        console.log('gqlWsClient connectionCallback worked')
      }
    },
    connectionParams: {
      headers: {
        authorization: `Bearer ${token}`,
      },
    },
  })
})()
gqlWsClient.onConnected(() => console.log('ws client connected'))
gqlWsClient.onDisconnected(() => console.log('ws client disconnected'))
gqlWsClient.onReconnected(() => console.log('ws client re-connected'))

const unsubscribe = {}
unsubscribe.ae_art = gqlWsClient
    .request({
      query: `subscription AeArtSubscription($where: ae_art_bool_exp) {
        ae_art(where: $where) {__typename↵id↵_rev_at↵changed↵name↵}
      } }`,
      variables: { where: { _rev_at: { _gt: ae_art_lastUpdated } } },
    })
    .subscribe({
      next(data) {
        updateWmFromData({ data: data.data.ae_art, table: 'ae_art', store })
      },
      error: (error) => console.log('subscribeAeArt, onError:', error),
    })