前言
在当前的互联网技术中，前后端分离已成为一种趋势。随着微服务架构的兴起，将后端系统拆分成多个独立的服务已变得非常普遍。然而，在面对大型应用的复杂性时，如何更好地协调这些服务之间的通信，以满足业务需求呢？在这个时候，GraphQL 就成了一个出色的选择。
GraphQL 是一种数据查询和操作语言，可以被用于构建 API。它提供了更加灵活和高效的数据查询方式，可以避免 RESTful API 存在的问题：例如 API 产生冗余请求和响应、缺少类型推导、多个请求需要合并等。
在这篇文章中，我们会深入了解 GraphQL 的工作原理和实现方式，并结合微服务架构的实战案例，向大家介绍如何使用 GraphQL 搭建基于微服务的后端架构。
GraphQL 的工作原理
GraphQL 的核心思想是开发者可以从 API 中获取他们需要的数据，并且可以按照自己的需求定义请求的数据结构，而不是像 RESTful API 那样受到固定的数据结构所束缚。
GraphQL 查询语言
GraphQL 查询语言类似于 JSON 格式，使用对象和字段来定义所需数据的结构。例如，以下查询请求将返回电影的标题和评级：
----- -
----- -
-----
------
-
-GraphQL 的数据类型
在 GraphQL 中，有六种基本类型：
- Int: 32 位整型
- Float: 浮点型
- String: 字符串
- Boolean: 布尔型
- Enum: 枚举类型，枚举中的每个值必须是字符串类型
- ID: 表示一个唯一 identifier 的字符串类型
开发者可以使用这些类型来定义他们需要的数据结构。
GraphQL 的解析流程
当一个 GraphQL 请求被发送到服务器时，它将被分解成多个字段，每个字段都代表一个特定的查询需求。GraphQL 查询语言允许开发者明确声明每个字段的返回结果。
然后，服务器会根据所需的字段执行相应的查询，根据需要从数据源中获取数据，并返回结果。使用这种方法，GraphQL 能够有效地处理复杂的查询需求，并且只返回指定的数据。
基于微服务的 GraphQL 实战案例
在这个实战案例中，我们将探讨如何使用 GraphQL 搭建基于微服务的后端架构。我们将创建两个微服务，一个服务负责管理用户数据，另一个服务负责管理文章数据。我们将使用 Apollo Server 和 Apollo Client 实现 GraphQL 的后端和前端。
创建前端应用
首先，我们将创建前端应用。打开终端并运行以下命令：
--- ---------------- ------ -- ------
这将使用 Create React App 创建一个新的 React 应用，并将我们进入到该应用的根目录。
在根目录下，我们需要安装前端所需的依赖。打开终端并运行以下命令：
--- ------- ------------ ------- ------------ ------
这将安装我们需要的一些依赖项，其中包括 Apollo Boost、GraphQL 和 React Apollo。
创建后端服务
我们将使用 Apollo Server 创建后端服务。在终端中运行以下命令以安装所需的依赖项：
--- ------- ------------- ------- ------
然后，我们可以创建一个名为 index.js 的新文件，并将以下代码添加到其中：
----- - ------------- --- - - -------------------------
----- -------- - ----
---- ---- -
--- ----
----- -------
------ ------
-
---- ----- -
------ ------
-
--
----- ----- - -
- --- ---- ----- ------- ------ ------------------ --
- --- ---- ----- ------- ------ ------------------ --
--
----- --------- - -
------ -
------ -- -- ------
--
--
----- ------ - --- --------------
---------
----------
---
----------------------- --- -- -- -
------------------- ----- -- ---------
---在这个例子中，我们定义了一个 User 类型，当查询 users 时，返回这个类型的数组。我们还得到了一个硬编码的用户数据，稍后我们将从数据库中检索并返回它。
运行以下命令在终端中启动后端服务：
---- --------
在启动时，这将开始监听端口 http://localhost:4000/graphql，我们可以在浏览器中访问该端口，并使用 GraphQL Playground 调试和测试我们的 GraphQL 服务器。
创建前端查询
我们将创建一个可以查询到用户数据的前端查询。首先，在 React 应用程序中，我们将打开 src/App.js 文件并将以下代码添加到文件的开头：
------ ----- ---- -------- ------ ------------ ---- --------------- ------ - --------------- ----- - ---- --------------- ------ --- ---- --------------
这部分代码导入了我们需要使用的 React、ApolloClient、ApolloProvider、Query 和 gql。
接下来，我们将实例化一个 Apollo 客户端，并将其传递给我们的应用程序，以便管理我们的数据。在 src/App.js 文件中，我们将添加以下代码：
----- ------ - --- --------------
---- --------------------------------
---
-------- ----- -
------ -
--------------- ----------------
-----
--------------
------
-----------------
--
-这部分代码将实例化一个 Apollo 客户端。我们在应用程序的根目录下使用 ApolloProvider 将客户端作为 prop 提供，使我们的整个应用程序都能访问它。
接下来，我们将使用 Query 组件来执行我们的查询。在 src/App.js 文件中，我们将添加以下代码：
----- --------- - ----
-
----- -
--
----
-----
-
-
--
-------- ----- -
------ -
--------------- ----------------
-----
--------------
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ----------------- --- ----- ----- -- -- -
---- ---------
---
------ ---------
----
------
---
--
--------
------
-----------------
--
-在这个例子中，我们定义了一个 GraphQL 查询，该查询返回用户的 id、name 和 email。我们还将使用 React Apollo 中的 Query 组件将这个查询添加到 React 应用程序中，并在返回的数据中映射这些值。
在我们的应用程序中，我们只需要在一个组件中传递 gql 查询定义，然后在一个函数式组件中传递此查询作为 query prop 来触发数据的获取和渲染。
联合查询
在上面的例子中，我们只查询了用户，并没有查询文章。现在，我们将使用 Apollo Client 来获取更多数据。
打开 src/App.js 文件并添加以下代码：
----- ------------ - ----
-
-------- -
--
-----
----
-
-
--
-------- ----- -
------ -
--------------- ----------------
-----
--------------
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ----------------- --- ----- ----- -- -- -
---- ---------
---
------ ---------
----
------
---
--
--------
------------------
------ ---------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -------------------- --- ------ ---- -- -- -
---- ---------
---
------- --------
----
------
---
--
--------
------
-----------------
--
-在这个例子中，我们定义了一个新的查询，该查询返回文章列表，每篇文章有标题和正文属性。
我们在应用程序中添加了第二个Query组件，该组件将获取我们的文章，并在返回的数据中映射相关的信息。
这两个查询是独立的，但是在实际应用中，我们可能想要查询及联合处理这两个表中的数据。我们将在下面进行更深入的探讨。
交叉查询
让我们现在仅查询每篇文章的作者姓名。在我们的 GraphQL 服务器上，我们可以更新 typeDefs 如下：
----- -------- - ----
---- ---- -
--- ----
----- -------
------ ------
-
---- ------- -
--- ----
------ -------
----- -------
------- ---
-
---- ----- -
------ -------
--------- ---------
---------------- -----------------
-
---- --------------- -
--- ----
------ -------
----- -------
----- ----
-
--我们添加了一个新的 type ArticleWithUser，该类型包含文章和其作者的姓名。我们还添加了一个新的查询 articleWithUser，用于查询所有文章及其作者。
接下来，我们需要为新查询实现 resolvers。我们将改变 queries 实现，以便我们可以同时为一篇文章和其关联的作者进行查询：
----- --------- - -
------ -
------ -- -- ------
--------- -- -- ---------
---------------- -- -- -
------ ---------------------- -- -
----- ---- - --------------- -- ------- --- ----------------
------ - ----------- ---- --
---
-
--
--现在，我们已经添加了作者的姓名到文章中，让我们将其添加到我们的 React 应用程序中。在 src/App.js 文件中，我们将更新 GET_ARTICLES gql 查询如下：
----- ------------ - ----
-
--------------- -
--
-----
----
---- -
----
-
-
-
--现在，我们已准备好让我们的 React 组件调用新查询。在 src/App.js 文件中，我们需要将第二个 Query 组件更新如下：
------ ---------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ --------------------------- --- ------ ---- -- -- -
---- ---------
---------- -----------------
------
---
--
--------现在，我们的 React 应用程序打包到一起了基于微服务架构的 GraphQL 实战案例，并且可以同时查询用户和文章，还能够交叉查询每篇文章的作者名称。
结论
本文介绍了 GraphQL 的工作原理和实现方式，并结合基于微服务的案例，向大家展示了如何使用 GraphQL 搭建整体的后端架构。
使用 GraphQL 构建 API 可以增加可维护性、数据源扩展性和代码的可读性，同时减少性能问题和错误。
最后，我们希望这个案例可以启发读者探索 GraphQL 在微服务构建中的潜力，和了解如何使用它去联合API、交叉查询，以及实现微服务的复杂任务。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f3ca54f40ec5a964e4e64b