Update dependency "apollo-client" to v4.x

v4.1.6

src/lib/requests/client/GraphQLClient.ts

@@ -6,25 +6,16 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { onError } from '@apollo/client/link/error';
-import { setContext } from '@apollo/client/link/context';
-import {
-    ApolloClient,
-    ApolloClientOptions,
-    ApolloLink,
-    from,
-    fromPromise,
-    InMemoryCache,
-    NormalizedCacheObject,
-    split,
-    toPromise,
-} from '@apollo/client';
-import createUploadLink from 'apollo-upload-client/createUploadLink.mjs';
+import { ErrorLink } from '@apollo/client/link/error';
+import { SetContextLink } from '@apollo/client/link/context';
+import { ApolloClient, ApolloLink, CombinedGraphQLErrors, InMemoryCache } from '@apollo/client';
+import { from, filter, map, switchMap, firstValueFrom } from 'rxjs';
+import UploadHttpLink from 'apollo-upload-client/UploadHttpLink.mjs';
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
 import { Client, createClient } from 'graphql-ws';
 import { getMainDefinition } from '@apollo/client/utilities';
 import { TypePolicies } from '@apollo/client/cache';
-import { removeTypenameFromVariables } from '@apollo/client/link/remove-typename';
+import { RemoveTypenameFromVariablesLink } from '@apollo/client/link/remove-typename';
 import { d } from 'koration';
 import { useId } from '@mantine/hooks';
 import { useEffect } from 'react';
@@ -188,14 +179,10 @@ const typePolicies: StrictTypedTypePolicies = {
 };
 /* eslint-enable no-underscore-dangle */
 
-export class GraphQLClient extends BaseClient<
-    ApolloClient<NormalizedCacheObject>,
-    ApolloClientOptions<NormalizedCacheObject>,
-    null
-> {
+export class GraphQLClient extends BaseClient<ApolloClient, ApolloClient.Options, null> {
     readonly fetcher = null;
 
-    public client!: ApolloClient<NormalizedCacheObject>;
+    public client!: ApolloClient;
 
     private wsClient!: Client;
 
@@ -255,7 +242,7 @@ export class GraphQLClient extends BaseClient<
             const { operationName } = operation;
 
             if (this.shouldQueueRequest(operationName)) {
-                return fromPromise(this.enqueueRequest(() => toPromise(forward(operation)), operationName));
+                return from(this.enqueueRequest(() => firstValueFrom(forward(operation)), operationName));
             }
 
             return forward(operation);
@@ -269,27 +256,27 @@ export class GraphQLClient extends BaseClient<
     }
 
     private createErrorLink() {
-        return onError(({ graphQLErrors, operation, forward }) => {
-            if (!graphQLErrors) {
+        return new ErrorLink(({ error, operation, forward }) => {
+            if (!CombinedGraphQLErrors.is(error)) {
                 return undefined;
             }
-            if (!this.isAuthError(graphQLErrors)) {
+            if (!this.isAuthError(error.errors)) {
                 return undefined;
             }
 
-            return fromPromise(BaseClient.refreshAccessToken(this.handleRefreshToken))
-                .filter(Boolean)
-                .map((result) => {
+            return from(BaseClient.refreshAccessToken(this.handleRefreshToken)).pipe(
+                filter(Boolean),
+                map((result) => {
                     this.restartAllSubscriptions();
-
                     return result;
-                })
-                .flatMap(() => forward(operation));
+                }),
+                switchMap(() => forward(operation)),
+            );
         });
     }
 
     private createAuthLink() {
-        return setContext((_, { headers }) => {
+        return new SetContextLink(({ headers }) => {
             const isAuthRequired = AuthManager.isAuthRequired();
             const accessToken = AuthManager.getAccessToken();
 
@@ -304,7 +291,7 @@ export class GraphQLClient extends BaseClient<
     }
 
     private createUploadLink() {
-        return createUploadLink({ uri: () => this.getBaseUrl() });
+        return new UploadHttpLink({ uri: () => this.getBaseUrl() });
     }
 
     private createWSLink() {
@@ -312,21 +299,20 @@ export class GraphQLClient extends BaseClient<
     }
 
     private createLink() {
-        const removeTypenameLink = removeTypenameFromVariables();
+        const removeTypenameLink = new RemoveTypenameFromVariablesLink();
 
-        return split(
+        return ApolloLink.split(
             ({ query }) => {
                 const definition = getMainDefinition(query);
                 return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
             },
             this.createWSLink(),
-            from([
+            ApolloLink.from([
                 this.createAuthGuardLink(),
                 this.createErrorLink(),
                 this.createAuthLink(),
                 removeTypenameLink,
-                // apollo-upload-client dependency is outdated (see 134e47763faae9e62db4d4e3a8387a74e32e5568) and thus types are not matching, but they are still correct
-                this.createUploadLink() as unknown as ApolloLink,
+                this.createUploadLink(),
             ]),
         );
     }
@@ -408,7 +394,7 @@ export class GraphQLClient extends BaseClient<
                 // the TypeError can just be ignored
                 typePolicies: typePolicies as TypePolicies,
             }),
-            connectToDevTools: true,
+            devtools: { enabled: true },
             link: this.createLink(),
         });
     }