Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

duplicate fragments within queries

See original GitHub issue

Describe the bug

When using fragments in queries which use fragements in multiple positions, the fragments are beeing repeated in the string concatenation, so that most server will complain about it Error: There can be only one fragment named "addressFields".

Your Example Website or App

https://github.com/bastiion/graphql-codegen-duplicate-fragments-issue

Steps to Reproduce the Bug or Issue

formulate a query that uses same fragments within two other fragments
run codegen

Expected behavior

fragments must be deduplicated

a work-arround can be ssen here, which would also be an entry point for a bug fix https://github.com/bastiion/graphql-codegen-duplicate-fragments-issue/commit/d08f51ecdd7c3cb6b7af68c7bd24aae5b4a5808a#diff-ca580bb0b9ca66ec74fb97288ee12d571481819ed8e689ea99b2d6ff79dacc24

Screenshots or Videos

No response

Platform

“@graphql-codegen/cli”: “2.3.0”,
“@graphql-codegen/fragment-matcher”: “~3.3.0”,
“@graphql-codegen/introspection”: “~2.2.0”,
“@graphql-codegen/typescript”: “~2.7.1”,
“@graphql-codegen/typescript-document-nodes”: “~2.3.1”,
“@graphql-codegen/typescript-operations”: “~2.5.1”,
“@graphql-codegen/typescript-react-query”: “~3.6.1”,

Codegen Config File

overwrite: true
schema:
  - http://localhost:9002/graphql
documents: 'graphql/**/*.graphql'
generates:
  graphql/generated/index.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-query'
    config:
      pureMagicComment: true
      fetcher:
        func: ../fetcher#useFetchData
        isReactHook: true

Additional context

example query:

fragment addressFields on Address {
  address
  city
}

fragment personFields on Person {
  name
  address {
    ...addressFields
  }
}

query company {
  company {
    name
    address {
      ...addressFields
    }
    employees {
      ...personFields
    }
  }
}

will produce:

export const AddressFieldsFragmentDoc = /*#__PURE__*/ `
    fragment addressFields on Address {
  address
  city
}
    `;
export const PersonFieldsFragmentDoc = /*#__PURE__*/ `
    fragment personFields on Person {
  name
  address {
    ...addressFields
  }
}
    ${AddressFieldsFragmentDoc}`;
export const CompanyDocument = /*#__PURE__*/ `
    query company {
  company {
    name
    address {
      ...addressFields
    }
    employees {
      ...personFields
    }
  }
}
    ${AddressFieldsFragmentDoc}
${PersonFieldsFragmentDoc}`;