module not found when using graphql-code-generator

Question

I'm using GraphQL codegen from https://www.graphql-code-generator.com/ . in my AWS CDK typescript Lambda project. I would like to use the typescript-document-nodes or the typed-document-node plugin. (I prefer typed-document-node because it seems that's more modern). Whenever I try one of these plugins i get an error in my project related to modules that are not found. (The plugin typescript-operations is generating the expected code)

codegen.yml:

watch: false
watchConfig:
  usePolling: false
  interval: 1000
overwrite: true
schema:
  - xxxxxxxxx:
      headers:
        'x-api-key': xxxxxx
  - "awsAppsyncDirectives.graphql"
documents:
- 'src/graphql/*.query.graphql'
- 'src/graphql/*.fragment.graphql'
- 'src/graphql/*/*.query.graphql'
- 'src/graphql/*/*.fragment.graphql'
generates:
  src/@types/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-document-nodes"
      - "typed-document-node"

The typed-document-node problem:

Something looks wrong in generated code (graphql.ts) In my editor i see the following error:

import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';


Cannot find module '@graphql-typed-document-node/core' or its corresponding type declarations.

When generating code with the codegen cli I also get the same error:

[12:26:05 PM] File change detected. Starting incremental compilation...

src/@types/graphql.ts:1:51 - error TS2307: Cannot find module '@graphql-typed-document-node/core' or its corresponding type declarations.

1 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
[12:26:05 PM] Found 1 error. Watching for file changes.

The typescript-document-nodes problem:

The code from this plugin seems to be generating fine in my project

export const ListAuthorizationTwinfields = gql`
    query listAuthorizationTwinfields($filter: ModelAuthorizationTwinfieldFilterInput) {
  listAuthorizationTwinfields(filter: $filter) {
    items {
      accessToken
      accessTokenValidatedUntil
      active
      administrationId
      cluster
      createdAt
      debtorsImported
      debtorsStarted
      firstBankStatement
      id
      incremental
      invoicesImported
      invoicesStarted
      lastExecutedCallback
      memosImportedAt
      memosStartedAt
      officeCode
      officeName
      refreshToken
      transactionCodes
      transactionsStarted
      transactionsImported
      updatedAt
    }
  }
}
    `;

However, when running the code from my Lambda function like this:

import { ListAuthorizationTwinfields } from "../../@types/graphql";

    data = await graphql.query({
        query: ListAuthorizationTwinfields,
        variables: variables
    }, graphqlConfig);

I get:

Cannot find module '../../@types/graphql'

When I import generated types from graphql.ts it works fine. However when importing the gql i get the cannot find module error

==================================

So both problems seem to be related to modules not being found.

Perhaps this problem is related to my tsconfig file? I've had load of problems in this CDK project of not being able to find modules, most of the related to lambda layers. But this one is the only one related to the codegen.

{
    "compilerOptions": {
        "target": "ES2021",
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": [
            "ES2021",
            "DOM"
        ],
        "esModuleInterop": true,
        "declaration": true,
        "strict": true,
        "noImplicitAny": false,
        "noImplicitThis": false,
        "strictNullChecks": true,
        "alwaysStrict": true,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": false,
        "inlineSourceMap": true,
        "inlineSources": true,
        "experimentalDecorators": true,
        "strictPropertyInitialization": false,
        "useUnknownInCatchVariables": false,
        "typeRoots": [
            "./node_modules/@types",
            "./src/@types"
        ]
    },
    "include": [
        "./src/lambda",
        "./src/layers/helper/nodejs/node_modules",
    ],
    "exclude": [
        "node_modules",
        "cdk.out"
    ]
}

Answer 1

I added @graphql-typed-document-node/core to my dependencies instead of devDependencies to solve this problem.