阿波罗Angular GraphQL代码生成.从单个模式生成查询和突变.graphqls文件

Question

我目前正试图获得阿波罗Angular代码生成(见:https://the-guild.dev/graphql/codegen/docs/guides/angular)从单个模式创建类型，查询和突变。graphqls文件。我使用与指南

中相同的模式文件

type Author {
id: Int!
firstName: String!
lastName: String!
posts(findTitle: String): [Post]
}

type Post {
id: Int!
title: String!
author: Author
}

type Query {
posts: [Post]
}

再次，在指南中，我添加必要的依赖到我的项目

npm install graphql
npm install -D typescript
npm install -D @graphql-codegen/cli
npm install -D @graphql-codegen/typescript
npm install -D @graphql-codegen/typescript-operations
npm install -D @graphql-codegen/typescript-apollo-angular

，我使用以下codegen.ts文件:

import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
schema: './schema.graphqls',
generates: {
'./src/app/graphql/generated.ts': {
plugins: [
'typescript',
'typescript-operations',
'typescript-apollo-angular',
],
},
},
};
export default config;

执行命令npm run generate后，收到成功提示，生成指定文件./src/app/graphql/generated.ts。然而，在这个文件中，我只得到类型定义。没有GQL文件，比如阿波罗Angular代码生成指南中最后一个例子中使用的PostsGQL。我是不是漏掉了什么?为什么不生成GQL文件?查询出现在模式中。graphqls文件，但不在最终的generated.ts文件中。我们需要分别指定突变和查询吗?如果是，为什么?

我已经用我的例子创建了一个Stackblitz: https://stackblitz.com/edit/node-mvtcqm。在codegen-example目录下是我的示例Angular项目，其中包含阿波罗GraphQL代码生成和GraphQL模式文件。

Answer 1

GraphQL有两个方面:

1. 模式:GraphQL服务器的定义接口。
2. 操作:定义GraphQL客户端

已经定义了模式，但是没有操作。假设你想生成PostsGQL:

1. 在.graphql文件中定义操作。在本例中，我们执行:

   # file: ./src/app/graphql/operations.graphql
   query Posts {
   posts {
   id,
   title,
   author {
   id
   firstName
   }
   }
   }
   

2. 在你的代码根配置中设置文档属性:

   // file: ./codegen.ts
   import type { CodegenConfig } from '@graphql-codegen/cli';
   const config: CodegenConfig = {
   schema: './schema.graphqls',
   generates: {
   './src/app/graphql/generated.ts': {
   documents: './src/app/graphql/operations.graphql', // <-- Bingo!!!
   plugins: [
   'typescript',
   'typescript-operations',
   'typescript-apollo-angular',
   ],
   },
   },
   };
   export default config;
   

3. 运行npm run generate并检查生成的.ts文件:

   // file: ./src/app/graphql/generated.ts
   // ...
   @Injectable({
   providedIn: 'root'
   })
   export class PostsGQL extends Apollo.Query<PostsQuery, PostsQueryVariables> {
   document = PostsDocument;
   constructor(apollo: Apollo.Apollo) {
   super(apollo);
   }
   }
   

查看这里的分支示例:https://stackblitz.com/edit/node-k4pecg