diff --git a/package.json b/package.json
index 7b0d3d991..ba6b7137f 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "test": "vitest run && yarn run serve cy:run"
   },
   "dependencies": {
-    "@apollo/client": "3.14.0",
+    "@apollo/client": "4.0.9",
     "@hpcc-js/wasm": "2.28.0",
     "@lumino/default-theme": "2.1.10",
     "@lumino/widgets": "2.7.1",
@@ -42,6 +42,7 @@
     "mitt": "3.0.1",
     "nprogress": "1.0.0-1",
     "preact": "10.27.2",
+    "rxjs": "7.8.2",
     "simple-icons": "15.2.0",
     "subscriptions-transport-ws": "0.11.0",
     "svg-pan-zoom": "3.6.2",
diff --git a/renovate.json b/renovate.json
index 7b2373745..376f67cbf 100644
--- a/renovate.json
+++ b/renovate.json
@@ -67,7 +67,8 @@
         "on the 10th day of the month"
       ],
       "matchPackageNames": [
-        "@apollo/**"
+        "@apollo/**",
+        "rxjs"
       ]
     },
     {
diff --git a/src/graphql/index.js b/src/graphql/index.js
index ab3591d0e..19247bf85 100644
--- a/src/graphql/index.js
+++ b/src/graphql/index.js
@@ -21,11 +21,10 @@ import {
   ApolloLink,
   HttpLink,
   InMemoryCache,
-  split
-} from '@apollo/client/core'
-import { getMainDefinition } from '@apollo/client/utilities'
+} from '@apollo/client'
+import { isSubscriptionOperation } from '@apollo/client/utilities'
 import { WebSocketLink } from '@apollo/client/link/ws'
-import { setContext } from '@apollo/client/link/context'
+import { SetContextLink } from '@apollo/client/link/context'
 import { store } from '@/store/index'
 import { createUrl, getXSRFHeaders } from '@/utils/urls'
 
@@ -119,24 +118,19 @@ export function createApolloClient (httpUrl, subscriptionClient) {
     ? new WebSocketLink(subscriptionClient)
     : new ApolloLink() // return an empty link, useful for testing, offline mode, etc
 
-  const link = split(
-    ({ query }) => {
-      const definition = getMainDefinition(query)
-      return definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
-    },
+  const link = ApolloLink.split(
+    ({ query }) => isSubscriptionOperation(query),
     wsLink,
     httpLink
   )
 
-  const wsAuthLink = setContext((_, { headers }) => {
+  const wsAuthLink = new SetContextLink(({ headers }) => ({
     // add an X-XSRFToken header for hubless token based auth
-    return {
-      headers: {
-        ...headers,
-        ...getXSRFHeaders()
-      }
+    headers: {
+      ...headers,
+      ...getXSRFHeaders()
     }
-  })
+  }))
 
   return new ApolloClient({
     link: wsAuthLink.concat(link),
diff --git a/src/model/Subscription.model.js b/src/model/Subscription.model.js
index ecc419d6d..5f448bf06 100644
--- a/src/model/Subscription.model.js
+++ b/src/model/Subscription.model.js
@@ -47,7 +47,7 @@ class Subscription {
   constructor (query, debug = false) {
     this.query = query
     /**
-     * @type {ZenObservable}
+     * @type {import('rxjs').Subscription}
      */
     this.observable = null
     /**
diff --git a/src/services/workflow.service.js b/src/services/workflow.service.js
index 2f8314f96..3be759a4e 100644
--- a/src/services/workflow.service.js
+++ b/src/services/workflow.service.js
@@ -383,8 +383,8 @@ class WorkflowService {
    *
    * @param {DocumentNode} query - an already parsed GraphQL query (i.e. not a `string`)
    * @param {Object} variables
-   * @param {SubscriptionOptions} subscriptionOptions - { next(), error() }
-   * @returns {Subscription}
+   * @param {import('rxjs').Observer} subscriptionOptions
+   * @returns {import('rxjs').Subscription}
    */
   startCylcSubscription (query, variables, subscriptionOptions) {
     if (!query) {
@@ -403,14 +403,7 @@ class WorkflowService {
       query,
       variables,
       fetchPolicy: 'no-cache'
-    }).subscribe({
-      next (value) {
-        subscriptionOptions.next(value)
-      },
-      error (errorValue) {
-        subscriptionOptions.error(errorValue)
-      }
-    })
+    }).subscribe(subscriptionOptions)
   }
 
   /**
diff --git a/yarn.lock b/yarn.lock
index 81d16c381..278d41d98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22,28 +22,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:3.14.0":
-  version: 3.14.0
-  resolution: "@apollo/client@npm:3.14.0"
+"@apollo/client@npm:4.0.9":
+  version: 4.0.9
+  resolution: "@apollo/client@npm:4.0.9"
   dependencies:
     "@graphql-typed-document-node/core": "npm:^3.1.1"
     "@wry/caches": "npm:^1.0.0"
     "@wry/equality": "npm:^0.5.6"
     "@wry/trie": "npm:^0.5.0"
     graphql-tag: "npm:^2.12.6"
-    hoist-non-react-statics: "npm:^3.3.2"
     optimism: "npm:^0.18.0"
-    prop-types: "npm:^15.7.2"
-    rehackt: "npm:^0.1.0"
-    symbol-observable: "npm:^4.0.0"
-    ts-invariant: "npm:^0.10.3"
     tslib: "npm:^2.3.0"
-    zen-observable-ts: "npm:^1.2.5"
   peerDependencies:
-    graphql: ^15.0.0 || ^16.0.0
+    graphql: ^16.0.0
     graphql-ws: ^5.5.5 || ^6.0.3
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc
+    react: ^17.0.0 || ^18.0.0 || >=19.0.0-rc
+    react-dom: ^17.0.0 || ^18.0.0 || >=19.0.0-rc
+    rxjs: ^7.3.0
     subscriptions-transport-ws: ^0.9.0 || ^0.11.0
   peerDependenciesMeta:
     graphql-ws:
@@ -54,7 +49,7 @@ __metadata:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: 10c0/38776832627def88f707131f9fe394e10b067c67ce84102664cd8f922229671fc5d61bcff702c0c403972f6a57998f243210c681bcda96c68b2b3c82dbb1c789
+  checksum: 10c0/38eab9026fbb267af28f7567606624a8d73869fe0b90579c92a91b1503e8723f2a71ae95d101d92ebf4cf3d6d228ab0428d68ac91ce4f26fac1c3871881ce735
   languageName: node
   linkType: hard
 
@@ -4456,7 +4451,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cylc-ui@workspace:."
   dependencies:
-    "@apollo/client": "npm:3.14.0"
+    "@apollo/client": "npm:4.0.9"
     "@cypress/code-coverage": "npm:3.14.6"
     "@hpcc-js/wasm": "npm:2.28.0"
     "@lumino/default-theme": "npm:2.1.10"
@@ -4500,6 +4495,7 @@ __metadata:
     nprogress: "npm:1.0.0-1"
     nyc: "npm:17.1.0"
     preact: "npm:10.27.2"
+    rxjs: "npm:7.8.2"
     sass-embedded: "npm:1.93.3"
     simple-icons: "npm:15.2.0"
     sinon: "npm:21.0.0"
@@ -6719,15 +6715,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.3.2":
-  version: 3.3.2
-  resolution: "hoist-non-react-statics@npm:3.3.2"
-  dependencies:
-    react-is: "npm:^16.7.0"
-  checksum: 10c0/fe0889169e845d738b59b64badf5e55fa3cf20454f9203d1eb088df322d49d4318df774828e789898dcb280e8a5521bb59b3203385662ca5e9218a6ca5820e74
-  languageName: node
-  linkType: hard
-
 "html-encoding-sniffer@npm:^4.0.0":
   version: 4.0.0
   resolution: "html-encoding-sniffer@npm:4.0.0"
@@ -9146,7 +9133,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -9284,7 +9271,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
+"react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
@@ -9402,21 +9389,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rehackt@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "rehackt@npm:0.1.0"
-  peerDependencies:
-    "@types/react": "*"
-    react: "*"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    react:
-      optional: true
-  checksum: 10c0/3d838bfee84ec06c976f21027936f3b0fdb7660ab8a2d4d3f19c65e0daa78a268aa81352311352b8576b89a074714b36ae6cd5bdadb6e975eca079f2b342de73
-  languageName: node
-  linkType: hard
-
 "release-zalgo@npm:^1.0.0":
   version: 1.0.0
   resolution: "release-zalgo@npm:1.0.0"
@@ -10756,13 +10728,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"symbol-observable@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "symbol-observable@npm:4.0.0"
-  checksum: 10c0/5e9a3ab08263a6be8cbee76587ad5880dcc62a47002787ed5ebea56b1eb30dc87da6f0183d67e88286806799fbe21c69077fbd677be4be2188e92318d6c6f31d
-  languageName: node
-  linkType: hard
-
 "symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"
@@ -11026,15 +10991,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-invariant@npm:^0.10.3":
-  version: 0.10.3
-  resolution: "ts-invariant@npm:0.10.3"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 10c0/2fbc178d5903d325ee0b87fad38827eac11888b6e86979b06754fd4bcdcf44c2a99b8bcd5d59d149c0464ede55ae810b02a2aee6835ad10efe4dd0e22efd68c0
-  languageName: node
-  linkType: hard
-
 "tsconfig-paths@npm:^3.15.0":
   version: 3.15.0
   resolution: "tsconfig-paths@npm:3.15.0"
@@ -12093,22 +12049,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zen-observable-ts@npm:^1.2.5":
-  version: 1.2.5
-  resolution: "zen-observable-ts@npm:1.2.5"
-  dependencies:
-    zen-observable: "npm:0.8.15"
-  checksum: 10c0/21d586f3d0543e1d6f05d9333a137b407dbf337907c1ee1c2fa7a7da044f7e1262e4baf4ef8902f230c6f5acb561047659eb7df73df33307233cc451efe46db1
-  languageName: node
-  linkType: hard
-
-"zen-observable@npm:0.8.15":
-  version: 0.8.15
-  resolution: "zen-observable@npm:0.8.15"
-  checksum: 10c0/71cc2f2bbb537300c3f569e25693d37b3bc91f225cefce251a71c30bc6bb3e7f8e9420ca0eb57f2ac9e492b085b8dfa075fd1e8195c40b83c951dd59c6e4fbf8
-  languageName: node
-  linkType: hard
-
 "zustand@npm:^5":
   version: 5.0.5
   resolution: "zustand@npm:5.0.5"