如何使用 graphql-codegen-plugin-handlebars-helpers npm 包-JavaScript中文网-JavaScript教程资源分享门户

如果你正在学习前端开发，那么你一定会遇到使用 GraphQL 的情况。GraphQL 是一种查询语言，它让你可以在客户端和服务器之间声明式地定义数据的传输。GraphQL 的主要优势在于它提高了应用程序的性能和可维护性，同时减少了网络请求。

然而，为了使用 GraphQL，需要编写大量的代码来定义查询和响应类型。这些代码很容易出错且难以维护，因此我们需要一种工具来自动生成这些代码。graphql-code-generator 就是这样一个工具，它可以根据你的 GraphQL Schema 自动生成客户端代码。

在这篇文章中，我将介绍 graphql-codegen-plugin-handlebars-helpers npm 包的使用方法，它是一款在 graphql-code-generator 中使用 Handlebars 模板的插件。

安装

首先，我们需要安装以下依赖项：

npm install -D @graphql-codegen/cli graphql graphql-tag @graphql-codegen/typescript @graphql-codegen/typescript-resolvers graphql-codegen-handlebars-template graphql-codegen-plugin-handlebars-helpers

请注意，这里使用的是 TypeScript 和 TypeScript-Resolvers。如果你使用的是 JavaScript，只需将包的名称从 "@graphql-codegen/typescript" 更改为 "@graphql-codegen/javascript"。

配置

配置 graphql-codegen 非常容易。我们只需要在项目根目录下创建一个 .graphql-codegen 目录，并在目录下创建一个 codegen.yml 文件。

-- -------------------- ---- -------
---------- ----
---------- ----------------
----------
  -------------------------
    --------
      - ------------
      - ----------------------
      - --------------------
    -------
      ------------------
        -------- ---------------------------

这个配置文件告诉 graphql-codegen 在我们的项目中查找所有 .graphql 文件，并将生成的代码输出到 src/generated/graphql.ts 文件中。

注意到 handlebars-helpers 单词在插件名称和配置文件中是复数，而在 npm 包名中是单数（graphql-codegen-plugin-handlebars-helpers）。这是由于 npm 会将插件名称和配置文件名转换为 snake_case，但是包名称必须使用 kebab-case。

我们还需要告诉 graphql-codegen-plugin-handlebars-helpers 去哪里查找 Handlebars helpers。我们可以使用以下配置选项：

helpers: 包含 Handlebars helpers 的目录或文件。

模板

接下来，我们需要编写我们的 Handlebars 模板。例如，我们可以编写一个查询或 mutation 的模板：

import gql from 'graphql-tag';
import { TypedDocumentNode } from '@graphql-typed-document-node/core';
import { <%= operationName %>Variables } from '../types/<%= fileName %>';

export const <%= operationName %>Document: TypedDocumentNode<<%= operationName %>Variables, <%= operationName %>['data']> = gql`
    <%= query %>
`;

在这个模板中，我们使用 <%= ... %> 语法插入模板引擎里的变量，如 operationName 和 fileName。这些变量是在插件代码中设置的。

Helpers

接下来，我们需要编写我们的 Handlebars helpers。例如，我们可以编写一个 helpers 文件来生成日期字符串：

const format = require('date-fns/format');

module.exports = {
  date(date, formatString) {
    return format(date, formatString);
  }
}

然后，我们可以在模板中使用这个 helper：

const date = {{date createdAt 'YYYY-MM-DD'}};

这个代码会将 createdAt 字段转换为日期格式，并以 YYYY-MM-DD 格式返回。

生成代码

一旦我们完成了模板和 Helper 编写，我们就可以尝试生成代码了。运行以下命令：

npx graphql-codegen

这个命令会读取 codegen.yml 文件，查找我们的 GraphQL Schema 的所有查询和 mutations，从模板生成 TypeScript 类型和代码。

结论

以上就是如何使用 graphql-codegen-plugin-handlebars-helpers npm 包的教程和指导。使用这个包，我们可以快速生成客户端代码，极大地提高了我们的开发效率。

同时，使用 Handlebars 模板和 helpers，我们可以更加灵活地自定义生成的代码，实现更多复杂的逻辑。

了解了这些内容，相信你已经有了许多想法，可以尝试使用这些工具改进你的项目。祝你一切顺利！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f3f3422dbf7be33b2567192