DocumentTypeDecoration Not Imported inside graphql.ts when there is no document

[JamesParkDev]

Which packages are impacted by your issue?

@graphql-codegen/cli, @graphql-codegen/client-preset

Describe the bug

Package json

{
  "name": "graph-communication-network",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@graphql-codegen/import-types-preset": "^3.0.0",
    "graphql": "^16.9.0"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "5.0.3",
    "@graphql-codegen/client-preset": "4.4.0",
    "@graphql-codegen/introspection": "4.0.3",
    "@graphql-codegen/typescript": "4.1.0",
    "@graphql-codegen/typescript-document-nodes": "4.0.10"
  },
  "scripts": {
    "codegen": "graphql-codegen --config codegen.ts"
  }
}

when we run codegen everything gets generated but graphql has one type issue

Cannot find name 'DocumentTypeDecoration'.

Your Example Website or App

n/a

Steps to Reproduce the Bug or Issue

when we run codegen everything gets generated but graphql has one type issue

Cannot find name 'DocumentTypeDecoration'.

Expected behavior

It think generation should import/generate it.
Looking at local /examples we can see typescript example here https://github.com/dotansimha/graphql-code-generator/blob/master/examples/typescript-esm/src/gql/graphql.ts which imports it at the top, and I'm unsure why it is not included

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• NodeJS: v20.14.0
• graphql version: 16.9.0
• @graphql-codegen/* 5.0.3

Codegen Config File

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

const config: CodegenConfig = {
    overwrite: true,
    schema: "http://localhost:9000/graphql",
    documents: "src/**/*.tsx",
    ignoreNoDocuments: true,
    generates: {
        "src/gql/": {
            preset: "client",
            config: {
                documentMode: "string",
                onlyEnumTypes: false,
                onlyOperationTypes: false,
                useTypeImports: true,
            },
            plugins: [
            ]
        },
        "./graphql.schema.json": {
            plugins: ["introspection"]
        },
        "./schema.graphql": {
            plugins: ["schema-ast"],
            config: {
                includeDirectives: true
            }
        }
    }
};

export default config;

Additional context

No response

[joshuadutton]

I wrote a hook to fix this issue for me. Here's my code:

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

function fixImportsAndLint(path: string, content: string) {
  let newContent = content;
  if (!newContent.startsWith(`/* eslint-disable */`)) {
    newContent = `/* eslint-disable */\n${newContent}`;
  }
  if (path.endsWith('graphql.ts')) {
    newContent = newContent.replace(
      '/* eslint-disable */',
      `/* eslint-disable */\nimport { DocumentTypeDecoration } from '@graphql-typed-document-node/core';\n`
    );
  }
  return newContent;
}

const config: CodegenConfig = {
  schema: 'path/to/schema.graphql',
  documents: ['src/**/*.tsx'],
  ignoreNoDocuments: true,
  generates: {
    './src/graphql/generated/': {
      preset: 'client',
      config: {
        documentMode: 'string',
      },
      hooks: {
        beforeOneFileWrite: (path, content) => {
          return fixImportsAndLint(path, content);
        },
      },
    },
    './schema.graphql': {
      plugins: ['schema-ast'],
      config: {
        includeDirectives: true,
      },
    },
  },
};

export default config;

[joshuadutton]

It then added the import statement automatically once it started generating fragment and query documents, so now I have 2 and need to remove my hook.

[eddeee888]

Hi @JamesParkDev ,
It's a bit hard to debug without a minimal reproduction/ Could you please create one on GitHub, Stackblitz or CodeSandbox?

One thing that jumps out straightaway is you don't need to explicitly bring in @graphql-codegen/client-preset or @graphql-codegen/typescript in the latest versions of @graphql-codegen/cli

[JamesParkDev]

Hi @eddeee888 -

I just made replication of this bug here: https://github.com/JamesParkDev/bug-10176 - I think this bug only happens if there are no documents.

Run command: yarn workspace graph-communication-network codegen, and you will see it generates without it

If you create documents/test.graphql

query findMainUser {
    user(id: "1") {
        id
        username
        email
    }
}

Then you run the yarn workspace graph-communication-network codege the bug will not be present. But I still think that this library should handle this why even if we do set ignoreNoDocuments: true in config, we should be able to build the project or at least get a warning:

WARN: Some imports may not be included if you have no documents

As it might confuse someone just trying to configure.

I switched to SDK style mostly after this.

[JamesParkDev]

@joshuadutton @eddeee888

It then added the import statement automatically once it started generating fragment and query documents, so now I have 2 and need to remove my hook.

Can you check comment above? I'm not sure if we can replicate this if you add documents? I think after you add the documents that can be removed.

A lot of time passed after I had this issue, but I ended up switching to SDK since client-preset was giving me so much issues. Maybe there are ways to trigger this missing even if there are documents, but I'm not sure if there is at this moment.

[eddeee888]

Hi @JamesParkDev , having no documents seem to cause that issue like you mentioned. I've updated the issue title to reflect it.
I agree it should import even if there's no documents.

Another question out of curiousity is what is the SDK approach you mention? 🙂

[JamesParkDev]

Hi @JamesParkDev , having no documents seem to cause that issue like you mentioned. I've updated the issue title to reflect it. I agree it should import even if there's no documents.

Another question out of curiousity is what is the SDK approach you mention? 🙂

@eddeee888
Hi, currently using; https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-apollo-angular there is option sdkClass which can generate methods instead of typing query. e.g

this.sdk.findProductById()

Generated from document FindProductById.graphql

But also there is for vanilla as well I think it would be https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-generic-sdk