Apollo Client v4 #11733

package.json

@@ -32,10 +32,10 @@
         "@angular/material": "^21.2.14",
         "@angular/platform-browser": "^21.2.17",
         "@angular/router": "^21.2.17",
-        "@apollo/client": "^3.13.7",
+        "@apollo/client": "^4.2.7",
         "@ecodev/natural-layout": "^2.0.2",
         "@graphql-tools/mock": "^9.0.25",
-        "apollo-angular": "^11.0.0",
+        "apollo-angular": "^14.1.0",
         "es-toolkit": "^1.39.10",
         "extract-files": "^13.0.0",
         "graphql": "^16.11.0",

projects/natural/package.json

@@ -28,7 +28,7 @@
         "@angular/material": "^21.1.0",
         "@angular/platform-browser": "^21.1.0",
         "@angular/router": "^21.1.0",
-        "apollo-angular": "^11.0.0",
+        "apollo-angular": "^14.1.0",
         "es-toolkit": "^1.39.7",
         "rxjs": "^7.8.2"
     }

projects/natural/src/lib/classes/apollo-utils.spec.ts

@@ -1,6 +1,5 @@
 import {hasFilesAndProcessDate, isMutation, naturalExtractFiles} from './apollo-utils';
-import {OperationDefinitionNode, SchemaDefinitionNode} from 'graphql/language/ast';
-import {Kind} from 'graphql/language/kinds';
+import {Kind, OperationDefinitionNode, SchemaDefinitionNode} from 'graphql';
 
 describe('hasFilesAndProcessDate', () => {
     // Use a pattern because tests may be executed in different time zones

projects/natural/src/lib/classes/apollo-utils.ts

@@ -1,13 +1,13 @@
-import {ApolloLink, DocumentNode} from '@apollo/client/core';
+import {HttpBatchLink, HttpLink} from 'apollo-angular/http';
+import {ApolloLink, DocumentNode} from '@apollo/client';
 import {formatIsoDateTime, isFile} from './utility';
-import {HttpBatchLink, HttpLink, Options} from 'apollo-angular/http';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import extractFiles from 'extract-files/extractFiles.mjs';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import isExtractableFile from 'extract-files/isExtractableFile.mjs';
-import {Kind, OperationTypeNode} from 'graphql/language';
+import {Kind, OperationTypeNode} from 'graphql';
 
 /**
  * Detect if the given variables have a file to be uploaded or not, and
@@ -47,14 +47,19 @@ export function isMutation(query: DocumentNode): boolean {
     );
 }
 
-export const naturalExtractFiles: NonNullable<Options['extractFiles']> = body => extractFiles(body, isExtractableFile);
+export const naturalExtractFiles: NonNullable<HttpLink.Options['extractFiles']> = body =>
+    extractFiles(body, isExtractableFile);
 
 /**
  * Create an Apollo link that supports batched queries and file uploads.
  *
  * File uploads and mutations are never batched.
  */
-export function createHttpLink(httpLink: HttpLink, httpBatchLink: HttpBatchLink, options: Options): ApolloLink {
+export function createHttpLink(
+    httpLink: HttpLink,
+    httpBatchLink: HttpBatchLink,
+    options: HttpLink.Options,
+): ApolloLink {
     // If the query has no file, batch it, otherwise upload only that query
     return ApolloLink.split(
         operation => hasFilesAndProcessDate(operation.variables) || isMutation(operation.query),