Angular Graphql JWTToken Http Only

I want to use the standard approach from Apollo client to automatically get a refreshed token when I face an error related to authentication. I initially wanted to use the following approach:

const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) => {
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
//wanted to call the Refreshtoken from here but it doesn't work due to circular dependancy
authService.refreshToken().......

});
}
if (networkError) {
notificationService.show(0, 'Network Error', networkError.message);
}
});


However, I noticed that I can't call a service that I initially developed due to circular dependancy as ApolloClient must be first instanciated....

Do you have any other idea or suggestion to proceed?

I also thought by using the interceptor like below but Graphql is not RestAPI....

import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
import { catchError, type Observable, throwError } from 'rxjs';
import { inject } from '@angular/core';
import { NotificationService } from '../../../shared/components/notification.service';

export function authInterceptor(req: HttpRequest<any>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
const notificationService = inject(NotificationService);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
console.log(err);
notificationService.show(err.status, err.error, err.message);
return throwError(() => err);
})
);
}
```

My setup:
Angular 19
Apollo client 3

Continue reading...