在客户端解析器中导入类型时，如何避免使用 Apollo 客户端和 `graphql-codegen` 的角度项目中的循环依赖？

Question

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.

Answer 1

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 😇