Compatibility with GraphQL 17

.changeset/ninety-geese-visit.md

@@ -0,0 +1,5 @@
+---
+'apollo-angular': minor
+---
+
+Compatibility with GraphQL 17

.github/workflows/main.yml

@@ -89,7 +89,7 @@ jobs:
     strategy:
       matrix:
         angular_version: [20, 21, 22]
-        graphql_version: [16]
+        graphql_version: [16, 17]
         node_version: [20, 22, 24, 26]
         exclude:
           - angular_version: 20

packages/apollo-angular/package.json

@@ -39,8 +39,8 @@
   },
   "peerDependencies": {
     "@angular/core": "^20.0.0 || ^21.0.0 || ^22.0.0",
-    "@apollo/client": "^4.0.1",
-    "graphql": "^16.0.0",
+    "@apollo/client": "^4.2.3",
+    "graphql": "^16.0.0 || ^17.0.0",
     "rxjs": "^7.8.0"
   },
   "dependencies": {

packages/apollo-angular/schematics/install/index.cts

@@ -18,8 +18,8 @@ export function factory(options: Schema): Rule {
 export function createDependenciesMap(options: Schema): Record<string, string> {
   return {
     'apollo-angular': '^9.0.0',
-    '@apollo/client': '^4.0.1',
-    graphql: `^${options.graphql ?? '16.0.0'}`,
+    '@apollo/client': '^4.2.3',
+    graphql: `^${options.graphql ?? '17.0.0'}`,
   };
 }
 

packages/apollo-angular/schematics/install/schema.cts

@@ -3,6 +3,6 @@ export interface Schema {
   project: string;
   /** Url to your GraphQL endpoint */
   endpoint?: string;
-  /** Version of GraphQL (16 by default) */
+  /** Version of GraphQL (17 by default) */
   graphql?: string;
 }

packages/apollo-angular/schematics/install/schema.json

@@ -19,8 +19,8 @@
     },
     "graphql": {
       "type": "string",
-      "minLength": 0,
-      "default": "16",
+      "minLength": 2,
+      "default": "17",
       "x-prompt": "Version of GraphQL"
     }
   },

packages/apollo-angular/schematics/tests/ng-add.spec.cts

@@ -18,7 +18,7 @@ describe('ng-add with standalone', () => {
 
     const dependenciesMap = createDependenciesMap({
       project: 'my-project',
-      graphql: '16',
+      graphql: '17',
     });
 
     for (const dependency in dependenciesMap) {

packages/apollo-angular/src/only-complete-data.ts

@@ -54,5 +54,6 @@ export const onlyComplete = onlyCompleteData;
  * Same as `onlyCompleteData()` but for `Apollo.watchFragment()`.
  */
 export function onlyCompleteFragment<TData>(): ForWatchFragment<TData> {
+  // @ts-expect-error
   return filter((result): result is CompleteFragment<TData> => result.dataState === 'complete');
 }

packages/apollo-angular/test-utils/ObservableStream.ts

@@ -34,9 +34,7 @@ export interface TakeOptions {
   timeout?: number;
 }
 type ObservableEvent<T> =
-  | { type: 'next'; value: T }
-  | { type: 'error'; error: any }
-  | { type: 'complete' };
+  { type: 'next'; value: T } | { type: 'error'; error: any } | { type: 'complete' };
 
 function formatMessage(expected: ObservableEvent<any>, actual: ObservableEvent<any>) {
   return printDiffOrStringify(expected, actual, { expand: true });

packages/demo/package.json

@@ -17,7 +17,7 @@
     "@angular/core": "^20.3.0",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
-    "@apollo/client": "^4.0.1",
+    "@apollo/client": "^4.2.10",
     "apollo-angular": "workspace:*",
     "typescript": "~5.8.0"
   }

scripts/run-e2e-locally.sh

@@ -9,10 +9,10 @@ rm -rf /tmp/testapp
 
 (cd /tmp/ && ng new testapp --package-manager pnpm --defaults --minimal --skip-git)
 cp apollo-angular.tgz /tmp/testapp/
-(cd /tmp/testapp && ng add /tmp/testapp/apollo-angular.tgz --graphql '16.0.0' --defaults --verbose --skip-confirmation)
+(cd /tmp/testapp && ng add /tmp/testapp/apollo-angular.tgz --graphql '17.0.0' --defaults --verbose --skip-confirmation)
 (cd /tmp/testapp && pnpm ng run testapp:build:production)
-(cd /tmp/testapp && ng add @cypress/schematic --defaults --verbose --skip-confirmation)
-./scripts/prepare-e2e.js /tmp/testapp 16
+(cd /tmp/testapp && pnpm_config_ignore_scripts=true ng add @cypress/schematic --defaults --verbose --skip-confirmation)
+./scripts/prepare-e2e.js /tmp/testapp 17
 (cd /tmp/testapp && pnpm cypress install)
 (cd /tmp/testapp && pnpm ng run testapp:cypress-run:production)
 rm -rf /tmp/testapp

website/src/pages/docs/recipes/multiple-clients.mdx

@@ -102,14 +102,10 @@ export class AppComponent {
 
   constructor(apollo: Apollo) {
     // use default
-    this.feedQuery = apollo.watchQuery({
-      /* ... */
-    });
+    this.feedQuery = apollo.watchQuery({/* ... */});
 
     // use extra client
-    this.feedQuery = apollo.use('myAlternativeGraphQl').watchQuery({
-      /* ... */
-    });
+    this.feedQuery = apollo.use('myAlternativeGraphQl').watchQuery({/* ... */});
   }
 }
 ```