使用 graphql-code-generator 時找不到模塊

Question

我正在使用來自https://www.graphql-code-generator.com/的 GraphQL 代碼生成器。 在我的 AWS CDK typescript Lambda 項目中。 我想使用 typescript-document-nodes 或 typed-document-node 插件。 （我更喜歡 typed-document-node 因為它看起來更現代）。 每當我嘗試其中一個插件時，我的項目中都會出現與未找到的模塊相關的錯誤。 （插件 typescript-operations 正在生成預期的代碼）

代碼生成.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"

類型化文檔節點問題：

生成的代碼（graphql.ts）看起來有問題在我的編輯器中，我看到以下錯誤：

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


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

使用 codegen cli 生成代碼時，我也會收到相同的錯誤：

[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.

打字稿文檔節點問題：

這個插件的代碼似乎在我的項目中生成得很好

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
    }
  }
}
    `;

但是，當從我的 Lambda function 運行代碼時，如下所示：

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

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

我得到：

找不到模塊'../../@types/graphql'

當我從 graphql.ts 導入生成的類型時，它工作正常。 但是，在導入 gql 時，我得到了找不到模塊錯誤

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

因此，這兩個問題似乎都與未找到模塊有關。

也許這個問題與我的 tsconfig 文件有關？ 我在這個 CDK 項目中遇到了很多無法找到模塊的問題，其中大部分與 lambda 層有關。 但是這個是唯一一個和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

我將@graphql-typed-document-node/core添加到我的dependencies項而不是devDependencies來解決這個問題。