如何使用 Apollo Server 和 GraphQL 创建全功能后端服务

阅读时长 9 分钟读完

如果你是一个前端开发者,你可能已经听说过 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 的第一步是导入必要的模块。在项目的入口文件中,添加以下代码:

这里我们导入了 ApolloServergql,前者是用于创建一个 GraphQL 服务器实例,后者是用于定义 GraphQL 模式的函数。

接下来,我们需要定义一个 Schema,Schema 定义了查询和类型的结构。我们将创建以下类型:

-- -------------------- ---- -------
---- ---- -
  --- ---
  ----- -------
  ---------- --------
-

---- ----- -
  ------ --------
-

---- -------- -
  ------------- --------- -----
  -------------- ---- ----- ------- ---------- --------- ----
  -------------- ----- ---
-

这里我们定义了 Todo 类型,它拥有三个字段:idtextcompleted。我们还定义了 QueryMutation,它们分别代表查询和变更。Query 中有一个叫做 todos 的字段,它将返回一个 Todo 类型的数组。Mutation 中有三个字段:addTodoupdateTododeleteTodo,这些字段将分别允许用户创建、更新和删除 todo。

我们可以使用 gql 函数来定义这个模式。在入口文件中,添加以下代码:

-- -------------------- ---- -------
----- -------- - ----
  ---- ---- -
    --- ---
    ----- -------
    ---------- --------
  -

  ---- ----- -
    ------ --------
  -

  ---- -------- -
    ------------- --------- -----
    -------------- ---- ----- ------- ---------- --------- ----
    -------------- ----- ---
  -
--

接下来,我们需要设置 resolvers。Resolver 是一个用于解析 GraphQL 查询的函数。我们将编写四个解析器,分别用于 Query 中的 todos,以及 Mutation 中的 addTodoupdateTododeleteTodo

在入口文件中,添加以下代码:

-- -------------------- ---- -------
----- ----- - ---

----- --------- - -
  ------ -
    ------ -- -- ------
  --
  --------- -
    -------- -------- ----- -- -
      ----- ------- - -
        --- ------------ - --
        ----- ----------
        ---------- ------
      --
      --------------------
      ------ --------
    --
    ----------- -------- ----- -- -
      ----- ---- - ----------------- -- ------- --- -------------------
      -- ------- -
        ----- --- ----------- ---- -- ---------- --- --------
      -
      -- ----------- -
        --------- - ----------
      -
      -- --------------- --- ---------- -
        -------------- - ---------------
      -
      ------ -----
    --
    ----------- -------- ----- -- -
      ----- ----- - ---------------------- -- ------- --- -------------------
      -- ------ --- --- -
        ----- --- ----------- ---- -- ---------- --- --------
      -
      ----- ------- - ------------------- ---
      ------ --------------
    --
  --
--

这里我们创建了一个名为 todos 的空数组,它用于存储 todo 列表。然后,我们定义了 resolvers 对象,它包含了 QueryMutation 的解析器。在 Query 中,我们返回了 todos 数组。在 Mutation 中,我们编写了三个解析器。addTodo 将创建一个新的 todo,并将其添加到 todos 中。updateTodo 将查找具有给定 id 的 todo,并更新 text 和/或 completed 字段。deleteTodo 将查找具有给定 id 的 todo,并将其从 todos 中删除。

最后一步是创建 Apollo Server 实例。在入口文件中,添加以下代码:

这里我们创建了一个 ApolloServer 实例,并将 typeDefsresolvers 对象传递给了它。现在,我们已经创建了一个完整的 GraphQL 服务器,可以准备启动它。

启动服务器

启动服务器非常简单。在入口文件中,添加以下代码:

这个函数将自动为我们选择一个空闲端口,并在上面启动我们的服务器。现在,我们可以使用 GraphQL Playground 来测试我们的服务了。

打开浏览器,并输入以下地址:

你应该会看到一个看起来像这样的界面:

这个界面就是 GraphQL Playground,它是一个用于测试 GraphQL 服务的工具。如果一切正常,你应该可以在 Playground 中看到我们定义的类型和查询。

编写查询

现在,我们已经可以测试我们的 GraphQL 服务了。尝试向 addTodo 发送一个变更请求:

-- -------------------- ---- -------
-------- -
  --------
    ----- ---- -----
  - -
    --
    ----
    ---------
  -
-

你应该会得到一个响应,其中包含了一个新的 todo:

-- -------------------- ---- -------
-
  ------- -
    ---------- -
      ----- ----
      ------- ---- ------
      ------------ -----
    -
  -
-

然后,尝试向 todos 字段发送一个查询请求:

你应该会看到我们上面创建的那个 todo:

-- -------------------- ---- -------
-
  ------- -
    -------- -
      -
        ----- ----
        ------- ---- ------
        ------------ -----
      -
    -
  -
-

我们还可以向 updateTodo 发送一个变更请求:

-- -------------------- ---- -------
-------- -
  -----------
    --- --
    ----- ---- -------
    ---------- ----
  - -
    --
    ----
    ---------
  -
-

这将更新 id1 的 todo。最后,我们尝试向 deleteTodo 发送一个变更请求:

这将删除 id1 的 todo。

总结

恭喜!你已经成功地创建了一个 GraphQL 服务器,并且使用 Apollo Server 和 GraphQL 实现了一个简单的 todo 应用程序的后端服务。虽然这只是一个简单的示例,但这可以帮助你更好地理解如何使用 Apollo Server 和 GraphQL 创建全功能的后端服务。

现在,你可以使用这个基础来创建自己的后端服务,并为它添加更多功能和解析器!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65237b1895b1f8cacdae9147

纠错
反馈