在现代 Web 开发中，GraphQL 是一种流行的查询语言，它提供了一种定义 API 语法的方式，用于查询和修改数据。它是一种比传统的 RESTful API 更灵活和高效的方式。在本文中，我们将探讨如何使用 Apollo Server 和 Express.js 构建 GraphQL Server。
Apollo Server 是什么？
Apollo Server 是一个用于构建 GraphQL 服务器的开源项目，它提供了一个易于使用的编程接口，可以在 JavaScript, TypeScript 和 Node.js 平台上运行。通过使用 Apollo Server，您可以轻松地构建灵活的、高度可扩展的 GraphQL 服务器，可支持任何类型的前端或后端应用程序。
为什么使用 Apollo Server？
使用 Apollo Server 有以下几个优点：
- 易于使用：使用 Apollo Server 可以轻松地定义 GraphQL Schema、解析器函数和数据源。
- 可扩展性：Apollo Server 支持各种中间件和插件，使得您可以轻松且快速地扩展您的服务器。
- 安全性：Apollo Server 提供了许多安全相关功能，比如身份验证和授权，可确保您的服务器和客户端之间的是安全的。
开始构建
在开始构建之前，您需要安装 Node.js 以及 npm（或者 yarn）。
首先，创建一个新的项目目录并初始化为 Node.js 项目：
----- -------------- -- -------------- --- ---- --
然后，安装必要的依赖：
--- ------- --------------------- ------- -------
接下来，创建一个 index.js 文件，并添加以下代码：
----- ------- - -------------------
----- - ------------- --- - - ---------------------------------
----- --- - ----------
----- -------- - ----
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ -- -- ---------
--
--
----- ------ - --- -------------- --------- --------- ---
------------------------ --- ---
------------ ----- ---- -- -- --
--------------- ------ ----- -- --------------------------------------------
--在这段代码中，我们首先导入了 express 和 apollo-server-express 模块。然后，我们创建了一个 Express 应用程序实例，并定义了 GraphQL Schema。在 Schema 中，我们定义了一个名为 hello 的查询，该查询返回字符串 'world!'。
接下来，我们定义了解析器函数。在解析器中，我们实现了 hello 查询，返回 'world!' 字符串。最后，我们创建了一个 Apollo Server 实例，并将它与 Express 应用程序实例进行了链接。
在最后一行代码中，我们启动了 Express 应用程序，并指定在端口4000 上监听请求。我们还使用 server.graphqlPath 属性来指定 Apollo 服务器 API 的路径。
现在，您可以启动应用程序并在浏览器中访问 http://localhost:4000/graphql，即可打开 GraphQL Playground 并测试我们创建的查询：
创建数据源
在前面的示例中，我们只是返回了一个简单的字符串。现在，让我们将其改进为从数据库中获取数据。我们将使用一个名为 json-server 的库来模拟 RESTful 数据源，以解决有关数据源的问题。
首先，我们安装 json-server 库：
--- ------- -----------
接下来，创建一个名为 db.json 的文件，并添加以下内容：
-
-------- -
-
----- --
-------- -------- -- ------
------- ------ ----- ----- --- ----- ----------- ---------- ----- ----- --- ---- --- ------ --------- --------
--
-
----- --
-------- ---- -------- -- ----- ---------
------- ------ ----- ----- --- ----- ----------- ---------- ----- ----- --- ---- --- ------ --------- --------
--
-
----- --
-------- ---- ------- -- -------- --- ------
------- ------ ----- ----- --- ----- ----------- ---------- ----- ----- --- ---- --- ------ --------- --------
--
-
----- --
-------- --------- - ------ --- --- ------ --------------
------- ------ ----- ----- --- ----- ----------- ---------- ----- ----- --- ---- --- ------ --------- --------
-
-
-在这里，我们定义了一个名为 posts 的数组，并添加了一些帖子对象。每个帖子对象都有一个唯一的 id 属性、一个 title 属性和一个 body 属性。
接下来，我们创建一个名为 json-server.js 的文件，并添加以下内容：
----- ---------- - ----------------------- ----- ------ - -------------------- ----- ------ - ----------------------------- ----- ----------- - ---------------------- ------------------------ ------------------- ------------------- -- -- - ----------------- ------ -- ---------- ---
这段代码中，我们创建了一个 jsonServer 的实例，并导入了 db.json 文件作为路由器的数据源。然后我们启动了该服务器并在端口3000 上监听请求。
译者注：请注意，我们使用的是 json-server 而不是 Apollo Server，因此我们在 json-server.js 中建立另外一个服务器作为模拟数据源。
在 GraphQL Server 中使用数据源
在 json-server.js 中的 router 对象中，已经创建了 posts 路由，这意味着我们可以从 GraphQL Server 中请求数据。现在，让我们更新之前的示例，将数据源与 GraphQL Server 集成。
首先，将 db.json 文件和 json-server.js 文件放在项目文件夹的根目录下。
然后，打开 index.js 文件，更新代码如下：
----- ------- - -------------------
----- - ------------- --- - - ---------------------------------
----- ----- - ----------------------
----- --- - ----------
----- -------- - ----
---- ---- -
--- ----
------ -------
----- -------
-
---- ----- -
------ ------
-------- ------ ----
-
--
----- --------- - -
------ -
------ ----- -- -- -
----- -------- - ----- -------------------------------------
----- ---- - ----- ----------------
------ -----
--
----- ----- --- - -- -- -- -
----- -------- - ----- -------------------------------------------
----- ---- - ----- ----------------
------ -----
--
--
--
----- ------ - --- -------------- --------- --------- ---
------------------------ --- ---
------------ ----- ---- -- -- --
--------------- ------ ----- -- --------------------------------------------
--在这段代码中，我们首先导入了 node-fetch 库，它将帮助我们在 GraphQL Server 中请求数据源。
接下来，我们更新了 GraphQL Schema，添加了 Post 类型和 posts 和 post 查询。在解析器中，我们使用 fetch 函数从 http://localhost:3000/posts 和 http://localhost:3000/posts/:id 路径中获取数据。
在最后一行代码中，我们启动了应用程序，并指定它监听在端口4000 上。
在 GraphQL Playground 中测试
现在，您可以启动 GraphQL 服务器和 JSON Server 并在 GraphQL Playground 中测试，以确保所有内容运作正常。
在一个终端中，请运行 json-server.js:
---- --------------
在另一个终端中，请运行 index.js:
---- --------
现在在浏览器中打开 http://localhost:4000/graphql 并测试查询，示例如下：
----- -
----- -
--
-----
----
-
-这将返回所有帖子的 id、title 和 body 属性。
您也可以测试 post 查询，示例如下：
----- -
-------- -- -
--
-----
-
-这将返回 id 为 1 的帖子的 id 和 title 属性。
结论
到目前为止，我们已经介绍了如何使用 Apollo Server 和 Express.js 创建一个 GraphQL 服务器，并与模拟数据源集成。虽然这只是一个基本的示例，但您可以根据自己的需求扩展应用程序。无论您是开发 Web 应用程序，构建 API 或者任何其他类型的应用程序，使用 Apollo Server 可以帮助您更轻松、更灵活地实现您的目标。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672350882e7021665e0f6705