WIP apollo-client v4

.changeset/apollo-angular-2355-dependencies.md

@@ -0,0 +1,6 @@
+---
+"apollo-angular": patch
+---
+dependencies updates:
+  - Updated dependency [`@apollo/client@^4.0.1` ↗︎](https://www.npmjs.com/package/@apollo/client/v/4.0.1) (from `^3.13.1`, in `peerDependencies`)
+  - Updated dependency [`rxjs@^7.3.0` ↗︎](https://www.npmjs.com/package/rxjs/v/7.3.0) (from `^6.0.0 || ^7.0.0`, in `peerDependencies`)

.changeset/chatty-cherries-drum.md

@@ -0,0 +1,56 @@
+---
+'apollo-angular': major
+---
+
+Namespaced types
+
+Before:
+
+```ts
+import type {
+  Options,
+  BatchOptions
+} from 'apollo-angular/http';
+
+import type {
+  MutationOptionsAlone,
+  QueryOptionsAlone,
+  SubscriptionOptionsAlone,
+  WatchQueryOptions,
+  WatchQueryOptionsAlone,
+} from 'apollo-angular';
+
+type AllTypes =
+  | Options
+  | BatchOptions
+  | MutationOptionsAlone
+  | QueryOptionsAlone
+  | SubscriptionOptionsAlone
+  | WatchQueryOptions
+  | WatchQueryOptionsAlone;
+```
+
+After:
+
+```ts
+import type {
+  HttpBatchLink,
+  HttpLink
+} from 'apollo-angular/http';
+
+import type {
+  Apollo,
+  Mutation,
+  Query,
+  Subscription,
+} from 'apollo-angular';
+
+type AllTypes =
+  | HttpLink.Options
+  | HttpBatchLink.Options
+  | Mutation.MutateOptions
+  | Query.FetchOptions
+  | Subscription.SubscribeOptions
+  | Apollo.WatchQueryOptions
+  | Query.WatchOptions;
+```

.changeset/funny-trainers-look.md

@@ -0,0 +1,12 @@
+---
+'apollo-angular': major
+---
+
+`httpHeaders` is a class
+
+Migrate your code like so:
+
+```diff
+- const link = httpHeaders();
++ const link = new HttpHeadersLink();
+```

.changeset/giant-clouds-shout.md

@@ -0,0 +1,11 @@
+---
+'apollo-angular': major
+---
+
+Move `useZone` option into subscription options
+
+
+```diff
+- const obs = apollo.subscribe(options, { useZone: false });
++ const obs = apollo.subscribe({ ...options, useZone: false });
+```

.changeset/tough-masks-search.md

@@ -0,0 +1,26 @@
+---
+'apollo-angular': major
+---
+
+Combined parameters of `Query`, `Mutation` and `Subscription` classes generated via codegen
+
+Migrate your code like so:
+
+```diff
+class MyComponent {
+  myQuery = inject(MyQuery);
+  myMutation = inject(MyMutation);
+  mySubscription = inject(MySubscription);
+
+  constructor() {
+-    myQuery.watch({ myVariable: 'foo' }, { fetchPolicy: 'cache-and-network' });
++    myQuery.watch({ variables: { myVariable: 'foo' }, fetchPolicy: 'cache-and-network' })    
+
+-    myMutation.mutate({ myVariable: 'foo' }, { errorPolicy: 'ignore' });
++    myMutation.mutate({ variables: { myVariable: 'foo' }, errorPolicy: 'ignore' }); 
+
+-    mySubscription.subscribe({ myVariable: 'foo' }, { fetchPolicy: 'network-only' });
++    mySubscription.subscribe({ variables: { myVariable: 'foo' }, fetchPolicy: 'network-only' });
+  }
+}
+```

package.json

@@ -37,7 +37,7 @@
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/platform-server": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@apollo/client": "^3.13.1",
+    "@apollo/client": "4.0.1",
     "@babel/core": "^7.24.6",
     "@babel/preset-env": "^7.24.6",
     "@changesets/changelog-github": "^0.5.0",

packages/apollo-angular/headers/src/index.ts

@@ -1,18 +1,17 @@
 import { HttpHeaders } from '@angular/common/http';
-import { ApolloLink, NextLink, Operation } from '@apollo/client/core';
+import { ApolloLink } from '@apollo/client';
 
-export const httpHeaders = () => {
-  return new ApolloLink((operation: Operation, forward: NextLink) => {
-    const { getContext, setContext } = operation;
-    const context = getContext();
+export class HttpHeadersLink extends ApolloLink {
+  constructor() {
+    super((operation, forward) => {
+      const { getContext, setContext } = operation;
+      const context = getContext();
 
-    if (context.headers) {
-      setContext({
-        ...context,
-        headers: new HttpHeaders(context.headers),
-      });
-    }
+      if (context.headers) {
+        setContext({ headers: new HttpHeaders(context.headers) });
+      }
 
-    return forward(operation);
-  });
-};
+      return forward(operation);
+    });
+  }
+}

packages/apollo-angular/headers/tests/index.spec.ts

@@ -1,7 +1,8 @@
+import { of } from 'rxjs';
 import { describe, expect, test } from 'vitest';
 import { HttpHeaders } from '@angular/common/http';
-import { ApolloLink, execute, gql, Observable as LinkObservable } from '@apollo/client/core';
-import { httpHeaders } from '../src';
+import { ApolloClient, ApolloLink, execute, gql, InMemoryCache } from '@apollo/client';
+import { HttpHeadersLink } from '../src';
 
 const query = gql`
   query heroes {
@@ -13,52 +14,56 @@ const query = gql`
 `;
 const data = { heroes: [{ name: 'Foo', __typename: 'Hero' }] };
 
-describe('httpHeaders', () => {
+const dummyClient = new ApolloClient({ cache: new InMemoryCache(), link: ApolloLink.empty() });
+
+describe('HttpHeadersLink', () => {
   test('should turn object into HttpHeaders', () =>
     new Promise<void>(done => {
-      const headersLink = httpHeaders();
+      const headersLink = new HttpHeadersLink();
 
       const mockLink = new ApolloLink(operation => {
         const { headers } = operation.getContext();
 
         expect(headers instanceof HttpHeaders).toBe(true);
         expect(headers.get('Authorization')).toBe('Bearer Foo');
 
-        return LinkObservable.of({ data });
+        return of({ data });
       });
 
       const link = headersLink.concat(mockLink);
 
-      execute(link, {
-        query,
-        context: {
-          headers: {
-            Authorization: 'Bearer Foo',
+      execute(
+        link,
+        {
+          query,
+          context: {
+            headers: {
+              Authorization: 'Bearer Foo',
+            },
           },
         },
-      }).subscribe(result => {
+        { client: dummyClient },
+      ).subscribe(result => {
         expect(result.data).toEqual(data);
         done();
       });
     }));
 
   test('should not set headers when not defined', () =>
     new Promise<void>(done => {
-      const headersLink = httpHeaders();
+      const headersLink = new HttpHeadersLink();
 
       const mockLink = new ApolloLink(operation => {
         const { headers } = operation.getContext();
 
         expect(headers).toBeUndefined();
 
-        return LinkObservable.of({ data });
+        return of({ data });
       });
 
       const link = headersLink.concat(mockLink);
 
-      execute(link, {
-        query,
-      }).subscribe(result => {
+      execute(link, { query }, { client: dummyClient }).subscribe(result => {
         expect(result.data).toEqual(data);
         done();
       });

packages/apollo-angular/http/src/http-batch-link.ts

@@ -1,16 +1,21 @@
 import { print } from 'graphql';
+import { Observable } from 'rxjs';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import {
-  ApolloLink,
-  FetchResult,
-  Observable as LinkObservable,
-  Operation,
-} from '@apollo/client/core';
-import { BatchHandler, BatchLink } from '@apollo/client/link/batch';
-import { BatchOptions, Body, Context, OperationPrinter, Options, Request } from './types';
+import { ApolloLink } from '@apollo/client';
+import { BatchLink } from '@apollo/client/link/batch';
+import type { HttpLink } from './http-link';
+import { Body, Context, OperationPrinter, Request } from './types';
 import { createHeadersWithClientAwareness, fetch, mergeHeaders, prioritize } from './utils';
 
+export declare namespace HttpBatchLink {
+  export type Options = {
+    batchMax?: number;
+    batchInterval?: number;
+    batchKey?: (operation: ApolloLink.Operation) => string;
+  } & HttpLink.Options;
+}
+
 export const defaults = {
   batchInterval: 10,
   batchMax: 10,
@@ -27,9 +32,9 @@ export const defaults = {
  */
 export function pick<K extends keyof Omit<typeof defaults, 'batchInterval' | 'batchMax'>>(
   context: Context,
-  options: Options,
+  options: HttpBatchLink.Options,
   key: K,
-): ReturnType<typeof prioritize<Context[K] | Options[K] | (typeof defaults)[K]>> {
+): ReturnType<typeof prioritize<Context[K] | HttpBatchLink.Options[K] | (typeof defaults)[K]>> {
   return prioritize(context[key], options[key], defaults[key]);
 }
 
@@ -41,7 +46,7 @@ export class HttpBatchLinkHandler extends ApolloLink {
 
   constructor(
     private readonly httpClient: HttpClient,
-    private readonly options: BatchOptions,
+    private readonly options: HttpBatchLink.Options,
   ) {
     super();
 
@@ -52,8 +57,8 @@ export class HttpBatchLinkHandler extends ApolloLink {
       this.print = this.options.operationPrinter;
     }
 
-    const batchHandler: BatchHandler = (operations: Operation[]) => {
-      return new LinkObservable((observer: any) => {
+    const batchHandler: BatchLink.BatchHandler = (operations: ApolloLink.Operation[]) => {
+      return new Observable((observer: any) => {
         const body = this.createBody(operations);
         const headers = this.createHeaders(operations);
         const { method, uri, withCredentials } = this.createOptions(operations);
@@ -90,7 +95,7 @@ export class HttpBatchLinkHandler extends ApolloLink {
 
     const batchKey =
       options.batchKey ||
-      ((operation: Operation) => {
+      ((operation: ApolloLink.Operation) => {
         return this.createBatchKey(operation);
       });
 
@@ -103,8 +108,8 @@ export class HttpBatchLinkHandler extends ApolloLink {
   }
 
   private createOptions(
-    operations: Operation[],
-  ): Required<Pick<Options, 'method' | 'uri' | 'withCredentials'>> {
+    operations: ApolloLink.Operation[],
+  ): Required<Pick<HttpBatchLink.Options, 'method' | 'uri' | 'withCredentials'>> {
     const context: Context = operations[0].getContext();
 
     return {
@@ -114,7 +119,7 @@ export class HttpBatchLinkHandler extends ApolloLink {
     };
   }
 
-  private createBody(operations: Operation[]): Body[] {
+  private createBody(operations: ApolloLink.Operation[]): Body[] {
     return operations.map(operation => {
       const includeExtensions = prioritize(
         operation.getContext().includeExtensions,
@@ -144,10 +149,11 @@ export class HttpBatchLinkHandler extends ApolloLink {
     });
   }
 
-  private createHeaders(operations: Operation[]): HttpHeaders {
+  private createHeaders(operations: ApolloLink.Operation[]): HttpHeaders {
     return operations.reduce(
-      (headers: HttpHeaders, operation: Operation) => {
-        return mergeHeaders(headers, operation.getContext().headers);
+      (headers: HttpHeaders, operation: ApolloLink.Operation) => {
+        const { headers: contextHeaders } = operation.getContext();
+        return contextHeaders ? mergeHeaders(headers, contextHeaders) : headers;
       },
       createHeadersWithClientAwareness({
         headers: this.options.headers,
@@ -156,7 +162,7 @@ export class HttpBatchLinkHandler extends ApolloLink {
     );
   }
 
-  private createBatchKey(operation: Operation): string {
+  private createBatchKey(operation: ApolloLink.Operation): string {
     const context: Context & { skipBatching?: boolean } = operation.getContext();
 
     if (context.skipBatching) {
@@ -175,8 +181,11 @@ export class HttpBatchLinkHandler extends ApolloLink {
     return prioritize(context.uri, this.options.uri, '') + opts;
   }
 
-  public request(op: Operation): LinkObservable<FetchResult> | null {
-    return this.batcher.request(op);
+  public request(
+    op: ApolloLink.Operation,
+    forward: ApolloLink.ForwardFunction,
+  ): Observable<ApolloLink.Result> {
+    return this.batcher.request(op, forward);
   }
 }
 
@@ -186,7 +195,7 @@ export class HttpBatchLinkHandler extends ApolloLink {
 export class HttpBatchLink {
   constructor(private readonly httpClient: HttpClient) {}
 
-  public create(options: BatchOptions): HttpBatchLinkHandler {
+  public create(options: HttpBatchLink.Options): HttpBatchLinkHandler {
     return new HttpBatchLinkHandler(this.httpClient, options);
   }
 }