Generate type annotations to prevent error TS2742: A type annotation is necessary

[bennycode]

Is your feature request related to a problem? Please describe.

I am generating code using @graphql-codegen/typescript-operations. The generated code looks like this:

export const ProductDeleteDocument = gql`
	mutation ProductDelete($productId: ID!) {
		productDelete(input: { id: $productId }) {
			deletedProductId
		}
	}
`;

When I want to use this code inside another package of my monorepo (using Turborepo) then I am getting the following error:

error TS2742: The inferred type of ‘ProductDeleteDocument‘ cannot be named without a reference to ‘graphql-tag/node_modules/graphql/language/ast‘. This is likely not portable. A type annotation is necessary.

I then have to manually annotate the type for ProductDeleteDocument:

import {DocumentNode} from 'graphql';

export const ProductDeleteDocument: DocumentNode = gql`
	mutation ProductDelete($productId: ID!) {
		productDelete(input: { id: $productId }) {
			deletedProductId
		}
	}
`;

However, this will be overwritten with the next execution of graphql-codegen. Is there a setting / flag that I can use so that @graphql-codegen/typescript-operations will generate explicit typings for me?

Describe the solution you'd like

I would like to use a setting in my .graphqlrc.json which generates explicit annotations for constants and their return values.

Describe alternatives you've considered

I can only fix the problem by manually editing the generated code.

Additional context

My .graphqlrc.json file looks like this:

{
  "schema": [
    {
      "${SHOPIFY_ADMIN_API_URL}": {
        "headers": {
          "X-Shopify-Access-Token": "${SHOPIFY_ADMIN_ACCESS_TOKEN}"
        }
      }
    }
  ],
  "extensions": {
    "codegen": {
      "hooks": {
        "afterAllFileWrite": [
          "prettier --write",
          "yarn eslint --fix"
        ]
      },
      "generates": {
        "src/generated/types/shopify.schema.ts": {
          "plugins": [
            {
              "typescript": {
                "skipTypename": true,
                "enumsAsTypes": true,
                "defaultScalarType": "unknown",
                "strictScalars": true
              }
            }
          ]
        },
        "src/generated/sdk.ts": {
          "documents": "src/graphql/*",
          "preset": "import-types",
          "presetConfig": {
            "typesPath": "./types/shopify.schema"
          },
          "plugins": [
            {
              "typescript-operations": {
                "skipTypename": true,
                "defaultScalarType": "unknown",
                "strictScalars": true
              }
            },
            "typescript-graphql-request"
          ]
        }
      }
    }
  }
}

I run code generation by executing: graphql-codegen -r dotenv/config

[ErlanBelekov]

facing the same problem with Pnpm. Have you found a solution? @bennycode

[cfranchella]

I'm having the same issue. In my case the graphql-tag lib for gql import was giving trouble. (At the typescript-react-apollo plugin) So i've changed it in to usegraphql.macro instead. you need to add graphql.macro as a dependency and add to your codegen.xml

config:
  gqlImport: graphql.macro#gql

Hope it helps!

[Rykuno]

You're right, according to the 3.0 roadmap this will be solved so a temporary solution will work just fine.

The best lightweight simple solution is to simply import DocumentNode at the beginning of your generated utilizing @graphql-codegen/add. This way we don't add any extra dependencies to the build and when 3.0 drops, you can just remove one line of code.

Simply add the import type to the beginning of the generated file and you're good to go. Make sure to install @graphql-codegen/add first then add the following to your codegen.yml

    plugins:
      - add:
          content: 'import type { DocumentNode } from "graphql/language/ast";'
      - add:
          content: "/* eslint-disable */"
      - typescript
      - typescript-operations
      - typescript-react-apollo