在传统的 RESTful API 中，我们通常是按照路由的方式去请求数据，在大型前端应用中，常常会出现请求路径混乱，接口版本频繁更新的问题。为了解决这些问题，谷歌出品的 GraphQL 技术，逐渐流行起来。
GraphQL 是基于 Facebook 内部使用生成的一种 API 设计语言，它不是数据存储方案，而是一种用于客户端和服务器端通信的技术方案，它定义了查询语言和一个规范的运行时。
在本文中，我们将会讲解如何通过 GraphQL 技术来实现一个数据地图，在此过程中，我们也将会提及 GraphQL 的一些精妙之处。
为什么选择 GraphQL？
GraphQL 与传统的 RESTful API 相比，有以下几个优点：
快速迭代：GraphQL 可以让客户端根据需要获取所需数据的指定部分，而不是整个数据集，这样可以保持客户端和服务器端协调一致，不会浪费时间和带宽来传输不必要的数据。
数据精准：GraphQL 使用直观易懂的数据模型来描述数据，可以让客户端更灵活地去请求数据详情。
类型检测：GraphQL 有一个精简的类型化系统，可以让客户端和服务器端按照同样的类别来访问数据，避免了繁琐的类型转换。
可伸缩性：GraphQL 基于一个标准的协议，可以让你集中你的系统和服务，减少同步和浏览器污染。
GraphQL 的基础概念
Schema
GraphQL 架构的核心是 schema。schema 描述了数据模型，定义了查询操作。schema 是一个声明式的模型，它定义了数据模型中的类型以及类型之间的关系。模式还定义了可在 API 中执行的查询、变更和订阅操作。
Resolver
Resolver 是注入了相应的数据源的函数。GraphQL 中的断言处理程序是一个函数，它接收用户定义的 GraphQL 查询，并从服务器的数据储存/源中检索数据。
GraphQL 请求
GraphQL 请求可以包含查询和变更操作，查询用于从 API 请求数据，而变更操作用于向 API 发送数据更改请求。
GraphQL 查询
GraphQL 查询由以下几个部分组成：
- 查询字段
- 参数
- 返回值
例如，对于一个简单的查询：
query {
book(id: 123) {
title
author {
name
}
}
}这个查询涉及到 book 和 author 列表的数据，这些数据通过 GraphQL API 的查询操作返回。
实现基于 GraphQL 的数据地图
现在让我们来看一下如何实现基于 GraphQL 的数据地图。首先，我们需要对数据进行建模。
假设我们的数据是这样看待的：
- 国家
- 州
- 区域
- 县
我们可以利用 GraphQL 的 schema 来定义这些数据，这是我们的基础 schema：
-- -------------------- ---- ------- ---- ------- - --- --- ----- ------- ------- --------- - ---- ----- - --- --- ----- ------- -------- ---------- - ---- ------ - --- --- ----- ------- --------- ---------- - ---- ------ - --- --- ----- ------- ----------- ---- -
要查询一个国家的数据，我们可以这样编写查询：
-- -------------------- ---- -------
----- -
--------- -
--
----
------ -
--
----
------- -
--
----
-
-
-
-这个查询操作将会返回我们定义的国家 schema，包括国家 ID、名称、州的 ID 和名称、区域的 ID 和名称。
接下来，我们定义一些 resolver 来处理这些数据，例如一个查询国家数据的 resolver：
-- -------------------- ---- -------
----- --------- - -
------ -
---------- -------- ----- -------- ----- -- -
-- -- --------- --------------
------ -----------------------
--
--
-------- -
------- -------- ----- -------- ----- -- -
------ -------------------
------ - ---------- --------- --
---
--
--
------ -
-------- -------- ----- -------- ----- -- -
------ --------------------
------ - -------- --------- --
---
--
--
------- -
--------- -------- ----- -------- ----- -- -
------ ---------------------
------ - --------- --------- --
---
--
--
-这段代码定义了数据库db中的查询和数据提取操作，其中 states 查询了某个国家下所有的州，regions 查询了某个州下所有的区域，counties 查询了某个区域下所有的县。
最后的步骤是将 these 基础信息添加到我们的常规 GraphQLServer 中，我们将使用 apollo-server 作为一个示例产品：
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
console.log(`Server running at ${url}`);
});完整的代码如下：
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- -------- - ----
---- ------- -
--- ---
----- -------
------- ---------
-
---- ----- -
--- ---
----- -------
-------- ----------
-
---- ------ -
--- ---
----- -------
--------- ----------
-
---- ------ -
--- ---
----- -------
----------- ----
-
---- ----- -
---------- -----------
-
--
----- -- - -
---------- -
- --- ---- ----- ----- --
- --- ---- ----- ---- --
- --- ---- ----- ------- --
--
------- -
- --- ---- ----- ------------- ---------- --- --
- --- ---- ----- -------- ---------- --- --
- --- ---- ----- --------- ---------- --- --
- --- ---- ----- ------------- ---------- --- --
- --- ---- ----- --------- ---------- --- --
- --- ---- ----- ------ ---------- --- --
--
-------- -
- --- ---- ----- ---- --------- -------- --- --
- --- ---- ----- ---- ----------- -------- --- --
- --- ---- ----- --------- -------- --- --
- --- ---- ----- ---------- -------- --- --
- --- ---- ----- -------- -------- -------- --- --
- --- ---- ----- -------- -------- -------- --- --
- --- ---- ----- ----- -------- -------- --- --
--
--------- -
- --- ---- ----- ----- --------- ---- ----------- ------ --
- --- ---- ----- ------------ --------- ---- ----------- ------ --
- --- ---- ----- ------- -------- --------- ---- ----------- ----- --
- --- ---- ----- ------- -------- --------- ---- ----------- ----- --
--
--
----- --------- - -
------ -
---------- -------- ----- -------- ----- -- -
------ -------------
--
--
-------- -
------- -------- ----- -------- ----- -- -
------ ------------------------ -- --------------- -- -----------
--
--
------ -
-------- -------- ----- -------- ----- -- -
------ -------------------------- -- -------------- -- -----------
--
--
------- -
--------- -------- ----- -------- ----- -- -
------ --------------------------- -- --------------- -- -----------
--
--
--
----- ------ - --- -------------- --------- --------- ---
----------------------- --- -- -- -
------------------- ------- -- ---------
---结论
GraphQL 是一个灵活的工具，它使我们可以快速地开发基于数据模型的 API，而不是它们的完整的实现。GraphQL 的 schema 和 resolver 确保了我们能够快速迭代和改变我们的 API 接口，而不用担心它们的完整性。
通过上述例子的亲身实践，相信对于初学者来说，可以在实践中更进一步的了解和学习 GraphQL 开发技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6776260d6d66e0f9aa0ab934