简介
GraphQL 作为一种数据查询语言和运行时，已经被越来越多的开发者采用于前端应用程序和后端服务之间的交互。与传统的 RESTful API 相比，GraphQL 明显具有更高的灵活性和可定制性，对于复杂的前端应用程序开发来说显得更加适合。
GraphQL 具有深度的查询能力，可以方便地获取关联的数据集合，进而简化客户端代码，减少请求次数。但是在实际应用中，我们经常会遇到需要对数据集合进行细粒度的范围过滤的需求，这就需要在 GraphQL 中实现一定的过滤机制。
本文将介绍如何在 GraphQL 中实现数据的范围过滤，包括检索语句的修改以及后端服务的修改。
实现方案
GraphQL 本身不提供特别强力的数据过滤机制，它提供的是向后端服务请求特定的数据模型的能力。但是，GraphQL 中通过改变查询语句的方式，可以实现数据的范围过滤。一般情况下，这涉及到两个基本的查询参数 first 和 skip，以及更高级的过滤参数 where。
first 和 skip 参数
首先，我们可以使用 first 和 skip 参数来分页实现数据的范围过滤。first 参数用于限定返回结果的数量，而 skip 参数用于跳转到数据集合的某个位置开始取得数据。在 GraphQL 中，这两个参数是很常用的，下面给出一个示例代码：
query {
employees(first: 10, skip: 0) {
id
name
age
}
}这个查询语句的结果是返回前 10 个员工的 id、name 和 age。
where 参数
更高级的方式是使用 where 参数过滤数据，这需要在后端服务中实现。在实现 where 参数之前，我们需要定义一个输入类型，并在后端查询语句中使用它。
-- -------------------- ---- ------- ----- ------------------ - -------------- ------ ------- --- - ---- -------- - --- --- ----- ------- ---- ---- ------- ---- - ---- ----- - ---------------- -------------------- ------------ -
在上面的代码中，我们通过 EmployeeWhereInput 定义了一个输入类型，它带有两个过滤参数 name_contains 和 age_gt，分别用于模糊搜索员工名称以及获取年龄大于指定值的员工。
接下来，在后端实现查询语句时，我们可以通过输入的 where 参数为查询增加过滤条件。示例代码如下：
query {
employees(where: {name_contains: "Tom", age_gt: 30}) {
id
name
age
salary
}
}这个查询语句的结果是返回名字包含 "Tom" 并且年龄大于 30 的所有员工的 id、名字、年龄和薪水。
案例分析
下面我们来考虑一个更具实际意义的案例，以此来更好地理解在 GraphQL 中实现数据的范围过滤。
假设有以下的数据结构：
-- -------------------- ---- ------- ---- ------ - --- --- ----- ------- ---- ---- ------ -------- - ---- ---- - --- --- ------ ------- ------------ ------- -------------- ------- ------- ------- - ---- ----- - ------ -------- -
我们希望可以给出一些比较实用的查询条件，例如：
- 获取最新的 10 本书
- 获取作者年龄小于 30 岁的书籍
- 获取特定作者的所有书籍
在实现上述查询条件的过程中，我们可以使用上述的两种方式，这里我们主要考虑 where 参数的方式。
在 where 参数中，我们可以定义很多具体的过滤条件，例如字符串匹配、数字大小比较、以及逻辑运算等。改进后的查询接口如下：
-- -------------------- ---- ------- ----- -------------- - ------- -- --------------- ------ --------------------- ------ ----------------- ------ - ---- ------ - --- --- ----- ------- ---- ---- ------------ ---------------- -------- - ---- ---- - --- --- ------ ------- ------------ ------- -------------- ------- ------- ------- - ---- ----- - ------------ ---------------- -------- -
有了 where 参数，我们就可以轻松地实现上述查询条件，示例代码如下：
- 获取最新的 10 本书
-- -------------------- ---- -------
----- -
------------ --- -------- ------------------- -
--
-----
-----------
-------------
------ -
--
----
-
-
-- 获取作者年龄小于 30 岁的书籍
-- -------------------- ---- -------
----- -
------------ -------- ---- -------------- ---- -
--
-----
-----------
-------------
------ -
--
----
-
-
-- 获取特定作者的所有书籍
-- -------------------- ---- -------
----- -
------------- ---- ----- -
--
----
----- -
--
-----
-----------
-------------
-
-
-结论
通过本文的介绍，我们了解了如何在 GraphQL 中实现数据的范围过滤。本文介绍了 first 和 skip 两个参数的用途，还介绍了 where 参数的应用，在具体的案例分析中也很好地应用了 where 参数。这些方法可以优化前端应用的数据获取流程，提高应用的性能和用户体验。同时，本文也指出了 where 参数的实现需要在后端服务中实现，而且还需要定义输入类型和解析函数，这也同样需要我们花费一定的时间和精力来进行开发和调试。
希望本文可以对正在学习 GraphQL 的前端开发者提供一些有用的指导和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbc868447136260162cc35