如果你是一个前端开发者，你可能已经听说过 GraphQL 和 Apollo Server。GraphQL 是一个用于 API 的查询语言，它由 Facebook 在 2012 年创建。最近几年，它已经成为了前端开发者的热门选择，因为它可以帮助开发者构建更灵活、易于维护的 API。而 Apollo Server 则是一个用于构建 GraphQL 服务器的开发包，它提供了很多有用的工具和功能，可以帮助我们快速创建 GraphQL 服务。
在这篇文章中，我将向你介绍如何使用 Apollo Server 和 GraphQL 创建一个全功能的后端服务。你将学习到如何设置 Apollo Server、定义 GraphQL 模式、编写解析器和编写查询。我们将创建一个示例后端服务，它将处理一个简单的 todo 应用程序，允许用户创建、更新、删除和获取todo列表。
准备工作
在开始之前，你需要安装以下软件：
- Node.js
- npm 或 yarn
接下来，创建一个新的 Node.js 项目，并在项目根目录下运行以下命令来安装 Apollo Server 和其他依赖：
--- ------- ------------- -------
或者使用 yarn：
---- --- ------------- -------
配置 Apollo Server
配置 Apollo Server 的第一步是导入必要的模块。在项目的入口文件中，添加以下代码：
----- - ------------- --- - - -------------------------
这里我们导入了 ApolloServer 和 gql，前者是用于创建一个 GraphQL 服务器实例，后者是用于定义 GraphQL 模式的函数。
接下来，我们需要定义一个 Schema，Schema 定义了查询和类型的结构。我们将创建以下类型：
---- ---- - --- --- ----- ------- ---------- -------- - ---- ----- - ------ -------- - ---- -------- - ------------- --------- ----- -------------- ---- ----- ------- ---------- --------- ---- -------------- ----- --- -
这里我们定义了 Todo 类型，它拥有三个字段：id、text 和 completed。我们还定义了 Query 和 Mutation，它们分别代表查询和变更。Query 中有一个叫做 todos 的字段，它将返回一个 Todo 类型的数组。Mutation 中有三个字段：addTodo、updateTodo 和 deleteTodo，这些字段将分别允许用户创建、更新和删除 todo。
我们可以使用 gql 函数来定义这个模式。在入口文件中，添加以下代码：
----- -------- - ----
---- ---- -
--- ---
----- -------
---------- --------
-
---- ----- -
------ --------
-
---- -------- -
------------- --------- -----
-------------- ---- ----- ------- ---------- --------- ----
-------------- ----- ---
-
--接下来，我们需要设置 resolvers。Resolver 是一个用于解析 GraphQL 查询的函数。我们将编写四个解析器，分别用于 Query 中的 todos，以及 Mutation 中的 addTodo、updateTodo 和 deleteTodo。
在入口文件中，添加以下代码：
----- ----- - ---
----- --------- - -
------ -
------ -- -- ------
--
--------- -
-------- -------- ----- -- -
----- ------- - -
--- ------------ - --
----- ----------
---------- ------
--
--------------------
------ --------
--
----------- -------- ----- -- -
----- ---- - ----------------- -- ------- --- -------------------
-- ------- -
----- --- ----------- ---- -- ---------- --- --------
-
-- ----------- -
--------- - ----------
-
-- --------------- --- ---------- -
-------------- - ---------------
-
------ -----
--
----------- -------- ----- -- -
----- ----- - ---------------------- -- ------- --- -------------------
-- ------ --- --- -
----- --- ----------- ---- -- ---------- --- --------
-
----- ------- - ------------------- ---
------ --------------
--
--
--这里我们创建了一个名为 todos 的空数组，它用于存储 todo 列表。然后，我们定义了 resolvers 对象，它包含了 Query 和 Mutation 的解析器。在 Query 中，我们返回了 todos 数组。在 Mutation 中，我们编写了三个解析器。addTodo 将创建一个新的 todo，并将其添加到 todos 中。updateTodo 将查找具有给定 id 的 todo，并更新 text 和/或 completed 字段。deleteTodo 将查找具有给定 id 的 todo，并将其从 todos 中删除。
最后一步是创建 Apollo Server 实例。在入口文件中，添加以下代码：
----- ------ - --- -------------- --------- ---------- ---
这里我们创建了一个 ApolloServer 实例，并将 typeDefs 和 resolvers 对象传递给了它。现在，我们已经创建了一个完整的 GraphQL 服务器，可以准备启动它。
启动服务器
启动服务器非常简单。在入口文件中，添加以下代码：
----------------------- --- -- -- - ------------------- ------- -- --------- ---
这个函数将自动为我们选择一个空闲端口，并在上面启动我们的服务器。现在，我们可以使用 GraphQL Playground 来测试我们的服务了。
打开浏览器，并输入以下地址：
----------------------
你应该会看到一个看起来像这样的界面：
这个界面就是 GraphQL Playground，它是一个用于测试 GraphQL 服务的工具。如果一切正常，你应该可以在 Playground 中看到我们定义的类型和查询。
编写查询
现在，我们已经可以测试我们的 GraphQL 服务了。尝试向 addTodo 发送一个变更请求：
-------- -
--------
----- ---- -----
- -
--
----
---------
-
-你应该会得到一个响应，其中包含了一个新的 todo：
-
------- -
---------- -
----- ----
------- ---- ------
------------ -----
-
-
-然后，尝试向 todos 字段发送一个查询请求：
----- -
----- -
--
----
---------
-
-你应该会看到我们上面创建的那个 todo：
-
------- -
-------- -
-
----- ----
------- ---- ------
------------ -----
-
-
-
-我们还可以向 updateTodo 发送一个变更请求：
-------- -
-----------
--- --
----- ---- -------
---------- ----
- -
--
----
---------
-
-这将更新 id 为 1 的 todo。最后，我们尝试向 deleteTodo 发送一个变更请求：
-------- -
-----------
--- -
-
-这将删除 id 为 1 的 todo。
总结
恭喜！你已经成功地创建了一个 GraphQL 服务器，并且使用 Apollo Server 和 GraphQL 实现了一个简单的 todo 应用程序的后端服务。虽然这只是一个简单的示例，但这可以帮助你更好地理解如何使用 Apollo Server 和 GraphQL 创建全功能的后端服务。
现在，你可以使用这个基础来创建自己的后端服务，并为它添加更多功能和解析器！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65237b1895b1f8cacdae9147