配置GraphQL Code Generator遇错：无法加载typescript-common插件

核心原因 #

typescript-common并非GraphQL Code Generator当前支持的有效插件名称，该插件的功能已被整合到typescript核心插件中。你在配置里指定了一个不存在的插件，导致加载失败并抛出错误。

解决步骤 #

1. 修正配置文件
   将codegen.ts中的plugins数组里的'typescript-common'替换为'typescript'，修改后的配置如下：

   // codegen.ts
   import type { CodegenConfig } from '@graphql-codegen/cli';
   
   const config: CodegenConfig = {
     schema: [
       {
         'https://my-endpoint.com': {
           headers: {
             'Introspection-Key': '8787667676867686678432',
           },
         },
       },
     ],
     documents: ['src/components/**/*.gql'],
     generates: {
       'src/graphql/generated/schema.ts': {
         plugins: [
           'typescript', // 替换原有的typescript-common
           'typescript-client',
           'typescript-react-apollo',
         ],
       },
     },
   };
   export default config;
   

2. 确保依赖完整
   执行以下命令安装所需的插件依赖：

   npm install @graphql-codegen/typescript @graphql-codegen/typescript-client @graphql-codegen/typescript-react-apollo --save-dev
   

3. 重新执行生成命令
   再次运行gql-gen --config codegen.ts即可正常生成代码。

内容的提问来源于stack exchange，提问作者meez