Angular Graphql - HTTP Only cookie session

I need some helps to progress on the refresher token topic. My setup is this:

• Full graphql
• HTTP Cookie only

import { type ApplicationConfig, provideZoneChangeDetection, inject, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import { provideApollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { from, InMemoryCache } from '@apollo/client/core';
import { environment } from '../environments/environment';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura'
import { MessageService } from 'primeng/api';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { onError } from '@apollo/client/link/error'
import { AuthService } from './security/auth/auth.service';

const uri = environment.GRAPHQL_URI;

export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(),
provideAnimationsAsync(), providePrimeNG({ theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } } }),
MessageService, importProvidersFrom([BrowserAnimationsModule]),
provideHttpClient(withInterceptors([]), withFetch()),
{ provide: AuthService },
provideApollo(() => {
let originalError: any;
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path, extensions }) => {
originalError = extensions?.['originalError']
switch (originalError?.['statusCode']) {
case 401:
const authService = inject(AuthService)
authService.refreshToken().subscribe({
next: (data) => {
console.log('Refresh done')
},
error: (error) => {
console.log('not possible')
}
})
console.log('refreshToken required')
break
}
}
//console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
);
}
if (networkError) console.error(`[Network error]: ${networkError.name}`);
})
const httpLink = inject(HttpLink);
return {
link: from([errorLink, httpLink.create({
uri,
withCredentials: true,
})]),
defaultOptions: {
watchQuery: {
errorPolicy: 'none' /** See https://www.apollographql.com/docs/react/data/error-handling for more details */
}
},
cache: new InMemoryCache(),
};
})]
};



As you can see above, I setup my apollo to catch any error via the error link as suggested in the official Apollo doc then I try to refresh the token via a service which works fine when I call it separately via postman.

However, if I try to inject the service "const authService = inject(AuthService)" in the app.config.ts, I have this issue:

ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.dev/errors/NG0203
​

I also thougth to use an interceptor but the HTTPResponse is always 200 as per Apollo Server standard.

So, I'm running in circle for almost 1 week without getting a solution....

Thanks in advance for your help

Continue reading...