How to avoid the type duplication when you have a lot of graphql files

[krp12345]

Hello Community,

I have a lot of .graphql files in my Angular project. When I use the code generation tool, it creates a very large file that contains all types and all Angular services in a single file. This is quite overwhelming.

I would like to have each .graphql file generate its own corresponding .ts file, while keeping all common types in a single common.ts file. This way, each Angular service will be in a separate file, and we can avoid duplication by placing shared types in one location.

For example, if I have x.graphql and y.graphql, I want the output to be x.ts, y.ts, and common.ts. For example, If both .graphql files query the student type, the type definition for student should be included in common.ts.

Here is my current configuration:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'http://xxxxxxxxxxxxxxxxxxx/graphql',
  documents: './src/**/*.graphql',
  generates: {
    './graphql/generated.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-apollo-angular']
    }
  }
};
export default config;