什么是 GraphQL？
GraphQL 是一种用于 API 的查询语言和运行时环境，它提供了一种更高效、强类型和简单的 API 设计方式，解决了 REST API 中存在的一些问题。GraphQL 的核心思想是“只获取需要的数据”，即由客户端定义数据的结构和内容，由服务器提供相应的数据。
与传统 REST API 不同的是，GraphQL API 通过单个请求获取多个资源，减少了 HTTP 请求次数，大大提高了效率。GraphQL 避免了传统 REST API 中的“过度获取”或“过少获取”的情况，使得前端可以更好地控制数据的获取，避免了无用的数据传输，节省了带宽和服务器资源。
使用 GraphQL 优化 API 设计的好处
数据获取更加灵活
GraphQL 允许前端在获取数据时指定需要的字段，在后端只返回指定的数据，避免了一些性能问题。例如，我们只需要获取某个用户的用户名和头像，而不需要获取他的所有信息和其它用户的信息，我们可以通过以下 GraphQL 查询语句实现：
query {
user(id: "123") {
username
avatar
}
}后端更加简单
通过定义 GraphQL Schema，后端只需要实现一组统一的数据获取方法，而不需要为每个前端端点编写不同的 API，简化了 API 设计和维护。在 GraphQL 中，Schema 定义了数据的结构和内容，可以为每个数据类型指定一组 Query 和 Mutation 操作，例如：
-- -------------------- ---- ------- ---- ---- - --- --- --------- ------- ------ ------- ------ -------- - ---- ---- - --- --- ------ ------- -------- ------- ------- ----- - ---- ----- - -------- ----- ----- -------- ----- ----- --------------- ----- -------- - ---- -------- - ----------------- -------- -------- -------- ------- ----- ----- -------------- ---- ------ -------- -------- --------- ----- -------------- ----- --- -
客户端和服务器开发更加协同
通过 GraphQL，前端和后端可以协同开发，同步测试和调试。GraphQL 提供了一个交互式的开发环境，可以查询 Schema 和 API，并提供建议和错误提示。
如何使用 GraphQL？
服务器端实现
目前，支持 GraphQL 的后端有很多，包括 Node.js、Java、Ruby、Python 等常用的编程语言。下面以 Node.js 为例介绍 GraphQL 的实现方式。
-- -------------------- ---- -------
-- -- ------- ----
----- - ------------------ -------------- ----------- ------------ ------------- - - -------------------
-- ------
----- -------- - --- -------------------
----- -------
------- -
--- - ----- ---------- --
----- - ----- ------------- --
---- - ----- ---------- --
--
---
-- ------
----- --------- - --- -------------------
----- --------
------- -
----- -
----- ---------
----- -
--- - ----- ---------- --
--
-------- -------- ----- -- -
-- ---------
------ ----------------
--
--
------ -
----- --- ----------------------
-------- -------- -- -
-- -----------
------ ---------------
--
--
--
---
-- -- ------
----- ------ - --- --------------- ------ --------- ---
-- -----
----- ------- - -------------------
----- ----------- - ---------------------------
----- --- - ----------
------------------- -------------
-------
--------- -----
----
-----------------客户端调用
在客户端中使用 GraphQL，可以使用官方提供的 Apollo Client （https://www.apollographql.com/docs/react/） 或其它第三方实现方式。在 React 中，可以使用 useQuery 和 useMutation 钩子进行查询和数据修改。
-- -------------------- ---- -------
------ - ---- --------- ----------- - ---- -----------------
----- -------- - ----
----- ------------ ----- -
-------- ---- -
----
---
-
-
--
----- ----------- - ----
-------- --------------- ----- ------ -------- ----- ----- -
-------------- ---- ----- ------ ---- ----- -
----
---
-
-
--
-------- ------------ ------ -- -
----- - -------- ------ ---- - - ------------------ - ---------- - -- - ---
----- ------------ - -------------------------
-- --------- ------ ------------------
-- ------- ------ -------- ------
----- - ----- --- - - ----------
----- ------------ - --- -- -
-------------------
----- ---- - --------------------
----- --- - -------------------
------------ ---------- - --- ----- --- - ---
--
------ -
----- ------------------------
-----------------
-------
----
------ ------------- ---------- ------------------ --
--------
------ ------------- -------------- --
-------
--
-总结
GraphQL 通过提供一种更高效、强类型和简单的 API 设计方式，解决了 REST API 中存在的一些问题，优化了客户端和服务器之间的通信方式。通过实现 Schema 和 Query 和 Mutation 对象，可以为每个数据类型指定一组操作，简化了后端的接口设计和维护，提高了效率。GraphQL 还提供了一个交互式的开发环境，为前端和后端协同开发提供了支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644fdb49980a9b385b91dd97