Circular dependency on SSR/Angular Universal

[cskiwi]

Hi,

I'm trying to figure out why I'm getting a Circular dependency, this only happens when I run the project for the SSR.
if it runs on client side, I have no error's. So this must be something specific to the angular universal rendering.

But I can't figure out what I have to change to make it work.
maybe it's something totally different that eventually gives this error)

If anyone can help me, I would be very happy.

ERROR RuntimeError: NG0200: Circular dependency in DI detected for Apollo. Find more at https://angular.io/errors/NG0200
    at throwCyclicDependencyError (<ommited>\server\main.js:192678:9)
    at R3Injector.hydrate (<ommited>\server\main.js:199169:7)
    at R3Injector.get (<ommited>\server\main.js:199073:23)
    at R3Injector.get (<ommited>\server\main.js:199082:27)
    at ChainedInjector.get (<ommited>\server\main.js:205932:32)
    at lookupTokenUsingModuleInjector (<ommited>\server\main.js:195683:31)
    at getOrCreateInjectable (<ommited>\server\main.js:195726:10)
    at Module.ɵɵdirectiveInject (<ommited>\server\main.js:203015:10)
    at NodeInjectorFactory.TestPage_Factory [as factory] (<ommited>\server\main.js:391:138)
    at getNodeInjectable (<ommited>\server\main.js:195897:38) {
  code: -200
}

the graphql module (this get's only imported once, in the AppModule)

import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { NgModule, PLATFORM_ID } from '@angular/core';
import {
  ApolloClientOptions,
  ApolloLink,
  DefaultOptions,
  InMemoryCache,
} from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context'; 
import { AuthService } from '@auth0/auth0-angular';

import { lastValueFrom, take } from 'rxjs';
import { isPlatformServer } from '@angular/common';
import { makeStateKey, TransferState } from '@angular/platform-browser';

const STATE_KEY = makeStateKey<any>('apollo.state');

@NgModule({
  exports: [ApolloModule],
  imports: [],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, AuthService, TransferState, PLATFORM_ID],
    },
  ],
})
export class GraphQLModule {}

export function createApollo(
  httpLink: HttpLink,
  authService: AuthService,
  transferState: TransferState,
  platformId: Object
): ApolloClientOptions<any> {
  const defaultOptions: DefaultOptions = {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
      returnPartialData: true
    },
  };

  const cache = new InMemoryCache();
  const isServer = isPlatformServer(platformId);
  const isBrowser = transferState.hasKey<any>(STATE_KEY);

  // Restore cache if wa
  if (isBrowser) {
    const state = transferState.get<any>(STATE_KEY, null);
    if (state) {
      cache.restore(state);
    }
  } else {
    transferState.onSerialize(STATE_KEY, () => {
      return cache.extract();
    });
    // Reset cache after extraction to avoid sharing between requests
    cache.reset();
  }

  // Set our auth token
  const auth = setContext(async (_, { headers }) => {
    if (isServer) {
      return { headers };
    }
    const user = await lastValueFrom(
      authService.isAuthenticated$.pipe(take(1))
    );
    if (!user) {
      return { headers };
    }
    const token = await lastValueFrom(authService.getAccessTokenSilently());

    if (token === null) {
      return { headers };
    }

    // This means we are on the client and a user is logged in
    return {
      headers: {
        ...headers,
        Authorization: `Bearer ${token}`,
      },
    };
  });

  const basic = setContext(() => ({
    headers: {
      Accept: 'charset=utf-8',
    },
  }));

  const link = ApolloLink.from([
    basic,
    auth,
    httpLink.create({ uri: `http://localhost:5000/graphql` }),
  ]);

  const options = {
    link,
    cache,
    defaultOptions,
    ...(isBrowser
      ? {
          // queries with `forceFetch` enabled will be delayed
          ssrForceFetchDelay: 200,
        }
      : {
          // avoid to run twice queries with `forceFetch` enabled
          ssrMode: true,
        }),
  };

  return options;
}

Versions:

"@angular/core": "~14.2.0",
"@nguniversal/common": "^14.0.0",
"@nguniversal/express-engine": "^14.0.0",
"apollo-angular": "^4.1.0",
"@apollo/client": "^3.7.0",

[PowerKiKi]

What versions of angular and apollo-angular ?

[cskiwi]

Added them in the original question, the versions are:

"@angular/core": "~14.2.0",
"@nguniversal/common": "^14.0.0",
"@nguniversal/express-engine": "^14.0.0",
"apollo-angular": "^4.1.0",
"@apollo/client": "^3.7.0",

[dan-ec05]

Could you solve the issue? I'm having this same problem when the SSR is activated :(

[cskiwi]

@danidan2905 this was while ago, but I think I solved it via using the something: Relation<Foo> instead of something: Foo in all your classes