From b79fbcf71dfe9984ad27ff8ed14df84aaafcf041 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Wed, 4 Oct 2023 20:50:11 +0200 Subject: [PATCH] Setup graphql subscriptions --- package.json | 1 + src/lib/requests/RequestManager.ts | 2 +- src/lib/requests/client/GraphQLClient.ts | 32 ++++++++++++++++++++++-- yarn.lock | 5 ++++ 4 files changed, 37 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index cba7c979..d742f525 100644 --- a/package.json +++ b/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", diff --git a/src/lib/requests/RequestManager.ts b/src/lib/requests/RequestManager.ts index aab0b147..471a10e6 100644 --- a/src/lib/requests/RequestManager.ts +++ b/src/lib/requests/RequestManager.ts @@ -285,7 +285,7 @@ export class RequestManager { public updateClient(config: Partial): void { this.restClient.updateConfig(config); - this.graphQLClient.updateConfig({ uri: config.baseURL }); + this.graphQLClient.updateConfig(); } public getBaseUrl(): string { diff --git a/src/lib/requests/client/GraphQLClient.ts b/src/lib/requests/client/GraphQLClient.ts index 6ce1993d..c2fef6a4 100644 --- a/src/lib/requests/client/GraphQLClient.ts +++ b/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; + 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, diff --git a/yarn.lock b/yarn.lock index 57fda819..e8009634 100644 --- a/yarn.lock +++ b/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"