随着前端技术的不断发展，前端开发变得越来越复杂。RESTful API 看似是一个优秀的设计方案，但是随着业务需求不断增加，API 的数量不断增长，同样也带来了许多问题。尤其是当一个界面需要的数据变得越来越多时，就会造成多次请求的问题，导致应用程序性能下降。GraphQL 是一种在 RESTful API 的基础上进行了改进的新技术，可以帮助你解决这些问题。
GraphQL 是什么？
GraphQL 是一种由 Facebook 开发的查询语言和运行时环境，它允许客户端来定义自己需要的数据，并返回这些数据。它使用强类型系统来定义查询请求和响应数据，并提供了一个运行时环境来执行这些查询。
GraphQL 具有以下几点优点：
- 客户端可以自定义请求的数据。它具有更高的灵活性和查询准确性。
- 减少网络开销，因为客户端可以一次请求数据而不是多次请求数据。
- 更容易协作，因为前端开发人员可以根据应用程序的需要来定义数据请求。
- 允许数据类型检查，可以在编译阶段发现错误。
使用 GraphQL 代替 RESTful API
使用 GraphQL 作为 RESTful API 的替代方案的主要原因是 GraphQL 可以更好地满足前端开发需要的所有请求数据。RESTful API 的每个端点通常都只返回一个预定义的数据结构，而 GraphQL 可以在客户端确定所需数据后，返回一个包含所有需要的数据的 JSON 对象。
GraphQL 提供了一种可以让客户端请求所需数据的方式。这对于前端开发人员来说非常有用，因为他们可以自定义数据，而不必在服务器端进行协商。我们来看一些使用 GraphQL 的优点。
减少请求次数
使用 RESTful API 时，需要在不同的端点上获取所有的数据。这可能需要执行多个请求，从而降低应用程序的性能。使用 GraphQL，客户端可以维护一个请求，用 GraphQL 请求所有需要的数据。这样就可以实现减少请求次数，提高应用程序性能。
定义自己的数据
RESTful API 只能通过预定义的端点进行请求，这可能会导致数据重复返回或无法满足不同前端的需求。GraphQL 允许客户端定义自己的查询，从而只返回它们需要的数据。客户端可以根据需要请求所有字段，并排除不需要的字段。
解决传统方案中的限制
RESTful API 是一种简单但功能有限的 API，GraphQL 可以更好地满足业务需求。使用 GraphQL，客户端可以请求需要的嵌套对象，从而减少额外查询数据库的需要。同时，GraphQL 还支持可选参数和可选查询。
GraphQL 示例
下面使用 Node.js 和 GraphQL 实现一个简单的例子。
首先安装所需的 packages：
npm install express graphql express-graphql
创建 server.js 文件，并添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - ---------------------------
----- - ------------------ -------------- ------------- - - -------------------
-- ----
----- ----- - -
- --- ---- ----- ------ --
- --- ---- ----- ----- --
- --- ---- ----- ------ --
--
-- ----
----- -------- - --- -------------------
----- -------
------- -
--- - ----- ------------- --
----- - ----- ------------- --
--
---
-- ----
----- --------- - --- -------------------
----- --------
------- -
----- -
----- ---------
----- -
--- - ----- ------------- --
--
--------------- ----- -
------ --------------- -- ------- --- ---------
--
--
--
---
-- ------- ------
----- ------ - --- ---------------
------ ----------
---
-- ------- ---
----- --- - ----------
------------------- -------------
-------
--------- ----- -- -- -------- --
----
---------------- -- -- -------------------- ------- ------ -- ---------------------------------打开 http://localhost:4000/graphql，即可在 GraphQL 的 GraphiQL UI 页面中发起查询。尝试输入以下代码，看看能否得到正确结果：
{
user(id: "2") {
name
}
}此时，应该会看到以下结果：
{
"data": {
"user": {
"name": "Ben"
}
}
}在本例中，只有一个类型的单个查询。但是，使用 GraphQL 更多功能的复杂查询可以被定义，并根据需要执行。
结论
GraphQL 是一种在 RESTful API 的基础上进行了改进的新技术，使用它可以帮助你解决前端开发中的许多问题。GraphQL 允许客户端定义自己的查询，并且只返回它们需要的数据。通过使用 GraphQL，可以实现减少请求次数，提高应用程序性能。同时，GraphQL 还支持可选参数和可选查询，并且可以更好地满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670200fff59b73a932a4c10c