Setup graphql subscriptions

package.json

@@ -40,6 +40,7 @@
     "axios": "^1.5.0",
     "file-selector": "^0.6.0",
     "graphql-tag": "^2.12.6",
+    "graphql-ws": "^5.14.1",
     "i18next": "^23.5.1",
     "i18next-browser-languagedetector": "^7.1.0",
     "react": "^18.2.0",

src/lib/requests/RequestManager.ts

@@ -285,7 +285,7 @@ export class RequestManager {
 
     public updateClient(config: Partial<AxiosInstance['defaults']>): void {
         this.restClient.updateConfig(config);
-        this.graphQLClient.updateConfig({ uri: config.baseURL });
+        this.graphQLClient.updateConfig();
     }
 
     public getBaseUrl(): string {

src/lib/requests/client/GraphQLClient.ts

@@ -6,8 +6,18 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ApolloClient, ApolloClientOptions, InMemoryCache, NormalizedCacheObject, Reference } from '@apollo/client';
+import {
+    ApolloClient,
+    ApolloClientOptions,
+    InMemoryCache,
+    NormalizedCacheObject,
+    Reference,
+    split,
+} from '@apollo/client';
 import { createUploadLink } from 'apollo-upload-client';
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
+import { Client, createClient } from 'graphql-ws';
+import { getMainDefinition } from '@apollo/client/utilities';
 import { BaseClient } from '@/lib/requests/client/BaseClient.ts';
 import { StrictTypedTypePolicies } from '@/lib/graphql/generated/apollo-helpers.ts';
 
@@ -55,6 +65,8 @@ export class GraphQLClient extends BaseClient<
 
     public declare client: ApolloClient<NormalizedCacheObject>;
 
+    private wsClient!: Client;
+
     public override getBaseUrl(): string {
         return `${super.getBaseUrl()}/api/graphql`;
     }
@@ -63,11 +75,27 @@ export class GraphQLClient extends BaseClient<
         return createUploadLink({ uri: () => this.getBaseUrl() });
     }
 
+    private createWSLink() {
+        return new GraphQLWsLink(this.wsClient);
+    }
+
     private createLink() {
-        return this.createUploadLink();
+        return split(
+            ({ query }) => {
+                const definition = getMainDefinition(query);
+                return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
+            },
+            this.createWSLink(),
+            this.createUploadLink(),
+        );
     }
 
     protected createClient() {
+        this.wsClient = createClient({
+            url: () => this.getBaseUrl().replace(/http(|s)/g, 'ws'),
+            keepAlive: 20000,
+        });
+
         this.client = new ApolloClient({
             cache: new InMemoryCache({
                 typePolicies,

yarn.lock

@@ -3509,6 +3509,11 @@ graphql-ws@^5.14.0:
   resolved "https://registry.yarnpkg.com/graphql-ws/-/graphql-ws-5.14.0.tgz#766f249f3974fc2c48fae0d1fb20c2c4c79cd591"
   integrity sha512-itrUTQZP/TgswR4GSSYuwWUzrE/w5GhbwM2GX3ic2U7aw33jgEsayfIlvaj7/GcIvZgNMzsPTrE5hqPuFUiE5g==
 
+graphql-ws@^5.14.1:
+  version "5.14.1"
+  resolved "https://registry.yarnpkg.com/graphql-ws/-/graphql-ws-5.14.1.tgz#d05dba9c2cbf1582c990a2dfec4b8f6a55d99da4"
+  integrity sha512-aqkls1espsygP1PfkAuuLIV96IbztQ6EaADse97pw8wRIMT3+AL/OYfS8V2iCRkc0gzckitoDRGCQEdnySggiA==
+
 "graphql@14 - 16":
   version "16.8.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.0.tgz#374478b7f27b2dc6153c8f42c1b80157f79d79d4"