graphql-ws: migrate from grahphql-transport-ws to graphql-ws

* The graphql-transport-ws library is no longer maintained.
* Move to grahpql-ws.
* Closes cylc#1028

Author: oliver-sanders

package.json

@@ -41,7 +41,6 @@
     "nprogress": "1.0.0-1",
     "preact": "10.16.0",
     "preact-compat": "3.19.0",
-    "subscriptions-transport-ws": "0.11.0",
     "svg-pan-zoom": "3.6.1",
     "vue": "3.3.4",
     "vue-i18n": "9.2.2",

src/graphql/index.js

@@ -22,10 +22,10 @@ import {
   InMemoryCache,
   split
 } from '@apollo/client/core'
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
 import { getMainDefinition } from '@apollo/client/utilities'
-import { WebSocketLink } from '@apollo/client/link/ws'
 import { setContext } from '@apollo/client/link/context'
-import { SubscriptionClient } from 'subscriptions-transport-ws'
+import { createClient } from 'graphql-ws'
 import { store } from '@/store/index'
 import { createUrl } from '@/utils/urls'
 
@@ -72,27 +72,32 @@ export function getCylcHeaders () {
  * @return {SubscriptionClient} a subscription client
  */
 export function createSubscriptionClient (wsUrl, options = {}, wsImpl = null) {
-  const opts = Object.assign({
-    reconnect: true,
-    lazy: false
-  }, options)
-  const subscriptionClient = new SubscriptionClient(wsUrl, opts, wsImpl)
-  // these are the available hooks in the subscription client lifecycle
-  subscriptionClient.onConnecting(() => {
-    store.commit('SET_OFFLINE', true)
-  })
-  subscriptionClient.onConnected(() => {
-    store.commit('SET_OFFLINE', false)
-  })
-  subscriptionClient.onReconnecting(() => {
-    store.commit('SET_OFFLINE', true)
-  })
-  subscriptionClient.onReconnected(() => {
-    store.commit('SET_OFFLINE', false)
-  })
-  subscriptionClient.onDisconnected(() => {
-    store.commit('SET_OFFLINE', true)
+  const subscriptionClient = createClient({
+    url: wsUrl,
+    shouldRetry: () => true,
+    retryAttempts: 999999999999999,
+    retryWait: async function waitForServerHealthyBeforeRetry () {
+      // this is called when the connection fails
+      // wait 2 seconds, then retry
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    },
+    on: {
+      connecting: () => {
+        store.commit('SET_OFFLINE', true)
+      },
+      connected: (socket, payload) => {
+        store.commit('SET_OFFLINE', false)
+      },
+      closed: (event) => {
+        store.commit('SET_OFFLINE', true)
+      },
+      error: (error) => {
+        console.error(error)
+        store.commit('SET_OFFLINE', true)
+      },
+    }
   })
+
   // TODO: at the moment the error displays an Event object, but the browser also displays the problem, as well as the offline indicator
   //       would be nice to find a better error message using the error object
   // subscriptionClient.onError((error) => {
@@ -127,7 +132,7 @@ export function createApolloClient (httpUrl, subscriptionClient) {
   })
 
   const wsLink = subscriptionClient !== null
-    ? new WebSocketLink(subscriptionClient)
+    ? new GraphQLWsLink(subscriptionClient)
     : new ApolloLink() // return an empty link, useful for testing, offline mode, etc
 
   const link = split(

yarn.lock

@@ -2827,13 +2827,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"backo2@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "backo2@npm:1.0.2"
-  checksum: fda8d0a0f4810068d23715f2f45153146d6ee8f62dd827ce1e0b6cc3c8328e84ad61e11399a83931705cef702fe7cbb457856bf99b9bd10c4ed57b0786252385
-  languageName: node
-  linkType: hard
-
 "balanced-match@npm:^1.0.0":
   version: 1.0.2
   resolution: "balanced-match@npm:1.0.2"
@@ -3644,7 +3637,6 @@ __metadata:
     sass: 1.64.2
     sinon: 15.2.0
     standard: 17.1.0
-    subscriptions-transport-ws: 0.11.0
     svg-pan-zoom: 3.6.1
     vite: 4.4.8
     vite-plugin-eslint: 1.8.1
@@ -5028,13 +5020,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eventemitter3@npm:^3.1.0":
-  version: 3.1.2
-  resolution: "eventemitter3@npm:3.1.2"
-  checksum: 81e4e82b8418f5cfd986d2b4a2fa5397ac4eb8134e09bcb47005545e22fdf8e9e61d5c053d34651112245aae411bdfe6d0ad5511da0400743fef5fc38bfcfbe3
-  languageName: node
-  linkType: hard
-
 "execa@npm:4.1.0":
   version: 4.1.0
   resolution: "execa@npm:4.1.0"
@@ -6638,13 +6623,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iterall@npm:^1.2.1":
-  version: 1.3.0
-  resolution: "iterall@npm:1.3.0"
-  checksum: c78b99678f8c99be488cca7f33e4acca9b72c1326e050afbaf023f086e55619ee466af0464af94a0cb3f292e60cb5bac53a8fd86bd4249ecad26e09f17bb158b
-  languageName: node
-  linkType: hard
-
 "jju@npm:^1.1.0":
   version: 1.4.0
   resolution: "jju@npm:1.4.0"
@@ -9535,21 +9513,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"subscriptions-transport-ws@npm:0.11.0":
-  version: 0.11.0
-  resolution: "subscriptions-transport-ws@npm:0.11.0"
-  dependencies:
-    backo2: ^1.0.2
-    eventemitter3: ^3.1.0
-    iterall: ^1.2.1
-    symbol-observable: ^1.0.4
-    ws: ^5.2.0 || ^6.0.0 || ^7.0.0
-  peerDependencies:
-    graphql: ^15.7.2 || ^16.0.0
-  checksum: cc2e98d5c9d89c44d2e15eca188781c6ebae13d1661c42a99cee9d2897aebe2a22bc118eefff83244a79c88ee4ea24d46973ebf26ae7cb47ac1857fb8ee2c947
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -9591,13 +9554,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"symbol-observable@npm:^1.0.4":
-  version: 1.2.0
-  resolution: "symbol-observable@npm:1.2.0"
-  checksum: 48ffbc22e3d75f9853b3ff2ae94a44d84f386415110aea5effc24d84c502e03a4a6b7a8f75ebaf7b585780bda34eb5d6da3121f826a6f93398429d30032971b6
-  languageName: node
-  linkType: hard
-
 "symbol-observable@npm:^4.0.0":
   version: 4.0.0
   resolution: "symbol-observable@npm:4.0.0"
@@ -10678,7 +10634,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^5.2.0 || ^6.0.0 || ^7.0.0, ws@npm:^7.4.6":
+"ws@npm:^7.4.6":
   version: 7.5.8
   resolution: "ws@npm:7.5.8"
   peerDependencies: