From ea8b21f227b84d00bebe58811877628f4a8072fb Mon Sep 17 00:00:00 2001 From: Oliver Sanders Date: Wed, 9 Aug 2023 16:45:04 +0100 Subject: [PATCH] graphql-ws: migrate from grahphql-transport-ws to graphql-ws * The graphql-transport-ws library is no longer maintained. * Move to grahpql-ws. * Closes https://github.com/cylc/cylc-ui/issues/1028 --- package.json | 1 - src/graphql/index.js | 51 ++++++++++++++++++++++++-------------------- yarn.lock | 46 +-------------------------------------- 3 files changed, 29 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index 75d2e870f..f4148a35c 100644 --- a/package.json +++ b/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", diff --git a/src/graphql/index.js b/src/graphql/index.js index cc252c967..69ba5de47 100644 --- a/src/graphql/index.js +++ b/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( diff --git a/yarn.lock b/yarn.lock index c00a629bc..dd2b2083b 100644 --- a/yarn.lock +++ b/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: