CODEWITHSUNDEEP
angulartypescriptgraphql
DauleDK
DauleDK

Reputation: 3443

How to avoid circular dependency in angular project with Apollo client and `graphql-codegen` when importing types in client resolver?

My objective is to use generated types when writing client-side resolvers with the Apollo client.

Everything in the client-side resolvers is working as described by Apollo here. However, in the project, we are also using generated types and GQL services as described in this blog. And here comes the issue. If I import a type from the generated types in the client-side resolvers, I get the error:

WARNING in Circular dependency detected:
eddy.module.ts ->
  ...graphql.module.ts ->
  ...resolvers.ts ->
  ...client-specific-recommendation-resolver.ts ->
  ...get-top-right-corner-state.ts ->
  ...graphql.ts -> // (generated types)
  ...eddy.module.ts

So essentially in the get-top-right-corner-state.ts file, because I import from the generated types like this:

import { Something } from '../../../../../generated/graphql';

Notes

Our application loads apollo in a module called graphql.module, used by a feature module called "eddy". We have configured this with the ngModule property in the codegen.yml file.

What can I do to prevent this? I would very much like to utilize the types generated by graphql-codegen, also in my client-side resolvers.

Upvotes: 2

Views: 540

Answers (1)

DauleDK
DauleDK

Reputation: 3443

After reading and experimenting with this issue, I found a solution. The setup is actually pretty simple, but a tiny bit more complicated than just providing the generated services in the root of Angular.

The feature module does the Apollo setup and creates the client-side resolvers. But instead of providing the generated services here, they are provided in another module, here called lazy-loaded.module.ts. The codegen.yml now looks like this, and there are no circular dependencies:

generates:
 <path-to-feature-module>/graphql.ts:
   schema: <path-to-client-schema>.ts
   documents: ./src/**/*.graphql
   config:
    ngModule: <path-to-lazy-loaded-module>#LazyLoadedModule

The lazy loaded module is then imported by the feature module providing Apollo, and voila, problem solved 😇

Upvotes: 1

Related Questions