GraphQL 是一种由 Facebook 开发的现代 API 技术，适用于构建可扩展且可维护的 Web 应用程序。 GraphQL 相比传统的 RESTful API 具有更好的灵活性和可定制性，同时还大大减少了网络传输信息的冗余量，提高了数据请求的效率。而作为前端工程师，我们在访问后端 API 接口时，如果能够更简洁、更利用的轻松操作 RESTful API，将会非常有效和方便。
本文将介绍如何使用 GraphQL 来透明地访问 RESTful API，其中包含详细的示例代码和指导意义。
RESTful API 与 GraphQL
在了解如何使用 GraphQL 透明地访问 RESTful API 之前，我们需要先了解 RESTful API 和 GraphQL 之间的差异。
RESTful API 背后的理念是将后端数据的资源映射到 URL 上，通过 HTTP 方法（例如 GET、POST、PUT 和 DELETE 等）来定义对这些资源的操作。因此，RESTful API 将每个资源作为一个单独的 URL，并指定操作该资源的 HTTP 方法。
GraphQL 则是一种 API 查询语言，它提供了一种定义 API 数据结构的方式。与 RESTful API 不同，GraphQL 不是基于 URL 而是基于类型（type）。GraphQL 提供了一组与服务器端流程分离的类型，从而更容易地设计和维护 Web 应用程序。 GraphQL 的每个查询都被认为是单个请求，可以定义查询和数据的粒度。
然而，使用 GraphQL 的优势不仅仅在数据查询的粒度和可定制性上，同时在最小化数据请求时间等方面。我们可以只在单个 API 调用中检索所需的所有数据，而不是多个 API 调用，从而减少网络请求和服务器的负担，并提高了性能。
利用 GraphQL 透明地访问 RESTful API
由于 GraphQL 和 RESTful API 使用不同的数据结构，因此，原则上不可能直接从 GraphQL 客户端直接访问 RESTful API。不过，我们可以利用现有的 RESTful API，通过将其映射到 GraphQL 类型和查询中来实现 GraphQL 与 RESTful API 的集成。
对于使用 GraphQL 客户端来访问 RESTful API，我们需要执行以下几个步骤：
1. 定义 GraphQL 类型
通过定义 GraphQL 类型来将 RESTful API 地址和其返回的数据结构映射到 GraphQL API。
例如：
type Article {
id: ID!,
title: String!,
content: String!,
created_at: Date!
}这个 GraphQL 类型定义了一篇文章的属性集合，而 ID 和 Date 则是自定义的 scalar 类型。
2. 定义 GraphQL 查询
我们可以通过编写查询来指示 GraphQL 客户端从 RESTful API 加载数据并将其塑造成所需的 GraphQL 类型。
例如：
type Query {
article(id: ID!): Article
}这个 GraphQL 查询可以接受 ID 参数，并返回 Article 类型的单个文献记录。查询的实现可以使用 Apollo client 这样的第三方包来使用 RESTful API 加载数据，并将数据转换成 Article 类型的 GraphQL 对象。
3. 地图 GraphQL 操作到 RESTful API 端点
在执行 GraphQL 查询时，我们需要将 GraphQL 操作映射到 RESTful API 端点上。我们可以使用一些第三方库，例如 graphql-rest-binding 或 graphql-yoga，来自动生成 GraphQL 查询与 RESTful API 端点操作之间的映射。
4. 运行查询
最后，我们只需要在客户端向服务器提交 GraphQL 查询，然后由服务器将其映射到相应的 RESTful API 操作上。
例如：
-- -------------------- ---- -------
----- ----- - ----
----- -
----------- ------ -
--
-----
-------
----------
-
-
-在这个 GraphQL 查询中，我们从 RESTful API 中检索了一篇文章，通过id 来.unique 识别为 123，结果是一篇 Article 类型。
示例代码
下面是一个示例代码，在其中，我们使用 Node.js、Express、GraphQL 客户端和 RESTful API 接口来演示如何使用 GraphQL 透明地访问 RESTful API。
假设我们有一个 RESTful API 接口，提供文章数据，包括文章 ID、标题、内容和创建日期。接口使用下面的数据模型：
-- -------------------- ---- -------
----- -------- - -
-
--- --
------ -------- -----
-------- ----- -- --- ------- -- ------- ------
----------- --- ----------------------------
--
-
--- --
------ -------- -----
-------- ----- -- --- ------- -- ------- ------
----------- --- ----------------------------
--
-
--- --
------ -------- -------
-------- ----- -- --- ------- -- ------- --------
----------- --- ----------------------------
-
-我们将创建一个 GraphQL 服务来访问这个 RESTful API，并定义一个 GraphQL 查询来获取单个文章的详细信息。为此，我们需要遵循上述四个步骤。
步骤 1：定义 GraphQL 类型
我们从定义一个 GraphQL 类型来开始。在这种情况下，我们将定义一个名为“Article”的类型，该类型包含文章的所有属性。
-- -------------------- ---- -------
----- - --- - - ---------------------------------
----- -------- - ----
------ ----
---- ------- -
--- ---
------ -------
-------- -------
----------- -----
-
---- ----- -
----------- ----- -------
-
--
-------------- - ---------这里我们定义了 Date 标量类型和 Article 类型，以及该类型的查询方法 article()。
步骤 2：定义 GraphQL 查询
下一步是定义 article() 方法。该方法将接受一个ID参数，并从 RESTful API 接口中检索带有相同 ID 的文章对象。
-- -------------------- ---- -------
----- - -------------- - - ----------------------------------
----- ---------- ------- -------------- -
------------- -
--------
------------ - ----------------------------------
-
----- ------------------ -
------ -------------
-
-
----- --------- - -
------ -
-------- ----- --- - -- -- - ----------- -- -- -
------ ------------------------------------------
--
--
--在这里，我们使用 apollo-datasource-rest 来自动生成处理 RESTful API 请求的代码。同时，我们定义了 GraphQL 的 article() 方法，并在其中使用 articleAPI.getArticleById(id) 来检索具有指定 ID 的文章记录。
步骤 3：映射 GraphQL 操作到 RESTful API 端点
接下来，我们需要将 article() 方法映射到 RESTful API 接口。我们可以在 app.js 中使用 graphql-yoga 来实现这一点：
-- -------------------- ---- -------
----- - ------------ - - ---------------------------------
----- -------- - --------------------
----- --------- - -----------------------
----- ---------- - ------------------------------------
----- ------- - -------------------
----- --- - ----------
----- ------ - --- --------------
---------
----------
------------ -- -- --
----------- --- -------------
---
---
------------------------ --- ---
------------ ----- ---- -- -- --
--------------- ------ ----- -- ---------------------------------------------
--在这里，我们导入定义好的 schema，resolvers 和 ArticleAPI 类。 graphql-yoga 会调用 ArticleAPI 类中所有与 RESTful API 相关的方法。 server.applyMiddleware({ app }) 会将映射的 GraphQL 操作应用到 RESTful API 接口。
步骤 4：运行 GraphQL 查询
现在，GraphQL 服务器配置已经准备好了，我们可以使用 GraphQL 客户端来提交查询。在该客户端中，我们将通过 graphql-tag 包来编写查询：
-- -------------------- ---- -------
----- - ------------- -------------- --- - - --------------------------
----- ------ - --- --------------
---- --------------------------------
------ --- ----------------
---
----- ----- - ----
----- -
----------- ---- -
--
-----
-------
----------
-
-
--
------
-------- ----- --
------------ -- --------------------
------------ -- ----------------------
-这个查询会尝试检索 ID 为 1 的文章，它将通过 GraphQL 客户端传递到后端服务器。服务器将查询映射到 RESTful API 接口，并返回结果。
学习意义
本文介绍了如何使用 GraphQL 来透明地访问 RESTful API，使得我们可以从 GraphQL 客户端更简单地访问 RESTful API。通过 GraphQL，我们可以将 RESTful API 中的资源映射成为类型，并通过定义查询来访问这些资源。这样可以提高性能和可维护性，并且使代码更具可读性。
总结
GraphQL 客户端应用程序可以使用 RESTful API 接口来获取数据。通过将 RESTful API 映射到 GraphQL 的类型和查询中，我们可以将这些 API 集成到 GraphQL 客户端应用程序中。本文提供了使用 Node.js、Express、Apollo client 和 RESTful API 的示例代码，演示了如何集成 RESTful API 接口到 GraphQL 客户端应用程序中，并且代码缩进良好、易于理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495b74148841e98942cbefe