如何基于GraphQL schema自动生成Angular的model.ts接口文件

你当前仅安装了Apollo Angular适配插件、配置了输出路径，缺少Codegen核心运行依赖、基础类型生成插件、Schema源配置以及对应执行脚本，无法触发文件生成。

• 补全必备依赖
  执行以下命令安装核心CLI和前置依赖，typescript-apollo-angular无法独立运行，必须依赖基础TS类型插件：
  npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations

• 修正codegen.yaml配置
  你当前的配置缺少必填的Schema来源项，且插件列表不全，参考以下配置修改：

  # 替换为你自己的GraphQL服务地址，也可以填写本地.graphql Schema文件路径
  schema: http://localhost:4200/graphql
  # 如果你在项目内写了.graphql格式的查询/变更语句，或者在ts文件里写了gql模板，加这行扫描文件
  documents: src/**/*.{ts,graphql}
  generates:
    src/models/model.ts:
      plugins:
        - typescript # 生成GraphQL Schema对应的基础TS接口
        - typescript-operations # 基于你写的查询语句生成精准类型
        - typescript-apollo-angular # 生成Apollo Angular可直接注入的服务类
  

• 添加npm执行脚本
  打开项目根目录的package.json，在scripts节点下添加Codegen执行命令：

  {
    "scripts": {
      // 原有其他脚本保留不动
      "generate:models": "graphql-codegen --config codegen.yaml"
    }
  }
  

• 执行生成命令
  在终端运行npm run generate:models，执行完成后即可在src/models路径下找到生成好的model.ts文件，包含所有需要的TS接口和Apollo Angular适配代码。

小提示：如果你只需要纯TS接口定义，不需要生成Apollo Angular服务，可以把插件列表里的typescript-apollo-angular暂时移除，生成速度会更快。

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