传统的前后端分离方式是通过 RESTful API 进行数据交换的，这种方式存在一些不便之处。例如，服务器端的数据结构必须要和前端的需求一一对应，接口数量庞大，版本管理复杂等问题都会给开发和维护带来不小的困难。
GraphQL 是一种更现代化，更灵活的前后端分离方式。本文将介绍 GraphQL 的基本概念和优点，并提供实际的示例代码，帮助读者了解如何使用 GraphQL 进行前后端分离。
什么是 GraphQL
GraphQL 是一种由 Facebook 开发的 API 查询语言，它允许前端开发者通过定义数据结构的方式来获取服务器端的数据。GraphQL 定义了一个强类型的 Schema，而且 Schema 是可供前端界面查询的。
GraphQL 和 REST 的比较
REST 是目前使用最广泛的 API 设计方式之一，它的优点是易于理解和实现。然而，REST 设计方式的一个不足之处是服务器端数据结构必须要和前端界面需求一一对应，这样就需要开发者进行大量的 API 设计和维护。
GraphQL 的使用则优化了这一过程，提供了以下优点：
更少的网络请求数量：传统的 RESTful API 的响应结果通常是完整的资源对象，而 GraphQL 则可以通过单个请求获取指定的域或子域数据。通过 GraphQL，前端可以一次性获取多个资源对象，而不需要额外的网络请求，大大减少了网络通信的开销。
灵活的查询：GraphQL 的查询是由前端定义的，使前端完全自主地查询服务器数据。前端可以指定所需的数据的具体字段，甚至可以在一次查询中获取多个不同数据源的数据。这意味着后端可以自由地调整数据结构，而无需担心前端可能无法解析新的数据结构版本。
直接发挥数据：传统的 RESTful API 最大的限制是只能获得完整的资源对象。这样就通常导致了大量未使用或未采用的数据占据了传输带宽的一大部分。GraphQL 查询是直接相关的，可以保证最大限度的数据使用，减少了无用数据的传输。
实现 GraphQL
GraphQL 的实现分为客户端和服务器端两部分。
服务器端
服务器端的 GraphQL 实现经常使用 Node.js，我们需要安装 apollo-server-express 依赖。
npm install apollo-server-express graphql express
定义一个初始化 GraphQL 的脚本。
-- -------------------- ---- -------
----- ------- - ------------------
----- - ------------- --- - - --------------------------------
----- -------- - ----
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ -- -- ------ -------
-
--
----- ------ - --- --------------
---------
----------
---
----- --- - ----------
----- ---- - -----
------------------------ --- ---
------------ ---- -- -- --
--------------- ------ ----- -- -----------------------------------------------
--此代码在本地的 4000 端口上启动 GraphQL 服务器，您可以使用浏览器访问 http：// localhost：4000 / graphql 进行查询调试。
客户端
我们需要安装如下依赖：
npm install apollo-boost react-apollo graphql --save
使用 apollo-boost 和 react-apollo 来初始化 Apollo 客户端以获取数据。
-- -------------------- ---- -------
------ ------------ ---- ---------------
------ - -------------- - ---- ---------------
----- ------ - --- --------------
---- --------------------------------
---
-------
--------------- ----------------
---- --
-----------------
--在组件中进行 GraphQL 查询。
-- -------------------- ---- -------
------ --- ---- --------------
------ - ----- - ---- ---------------
----- --------- - ----
-
-----
-
--
----- ----- - -- -- -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -----
------ --------------------
--
--------
--在此示例中，使用了 Query 组件查询 GET_HELLO 中的数据。该组件将 loading、error 和 data 作为函数组件提供。函数组件返回组件 UI，以显示 hello 字段。
总结
GraphQL 提供了一种新的前后端分离方式，它可以让前端发送查询请求，而不是资源请求，以获取所需的数据，这样可以大幅减少后端服务器的负担，并提高前端开发的效率。这种新的架构方式更加灵活、高效、易于维护和扩展。因此，使用 GraphQL 作为前后端分离的 API 设计方式，对于团队的开发效率和产品的性能提升都是有好处的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645def6d968c7c53b004ac36