GraphQL 被越来越多的前端工程师所关注，因为它能够帮助我们高效地进行后端数据查询。而 npm 包 query-builder-graphql 就是一个优秀的 GraphQL 查询工具，可以帮助我们在前端快速生成 GraphQL 查询语句，提升前端开发效率。本文将详细地介绍 query-builder-graphql 的使用方法和注意事项。
安装
首先，我们需要安装 query-builder-graphql。在终端输入以下命令：
npm install query-builder-graphql --save
使用
安装完成后，我们可以直接在 JavaScript 中导入 query-builder-graphql：
import QueryBuilder from 'query-builder-graphql';
基本查询
在进行第一次查询之前，我们需要创建 QueryBuilder 的实例：
const qb = new QueryBuilder({
queryName: 'exampleQuery'
});在这里，我们传递了一个参数 {queryName: 'exampleQuery'}，它表示我们将要发送一条查询名为 "exampleQuery" 的 GraphQL 语句。接着，我们可以调用 qb.query() 方法生成查询语句：
const graphqlQuery = qb.query({
fields: ['id', 'name'],
type: 'users',
limit: 10
});
console.log(graphqlQuery);这里，我们指定了查询 users 类型的数据，限制了查询结果最多只显示 10 条，且只显示 id 和 name 两个字段。在查询完毕后，graphqlQuery 将生成如下的 GraphQL 语句：
query exampleQuery {
users(limit: 10) {
id
name
}
}重命名字段
当然，我们并不总是需要查询所有字段。query-builder-graphql 已经考虑到了这点，它可以通过 as 属性帮助我们重命名字段：
-- -------------------- ---- -------
----- ------------ - ----------
------- -
-----
------ ----------- --- -------
--
----- --------
------ --
---
--------------------------这里，我们把用户的 name 字段重命名为 fullName，GraphQL 语句将输出如下结果：
query exampleQuery {
users(limit: 10) {
id
fullName: name
}
}包含查询
query-builder-graphql 还支持包含查询（nested fields）。比如，我们现在需要查询用户的所有文章，可以这样做：
-- -------------------- ---- -------
----- ------------ - ----------
------- -
-----
-
----- -----------
------- -
--------
------ --------- ------- ------ ------------
-
-
--
----- --------
------ --
---
--------------------------这里，我们向 fields 属性中添加了一个名为 articles 的字段。articles 包含一个名为 writer 的子查询，该子查询包含了 "id" 和 "username" 两个字段。GraphQL 语句将输出如下结果：
-- -------------------- ---- -------
----- ------------ -
------------ --- -
--
-------- -
-----
------ -
--
--------
-
-
-
-过滤数据
query-builder-graphql 还支持过滤查询。比如，我们现在需要查询名字中包含 "j" 的用户，可以写成如下语句：
-- -------------------- ---- -------
----- ------------ - ----------
------- -
-----
------
--
----- --------
------- -
----- ------ ------
-
---
--------------------------这里，我们在 filter 属性中指定了名字中包含 "j" 的条件。GraphQL 语句将输出如下结果：
query exampleQuery {
users(filter: {name: {like: "%j%"}}) {
id
name
}
}排序数据
最后，query-builder-graphql 还支持对查询结果进行排序。比如，我们可以查询前 10 名用户，并按照年龄降序排列：
-- -------------------- ---- -------
----- ------------ - ----------
------- -
-----
-------
-----
--
----- --------
------ ---
----- -------- ------ ------ --------
---
--------------------------GraphQL 语句将输出如下结果：
query exampleQuery {
users(limit: 10, sort: [{field: "age", order: "desc"}]) {
id
name
age
}
}总结
query-builder-graphql 是一个优秀的 GraphQL 查询工具，它可以帮助前端工程师快速生成 GraphQL 查询语句，进而提高前端开发效率。通过本文的介绍，我们已经可以基本地使用 query-builder-graphql 对 GraphQL 数据进行查询、重命名、包含、过滤和排序等。同时，query-builder-graphql 的 API 形式也给予我们更大的扩展空间，在实际项目中应用它一定是一种明智的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c581e8991b448e8e6e