Graphql Codegen Duplicating Document Fields

Question

I have setup codegen.ts as follows:

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

const config: CodegenConfig = {
  overwrite: true,
  schema: 'http://localhost:3333/graphql',
  documents: 'libs/graphql/**/*.graphql',
  ignoreNoDocuments: true, // for better experience with the watcher
  generates: {
    'libs/graphql/generated/': {
      preset: 'client',
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-urql',
        'urql-introspection',
      ],
     
    },
  },
};

export default config;

and here is my graphql query:

query Categories {
  categories {
    name
    id
    description
    image
    parent {
      name
    }
  }
}

I'm then trying to use the generated hooks in my component as follows:

 const [result] = useCategoriesQuery();

However I'm getting the following error:

Error: 
  x the name `CategoriesDocument` is defined multiple times

I can see that CategoriesDocument has multiple definitions:

export const CategoriesDocument = {"kind":"Document", ...} and,
export const CategoriesDocument = gql

I'm not sure how to fix this issue. There is a similar question here but their fix has not worked for me.

score -2 · Answer 1 · answered Feb 28 '23 at 17:19

The codegen docs recommend using just client preset. It seems having both preset and plugins in the config is what is producing the duplicates. So use one but not both. So instead of:

 preset: 'client',
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-urql',
        'urql-introspection',
      ],

just do:

 preset: 'client',

I noticed using the plugins provide ready to use hooks e.g. useRegisterMutation but the preset does not. With preset, I am just getting a document that I pass to the usual useMutation hook e.g. useMutation(registerMutationDocument)

However, presets are recommended for a better dev experience.

Graphql Codegen Duplicating Document Fields

1 Answers1