前言
在当前的互联网技术中，前后端分离已成为一种趋势。随着微服务架构的兴起，将后端系统拆分成多个独立的服务已变得非常普遍。然而，在面对大型应用的复杂性时，如何更好地协调这些服务之间的通信，以满足业务需求呢？在这个时候，GraphQL 就成了一个出色的选择。
GraphQL 是一种数据查询和操作语言，可以被用于构建 API。它提供了更加灵活和高效的数据查询方式，可以避免 RESTful API 存在的问题：例如 API 产生冗余请求和响应、缺少类型推导、多个请求需要合并等。
在这篇文章中，我们会深入了解 GraphQL 的工作原理和实现方式，并结合微服务架构的实战案例，向大家介绍如何使用 GraphQL 搭建基于微服务的后端架构。
GraphQL 的工作原理
GraphQL 的核心思想是开发者可以从 API 中获取他们需要的数据，并且可以按照自己的需求定义请求的数据结构，而不是像 RESTful API 那样受到固定的数据结构所束缚。
GraphQL 查询语言
GraphQL 查询语言类似于 JSON 格式，使用对象和字段来定义所需数据的结构。例如，以下查询请求将返回电影的标题和评级：
query {
movie {
title
rating
}
}GraphQL 的数据类型
在 GraphQL 中，有六种基本类型：
- Int: 32 位整型
- Float: 浮点型
- String: 字符串
- Boolean: 布尔型
- Enum: 枚举类型，枚举中的每个值必须是字符串类型
- ID: 表示一个唯一 identifier 的字符串类型
开发者可以使用这些类型来定义他们需要的数据结构。
GraphQL 的解析流程
当一个 GraphQL 请求被发送到服务器时，它将被分解成多个字段，每个字段都代表一个特定的查询需求。GraphQL 查询语言允许开发者明确声明每个字段的返回结果。
然后，服务器会根据所需的字段执行相应的查询，根据需要从数据源中获取数据，并返回结果。使用这种方法，GraphQL 能够有效地处理复杂的查询需求，并且只返回指定的数据。
基于微服务的 GraphQL 实战案例
在这个实战案例中，我们将探讨如何使用 GraphQL 搭建基于微服务的后端架构。我们将创建两个微服务，一个服务负责管理用户数据，另一个服务负责管理文章数据。我们将使用 Apollo Server 和 Apollo Client 实现 GraphQL 的后端和前端。
创建前端应用
首先，我们将创建前端应用。打开终端并运行以下命令：
npx create-react-app my-app cd my-app
这将使用 Create React App 创建一个新的 React 应用，并将我们进入到该应用的根目录。
在根目录下，我们需要安装前端所需的依赖。打开终端并运行以下命令：
npm install apollo-boost graphql react-apollo --save
这将安装我们需要的一些依赖项，其中包括 Apollo Boost、GraphQL 和 React Apollo。
创建后端服务
我们将使用 Apollo Server 创建后端服务。在终端中运行以下命令以安装所需的依赖项：
npm install apollo-server graphql --save
然后，我们可以创建一个名为 index.js 的新文件，并将以下代码添加到其中：
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- -------- - ----
---- ---- -
--- ----
----- -------
------ ------
-
---- ----- -
------ ------
-
--
----- ----- - -
- --- ---- ----- ------- ------ ------------------ --
- --- ---- ----- ------- ------ ------------------ --
--
----- --------- - -
------ -
------ -- -- ------
--
--
----- ------ - --- --------------
---------
----------
---
----------------------- --- -- -- -
------------------- ----- -- ---------
---在这个例子中，我们定义了一个 User 类型，当查询 users 时，返回这个类型的数组。我们还得到了一个硬编码的用户数据，稍后我们将从数据库中检索并返回它。
运行以下命令在终端中启动后端服务：
node index.js
在启动时，这将开始监听端口 http://localhost:4000/graphql，我们可以在浏览器中访问该端口，并使用 GraphQL Playground 调试和测试我们的 GraphQL 服务器。
创建前端查询
我们将创建一个可以查询到用户数据的前端查询。首先，在 React 应用程序中，我们将打开 src/App.js 文件并将以下代码添加到文件的开头：
import React from 'react';
import ApolloClient from 'apollo-boost';
import { ApolloProvider, Query } from 'react-apollo';
import gql from 'graphql-tag';这部分代码导入了我们需要使用的 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