Support Angular HttpContext for use in interceptors

[stephenlautier]

Currently, Apollo Angular does not appear to support passing Angular’s HttpContext when making GraphQL requests. This limits the ability to leverage Angular interceptors that rely on HttpContext for custom metadata, such as feature flags, request tracing, or conditional logic.

[vz-tl]

I figured out it should actually be fairly easy to add HttpContext support. For that I monkey-patched the package with a few additions:

diff --git a/node_modules/apollo-angular/fesm2022/apollo-angular-http.mjs b/node_modules/apollo-angular/fesm2022/apollo-angular-http.mjs
index 74fc216..a347773 100644
--- a/node_modules/apollo-angular/fesm2022/apollo-angular-http.mjs
+++ b/node_modules/apollo-angular/fesm2022/apollo-angular-http.mjs
@@ -148,7 +148,7 @@ class HttpBatchLinkHandler extends ApolloLink {
             return new Observable((observer) => {
                 const body = this.createBody(operations);
                 const headers = this.createHeaders(operations);
-                const { method, uri, withCredentials } = this.createOptions(operations);
+                const { method, uri, withCredentials, context } = this.createOptions(operations);
                 if (typeof uri === 'function') {
                     throw new Error(`Option 'uri' is a function, should be a string`);
                 }
@@ -159,6 +159,7 @@ class HttpBatchLinkHandler extends ApolloLink {
                     options: {
                         withCredentials,
                         headers,
+                        context
                     },
                 };
                 const sub = fetch(req, this.httpClient, () => {
@@ -192,6 +193,7 @@ class HttpBatchLinkHandler extends ApolloLink {
             method: pick(context, this.options, 'method'),
             uri: pick(context, this.options, 'uri'),
             withCredentials: pick(context, this.options, 'withCredentials'),
+            context: context.httpContext
         };
     }
     createBody(operations) {
@@ -292,6 +294,7 @@ class HttpLinkHandler extends ApolloLink {
                     withCredentials,
                     useMultipart,
                     headers: this.options.headers,
+                    context: context.httpContext,
                 },
             };
             if (includeExtensions) {
diff --git a/node_modules/apollo-angular/http/types.d.ts b/node_modules/apollo-angular/http/types.d.ts
index 8235501..d120206 100644
--- a/node_modules/apollo-angular/http/types.d.ts
+++ b/node_modules/apollo-angular/http/types.d.ts
@@ -1,5 +1,5 @@
 import { DocumentNode } from 'graphql';
-import { HttpHeaders } from '@angular/common/http';
+import { HttpContext, HttpHeaders } from '@angular/common/http';
 import { ApolloLink } from '@apollo/client';
 declare module '@apollo/client' {
     interface DefaultContext extends Context {
@@ -9,6 +9,7 @@ export type HttpRequestOptions = {
     headers?: HttpHeaders;
     withCredentials?: boolean;
     useMultipart?: boolean;
+    httpContext?: HttpContext;
 };
 export type URIFunction = (operation: ApolloLink.Operation) => string;
 export type FetchOptions = {

Btw. there's already a previously create but still unhandled open feature request: #2129

So, as it looks like there's a demand amongst other developers using this great package, I'd highly appreciate, if this useful feature could be added in a future release!

[vz-tl]

@PowerKiKi , if I'd volunteer for opening a PR, would you be willing to accept it?

[PowerKiKi]

Yes, I would merge a PR that HttpContext support and related unit tests.