前言
在GraphQL的世界里，我们经常要写很长的GraphQL Query，这往往会导致代码难以维护和阅读。为了解决这个问题，我们常常采用一些工具和方法。例如，我们会使用GraphQL Fragments来重复使用一些查询字段；我们也会使用GraphQL Variables来动态传入参数；而且，我们还可以使用工具来生成GraphQL Query的代码。在这篇文章中，我们将介绍一个非常好用的npm包——graphql-codegen-add，并介绍如何用它来优雅地生成GraphQL Query。
什么是graphql-codegen-add
graphql-codegen-add是一个npm包，它可以将一些常见的GraphQL Query模式以更加优雅的方式添加到你的项目中。你可以使用它来快速生成GraphQL Query代码，并且它支持GraphQL Schema，因此你可以在查询中引用你的GraphQL Schema。graphql-codegen-add支持多种语言，包括JavaScript和TypeScript等。
安装
首先，我们需要在本地安装graphql-codegen-add：
npm install --save-dev graphql-codegen-add
使用
下面我们将介绍如何使用graphql-codegen-add来生成GraphQL Query。
Step 1: 配置
我们需要配置一个GraphQL Codegen插件（plugin）。例如，在GraphQL CodeGen的配置文件中添加以下配置：
-- -------------------- ---- -------
--------
- ----
----------- -------------------------
-------- -
----- -------- -
----- -
--
----
-----
-
-在这个配置中，我们配置了一个插件“add”，它将生成一个查询“GetUsers”，查询用户时返回id、name和email字段。输出路径为./generated/query.graphql。
Step 2: 运行GraphQL Codegen
我们需要在终端中运行GraphQL Codegen。例如，我们可以运行以下命令：
npx graphql-codegen --config codegen.yml
请注意，这个命令将在codegen.yml文件中查找配置。
Step 3: 生成的GraphQL Query
在运行命令后，我们将在输出路径（./generated/query.graphql）中看到生成的GraphQL Query文件：
query GetUsers {
users {
id
name
email
}
}示例
假设我们已经定义了一些GraphQL Schema，例如用户、文章等等。下面，我们将使用graphql-codegen-add生成一些GraphQL Query，来获取用户信息和文章列表。
生成获取用户信息查询
首先，我们配置GraphQL Codegen插件：
-- -------------------- ---- -------
--------
- ----
----------- -------------------------------------
-------- -
----- ------------ ---- -
-------- ---- -
--
----
-----
-------- -
-----
-------
-
-
-这里，我们定义了一个名为“GetUser”的查询，该查询将按照ID查找用户信息。此外，我们还引用了用户关联的文章信息。
接下来，我们执行GraphQL Codegen命令：
npx graphql-codegen --config codegen.yml
最后，在我们的输出路径（./generated/queries/getUser.graphql）中，我们将看到如下的GraphQL Query文件：
-- -------------------- ---- -------
----- ------------ ---- -
-------- ---- -
--
----
-----
-------- -
-----
-------
-
-
-生成获取文章列表查询
接下来，我们将生成一个GraphQL Query，来获取文章列表。我们可以使用GraphQL Fragments，以便可重用查询的字段。（注意，我们假设有一个名为“ArticleFields”的Fragment，它定义了文章的一些字段。）
首先，我们配置GraphQL Codegen插件：
-- -------------------- ---- -------
--------
- ----
----------- -----------------------------------------
-------- -
----- ------------------- ---- ------- --- -
--------------- ------- ------ ------- -
----------------
-
-
----------------这里，我们定义了一个名为“GetArticles”的查询，并且我们引用了在Fragment中定义的“ArticleFields”。此外，我们还添加了一些参数，以便我们可以在查询时进行分页。
接下来，我们执行GraphQL Codegen命令：
npx graphql-codegen --config codegen.yml
最后，在我们的输出路径（./generated/queries/getArticles.graphql）中，我们将看到如下的GraphQL Query文件：
-- -------------------- ---- -------
----- ------------------- ---- ------- --- -
--------------- ------- ------ ------- -
----------------
-
-
-------- ------------- -- ------- -
-----
-------
------ -
--
----
-----
-
-总结
在本文中，我们介绍了如何使用graphql-codegen-add生成优雅的GraphQL Query。我们介绍了如何配置GraphQL Codegen插件，并且讲述了如何通过运行GraphQL Codegen命令来生成查询。最后，我们还提供了一些示例代码，帮助你在实际项目中使用graphql-codegen-add。通过这个npm包，我们可以更快捷和简单地生成GraphQL Query，以便更好地开发和维护GraphQL应用程式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad41b5cbfe1ea0610c28