Fragment imports broken in latest update

[wassim-k]

Which packages are impacted by your issue?

@graphql-codegen/typed-document-node

Describe the bug

In the most recet update of @graphql-codegen/visitor-plugin-common v3.1.0 when using typed-document-node plugin with near-operation-file-preset then fragment imports from other files are missing as shown in the minial production.

Your Example Website or App

https://stackblitz.com/edit/graphql-codegen-fragment-issue?file=src/user.query.ts

Steps to Reproduce the Bug or Issue

1. Run yarn then yarn codegen in the minial reproduction and navigate to src/user.query.ts file

Expected behavior

UserFragmentDoc import should be defined at the top of user.query.ts file.

Screenshots or Videos

No response

Platform

• Windows
• NodeJS: 16
• graphql version: 16.6.0
• @graphql-codegen/cli: ^3.3.0
• @graphql-codegen/near-operation-file-preset: ^2.5.0
• @graphql-codegen/typed-document-node: ^4.0.0
• @graphql-codegen/typescript: ^3.0.3
• @graphql-codegen/typescript-operations: ^3.0.3

Codegen Config File

schema: './schema.graphql'
overwrite: true
config:
  documentMode: graphQLTag
  dedupeOperationSuffix: true
generates:
  ./src/types.ts:
    plugins:
      - typescript
  ./src:
    documents: ./src/**/*.graphql
    preset: near-operation-file
    presetConfig:
      extension: .ts
      baseTypesPath: types
      importTypesNamespace: _
    plugins:
      - typescript-operations
      - typed-document-node

Additional context

No response

[leimantas]

Have this error: Module '"@graphql-typed-document-node/core"' has no exported member 'DocumentTypeDecoration'. in generated file fragment-masking.ts when fragmentMasking is enabled.

[Tbaut]

Thanks for addressing this issues @wassim-k since it's merged, I've tested all the alpha versions of my graphql-codegen deps, but it doesn't seem like this is fixed. Any hint? my deps are:

    "@graphql-codegen/cli": "alpha",
    "@graphql-codegen/client-preset": "alpha",
    "@graphql-codegen/typescript-react-query": "alpha",

FWIW I tried with the yarn resolutions to force "@graphql-codegen/visitor-plugin-common": "alpha"
But this actually adds some more unknown variables like Cannot find name 'TypedDocumentString'

[wassim-k]

Hi @Tbaut, I just tested it with the package.json below and it's working with the correct fragment imports. Not sure if there are other changes made to other packages that are causing the issue you're seeing.

  "devDependencies": {
    "@graphql-codegen/add": "4.0.1",
    "@graphql-codegen/cli": "3.3.0",
    "@graphql-codegen/near-operation-file-preset": "2.5.0",
    "@graphql-codegen/typed-document-node": "^4.0.0",
    "@graphql-codegen/typescript": "3.0.3",
    "@graphql-codegen/typescript-operations": "3.0.3",
  },
  "resolutions": {
    "@graphql-codegen/visitor-plugin-common": "3.2.0-alpha-20230417134424-6b5ea2773"
  }

[gentlementlegen]

Facing the same issue. Tried to used exactly the same plackages as described in

Hi @Tbaut, I just tested it with the package.json below and it's working with the correct fragment imports. Not sure if there are other changes made to other packages that are causing the issue you're seeing.

  "devDependencies": {
    "@graphql-codegen/add": "4.0.1",
    "@graphql-codegen/cli": "3.3.0",
    "@graphql-codegen/near-operation-file-preset": "2.5.0",
    "@graphql-codegen/typed-document-node": "^4.0.0",
    "@graphql-codegen/typescript": "3.0.3",
    "@graphql-codegen/typescript-operations": "3.0.3",
  },
  "resolutions": {
    "@graphql-codegen/visitor-plugin-common": "3.2.0-alpha-20230417134424-6b5ea2773"
  }

But doesn't solve the issue, getting the exact same as

Have this error: Module '"@graphql-typed-document-node/core"' has no exported member 'DocumentTypeDecoration'. in generated file fragment-masking.ts when fragmentMasking is enabled.

The generated fragment-masking.ts contains

import { ResultOf, DocumentTypeDecoration,  } from '@graphql-typed-document-node/core';

Which breaks the fragments.

[wassim-k]

I don't believe this issue is related, but I tried to create a reproduction with the above config and I can't seem to replicate it, can you please let me know if I missed something: https://stackblitz.com/edit/graphql-codegen-fragment-issue-dzbqch

[cideM]

Stackblitz uses Turbo instead of NPM. The reason you can't reproduce might be because in your project cat ./node_modules/@graphql-typed-document-node/core/package.json shows me version 3.2.0 whereas the ones who have this issue are on version 3.1.1. Note that I'm not actually sure if it's because of Turbo but I think it's a pretty likely guess. Some subtle differences in the resolution of transitive dependencies maybe.

Try this to make sure the transitive dependency is updated if you have the issue that DocumentTypeDecoration can't be found

  "overrides": {
    "@graphql-typed-document-node/core": "3.2.0"
  }

[Tbaut]

This issue is still happening with the latest release, however using yarn resolutions and adding what @cideM suggested worked

  "resolutions": {
    "@graphql-typed-document-node/core": "3.2.0"
  },