Apollo Angular GraphQL 代码生成。从单个 schema.graphqls 文件生成查询和变更答案

【问题标题】：Apollo Angular GraphQL Code Generation. Generate Queries and Mutations from single schema.graphqls fileApollo Angular GraphQL 代码生成。从单个 schema.graphqls 文件生成查询和变更
【发布时间】：2023-01-22 04:08:55
【问题描述】：

我目前正在尝试获取 Apollo Angular 代码生成（请参阅：https://the-guild.dev/graphql/codegen/docs/guides/angular）以从单个 schema.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 文件，例如 Apollo Angular 代码生成指南中最后一个示例中使用的 PostsGQL。有什么我想念的吗？为什么不同时生成 GQL 文件？查询出现在 schema.graphqls 文件中，但不在最终的 generated.ts 文件中。我们需要分别指定突变和查询吗？如果是这样，为什么？

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

【问题讨论】：

标签： angular graphql apollo graphql-codegen apollo-angular

【解决方案1】：

GraphQL 有两个方面：

模式：GraphQL 的定义服务器界面。

操作：你的GraphQL的定义客户查询或突变请求。

您已经定义了模式，但是没有操作.假设您想要生成 PostsGQL：

在 .graphql 文件中定义您的操作。在这种情况下，让我们这样做：

# file: ./src/app/graphql/operations.graphql

query Posts {
  posts {
    id,
    title,
    author {
      id
      firstName
    }
  }
}

在代码生成配置中设置文档属性：

// file: ./codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli';

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

运行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

【讨论】：