在 Web 应用程序中，API（Application Programming Interface）是不可或缺的。当我们需要使用 API 进行前后端数据交互时，REST 和 GraphQL 是两种广为人知的 API 设计架构。
REST（Representational State Transfer，表现层状态转移）基于 HTTP 协议，核心思想是将资源和资源的操作映射为特定的 URL 和请求方法。REST 架构风格简单明了，但是随着业务逻辑复杂度的提升，REST 设计的 API 开发和维护的难度也随之增加。
GraphQL 是一种基于强类型的查询语言和运行时系统的 API 设计架构，由 Facebook 开源。GraphQL 支持客户端按需获取数据，可以让前端开发者灵活地请求需要的数据，一次返回完整的查询结果，避免了 REST API 的过度获取数据和请求的问题。
本文将从 REST 到 GraphQL，介绍什么是 GraphQL，如何使用 GraphQL 构建 API，以及 GraphQL 的优点和劣势，以及功能上对比 REST API。
什么是 GraphQL
GraphQL 是一种基于强类型的查询语言和运行时执行的 API 设计架构。GraphQL 最初是由 Facebook 发布的，它将客户端的数据需求映射到后端服务所提供的数据模型之上。
GraphQL 架构的核心理念就是通过定义一个明确的接口架构来实现前端和后端的数据沟通。GraphQL 可以在一个请求中检索并返回多个资源，这种方式可以极大地减少请求的数量，提高应用程序的性能。
GraphQL 查询是由字段和类型组成的层次结构。在客户端提出查询时，由 GraphQL 发出相应的请求，并将请求发送到后端服务器，以获取数据。服务器从一些数据库、服务或第三方 API 中收集数据，对它们进行组合处理，并返回相应的查询结果。
与 REST 相比，GraphQL 带来了一些重大的变化。GraphQL API 与 REST API 相比有更好的可调整性，更好的可扩展性和更高的性能。
如何使用 GraphQL 构建 API
下面是使用 GraphQL 构建 API 的大致流程：
第一步：定义 schema
首先，你需要定义一个 schema，它是 GraphQL API 的核心。在 GraphQL 中，schema 是一个枚举对象，它定义了 API 中可用的所有类型和操作。
-- -------------------- ---- ------- ---- ----- - ------ -------- -------- ---------- - ---- ---- - ------ ------- ------- ------- ----- ---- - ---- ------ - ----- ------- ------ -------- -
这个例子定义了一个查询 Book 和 Author 的 API。它有一个根查询类型 Query，返回一个 Book 类型和一个 Author 类型的数组。注意该 schema 中每个类型的字段以及每个字段的类型是如何描述的。
第二步：构建解析器
GraphQL 中有许多解析器模块可以使用，但是解析器应该与您的后端数据源一一对应。它应该接收前端查询并将其翻译为所需的语言，然后将响应返回给前端应用程序。
-- -------------------- ---- -------
----- --------- - -
------ -
------ -- -- ---------------
-------- -- -- ----------------
--
----- -
------- -------- -- ------------------
--
------- -
------ -------- -- -----------------
-
--这个例子中，我们使用 Sequelize.js 构建了一个解析器，并且我们通过定义解析器中的函数来连接数据源，并响应前端请求。
第三步：连接到前端应用程序
连接到前端应用程序的过程取决于所使用的库和框架。对于 React 应用程序，通常使用 Apollo Client。
-- -------------------- ---- -------
----- ------ - --- --------------
---- ----------
---
----- --- - -- -- -
--------------- ----------------
-----
------ ------- ---------
------------ --
------
-----------------
--在这个例子中，Apollo Client 将请求发送到 /graphql 端点。Apollo Client 会自动将前端发送的请求翻译成图形语言查询，然后将查询发送到后端服务器。
第四步：从后端数据源获取数据
一旦前端应用程序连接到后端 API，你就可以开始从你的数据源中获取数据了。GraphQL 查询由字段和类型组成的层次结构，可以使用查询分页（pagination）、避免不必要的复杂性，并获得一些其他的好处。
我们可以使用以下查询来获取图书列表：
query {
books {
title
author
year
}
}该查询使用可选的参数，例如查询的书籍的数量（limit）和要跳过的图书数量（offset）。
如果我们需要获取作者还写了哪些书，可以使用以下查询：
-- -------------------- ---- -------
----- -
----- -
-----
------ -
----
----- -
-----
-
-
----
-
-这个查询将作者和标题的详细信息一起检索出来，并将作者和每个作者写过的书籍包含在内。这个查询是嵌套的，这就是 GraphQL 的一个强大之处。
GraphQL 的优点和劣势
优点
灵活的查询
GraphQL 的一个主要好处是，它可以通过一个请求按需获取多个资源。客户端可以明确地声明需要哪些数据，而服务器仅检索客户端要求的数据，这可以减少网络流量并加快请求的速度。
明确的架构
GraphQL 的架构非常明确，并具有对于前端开发者而言易于理解的文档。GraphiQL 工具可以用来自动生成文档，以及使用快速提示窗口，让开发者可以更加轻松地查询所需的数据。
客户端与服务器的松散耦合
GraphQL 的一个重要的好处是它可以让客户端与服务器之间具有松散的耦合。它可以*整合所有 API 端点，使添加、删除或更新一个端点相对简单和成本低廉。
劣势
学习成本
相比于 REST，GraphQL 可能需要更大的学习成本。它需要前端开发者更深入地了解查询语言、架构和 API 设计。
动态类型系统
GraphQL 的类型系统是动态的，这意味着在运行时会检查请求的类型花费更多的运行时开销。对于大量数据的应用程序，这可能会导致性能问题。
缺乏官方规范
GraphQL 缺乏与 REST 相同的官方规范。虽然 GraphQL 规范定义了核心架构和查询语言，但是它没有提供针对具体编程语言的标准。
功能上对比 REST API
尽管 REST API 一直被认为是 Web 应用程序中的标准 API 架构，但是 GraphQL 为前端开发者提供了一些优势：
数据和代码的完整性
因为 GraphQL 使用代码来强制类型检查，所以在请求和响应的数据传递过程中，会自动检测数据类型和值范围。这种方式可以在服务器和客户端之间减少对数据验证的需要。
数据为空的情况
在许多 RESTful API 中，当大量数据为空时，API 仍然返回 HTTP 状态码，并能影响页面的加载速度。相反，在 GraphQL 中，由于在执行查询时，返回结果的字段是直接映射到查询结果上的，因此可以轻松地旋转数据并仅返回确实的数据。
请求和响应
在 RESTful API 中，每个端点通常都是独立的，并返回特定资源的预定义区域。相反，GraphQL 的查询可以在一个请求中获取多个资源，使请求和响应的效率更高。
结论
虽然 GraphQL 并非 HTTP API 框架，但它是基于 HTTP 协议的方法之一。和 REST API 相比，GraphQL 抽象了客户端和服务器之间的流程，为前端开发者提供了更多的灵活性、控制和性能。
GraphQL 毕竟是一个相对较新的技术，虽然有许多的好处，但也有一些不足，需要前端开发者了解它的优点和劣势后再做出选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676fe502e9a7045d0d77df94