Client preset generates duplicate fragments definitions

[Banou26]

Which packages are impacted by your issue?

@graphql-codegen/client-preset^1.2.6

Describe the bug

Using these definitions

export const COMMON_FRAGMENT = gql(`
  fragment CommonFragment on Common {
    common
    common2
  }
`)

export const FOO_FRAGMENT = gql(`
  fragment FooFragment on Foo {
    ...CommonFragment
    foo
    foo2
    bar {
      ...BarFragment
    }
  }
`)

export const BAR_FRAGMENT = gql(`
  fragment BarFragment on Bar {
    ...CommonFragment
    bar
    bar2
  }
`)

export const _GET_FOO = gql(`
  query GetFoo {
    foo {
      ...FooFragment
    }
  }
`)

the client preset generates a GetFoo document that contains the CommonFragment twice, which causes most servers to reject the request

Your Example Website or App

graphql-code-generator-issue-8842

Steps to Reproduce the Bug or Issue

1. npm i && npm run dev
2. Go to http://localhost:2222
3. open devtools and check out the logs

Expected behavior

Document should not contain duplicate fragments

Screenshots or Videos

Platform

• NodeJS: 19.0.1

    "graphql": "^16.6.0",
    "@graphql-codegen/cli": "^2.16.4",
    "@graphql-codegen/client-preset": "^1.2.6",
    "@graphql-codegen/typescript-react-apollo": "^3.3.7",
    "@graphql-codegen/typescript-resolvers": "^2.7.12",

Codegen Config File

const config: CodegenConfig = {
  schema: [typeDefs],
  documents: ['src/**/*.ts', 'src/**/*.tsx'],
  generates: {
    './src/generated/': {
      preset: 'client',
      plugins: ['typescript-resolvers'],
      presetConfig: {
        gqlTagName: 'gql',
        fragmentMasking: false
      }
    }
  },
  ignoreNoDocuments: true
}

[Julhol-droid]

I have the same Problem, resulting in nextjs outputing the generated Definition files in the Server Console, with a Error that my Fragment is defined twice in the generated Typescript file.

[PiotrBryla]

Same for me, identical config file.

[Julhol-droid]

I managed to make it work, by deleting the preset: "client" line in the Config File. However I have the following plugins:
'typescript', 'typescript-operations', 'typescript-react-apollo'
Maybe it works for you as well.

import type { CodegenConfig } from '@graphql-codegen/cli'
import * as dotenv from 'dotenv-flow'

dotenv.config()

const config: CodegenConfig = {
  schema: process.env.NEXT_PUBLIC_WORDPRESS_URL + '/graphql',
  documents: 'src/graphql/**/*.graphql',
  generates: {
    'src/__generated__/graphql.tsx': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo']
    }
  },
  verbose: true,
  config: {
    namingConvention: {
      enumValues: 'change-case-all#upperCase'
    }
  }
}

export default config

[c10b10]

Same for me. Tried a similar config to @Julhol-droid's but that no longer auto-includes fragments.

Looking at the generated gql.ts file, indeed there are two declarations for the duplicate fragment. One in the documents variable, one separate.

Any idea how to fix this short of just dropping fragment auto-import altogether?

[n1ru4l]

Hey everyone, we are aware of this issue and we will tackle this issue next week!

[n1ru4l]

Hey everyone, I created #8971 for resolving this once and for all. You can already start using the canary versions of the PR and provide feedback here.