前言
现代 Web 应用程序需要大量的 API 来支持其功能。 构建 API 的传统方法是使用基于 REST 的框架，如 Django，Rails 和 Flask。 尽管这些框架已经成为创造 Web API 的标准工具，但是最近的几年中，出现了一些新的技术和方法，这些技术和方法带来了前所未有的开发体验和性能提升。本文将介绍一种新的方法，使用 React 和 GraphQL 构建高效的 API。
什么是 GraphQL？
GraphQL 是一个开源的查询语言，它具有对于资源的单一入口以及缓存体系，同时具有优异的查询能力。GraphQL 的设计旨在减少前端和后端之间的通信量，增加前端开发人员的灵活性，同时提高 API 请求的响应速度。
相较于传统基于 REST 的 API 架构，GraphQL 完备地解决了 REST API 面临的一些问题。REST API 需要每个端点都指定他们所能提供（或接受）的数据格式。这意味着每个端点都有受限的数据格式，有时候会导致过度或者不够的数据交付，尤其在大型API中更加明显。
尽管 REST API 有利于代码复用，但是其基于资源的体系结构导致程序员在问题的处理过程中较为复杂。为处理如何获取一定的数据类型，他们需要记住许多 REST 路由。
与 GraphQL 相反，它为客户端请求提供单一入口。这意味着客户端可以指定所有要求的数据，而服务器可以全部返回，而不强制客户端进行额外的请求。这为客户端提供了许多便利，同时减少了与服务器的通信量，加速应用程序的加载和其他性能方面的优势。
为什么使用 React 和 GraphQL？
在使用 GraphQL 时，React 可以大大简化实现 GraphQL API 的过程。它强制实现组件化，并使用组件的方法来结构化前端代码，将负责数据呈现的实际表现和负责数据准备和操纵的功能逻辑分离。使用 React 的这种结构化方法与 GraphQL 的单一入口响应匹配互补，并且易于在客户端和服务器之间维护绑定。
React 使用许多基于组件的函数，建议程序员把 UI 的两个部分进行分开：
- 业务逻辑部分
- 显示部分
这与 GraphQL 查询语言设计的理念不谋而合。因为 GraphQL 允许查询以及在后端服务器上解析和转换数据，使前端开发人员完全专注于编写展现 UI 部分的代码，而不必考虑数据的来源和处理。
典型伺服器端实现
GraphQL 在后端服务器上的实现方法有很多，一个简单的解决方案是使用 Node.js 和 Express.js。下面我们可以看到一个角落案例代码，使用以下 npm 包：
- graphQL
- express-graphql
- express
------ ------- ---- ----------
------ ----------- ---- ------------------
------ ------ ---- -----------
----- --- - ----------
--------
-----------
-------------
-------
--------- ----
--
--
-----------------
-------------------- ------ ------- --- --------------------------------客户端实现
现在我们已经了解了如何使用 GraphQL 作为后端数据支持，那么如何使用 React 与 GraphQL 集成以获得最佳效果呢？一种方法是使用 Apollo Client 这个开源的 GraphQL 客户端。Apollo Client 与 React 协作，使用优秀的功能，如查询缓存、实时更新、服务端渲染和数据异步加载等，可帮助我们构建高效的现代 Web 应用程序。
在使用 Apollo Client 时，我们需要做的第一件事就是设置 Apollo 提供的 ApolloProvider 组件作为我们 React 应用程序的根组件。这样，我们的组件层级结构中任何需要数据的组件，都将直接从 Apollo 中接收到数据，无需进行繁琐的数据请求。
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- - ---- ---------------
------ ------ ---- -----------
------ --- ---- -------------------
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--GraphQL 查询
使用 Apollo Client，我们的查询将存储在一个单独的 .graphql 文件中，该文件可以以字符串形式导入，然后将其传递给查询组件。这个查询组件可以是内联或单独的一个组件，具体取决于你的实际需求和使用场景。查询组件最终将得到数据并将其逐层下传，从而在查询中呈现出来。
------ ----- ---- --------
------ - --- - ---- ---------------
------ - ----- - ---- ---------------
----- ---------- - ----
-
------ -
----
---
-
-
--
----- ------ - -- -- -
------ -------------------
--- -------- ------ ---- -- -- -
-- --------- ------ -------------------
-- ------- ------ -----------------
------ -
----
------------------------- ------ -- -
--- ------------
-------- -----------------
------- ----------------
-----
---
-----
--
--
--------
--结论
GraphQL 是一个新的 API 架构，具有许多传统基于 REST API 架构解决的问题。使用 GraphQL，并结合 React 和 Apollo Client，可简化前端和后端之间的通信，增加前端开发人员的灵活性，同时提高 API 请求的响应速度。在构建现代 Web 应用程序的过程中，使用 GraphQL 和 React 的组合非常值得一试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6704f9cad91dce0dc8511f06