Tree shaking when using Typed Document Node in frontend code

[LarsEjaas]

I am using GraphQL Codegen in a project based on Next.js.

I have a large GraphQL API and my types are all generated to the same graphql-operations file. The file is rather large but generation is fast, so performance-wise it's no big deal in development.

But I am also using Type Document Node generated to the same operations file and because of this my HUGE graphql-operations file is bundled into my final files when I build the project, adding more than 100kb gzipped to the bundle size 😵‍💫

I have looked into various ways of setting up my codegen.ts file to get any runtime code like enums and typed-document-node separated from the types in separate files. I am still unsure how to accomplish this.

I may have missed some settings for the typed-document-node plugin or a preset that does this. But after tweaking my config in various ways I am still getting nowhere.

I looked into this Decouple typed-document-node plugin from typescript and typescript-operations where @ngregory-rbi had a similar issue and resolved it using the import-types-preset preset, but I am not sure we are trying to accomplish the same thing.

[LarsEjaas]

I found a solution to the issue.

Split my codegen.ts generates into 2 separate sections:

const config: CodegenConfig = {
  overwrite: true,
  debug: false,
  verbose: false,
  emitLegacyCommonJSImports: false,
  documents: ["src/data/**/*.graphql"],
  config: {
    preResolveTypes: true,
  },
  generates: {
    "./src/types/generated-types.ts": {
      schema: [
        "https://example.com/graphql/",
        "./src/apolloClient/client-schema.graphql",
      ],
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-apollo-client-helpers",
      ],
      config: {
        preResolveTypes: true,
        /**This will prevent Apollo errors on dublicate fragments*/
        dedupeFragments: true,
      },
    },
    "./src/types/typed-document-node.ts": {
      schema: [
        "https://example.com/graphql/",
        "./src/apolloClient/client-schema.graphql",
      ],
      plugins: ["typed-document-node"],
      preset: "import-types-preset",
      presetConfig: {
        typesPath: "types/generated-types",
        importTypesNamespace: "Types",
      },
      config: {
        preResolveTypes: true,
        /**This will prevent Apollo errors on dublicate fragments*/
        dedupeFragments: true,
        /**Add prefix to all imported types to refer them through this namespace*/
        typesPrefix: "Types.",
      },
    },
  },
};

Made my bundlesize 80 kb smaller - yeah!