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

如果你是一个前端开发者,你可能已经听说过 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


猜你喜欢

  • Node.js 开发者的 Sass 入门指南

    Sass 是一种 CSS 预处理器,它为开发者提供了一种更简洁、更灵活的方式来编写 CSS。在这篇文章中,我们将探讨 Sass 的基础知识,以及如何在 Node.js 中使用 Sass。

    2 个月前
  • Serverless 架构中使用 API Gateway 的常见错误及解决方案

    前言 在使用 Serverless 架构中的 API Gateway 时,我们可能会遇到各种各样的错误。这些错误可能会导致我们的应用程序无法正常运行,给开发和运维带来不必要的麻烦。

    2 个月前
  • Express.js 请求参数解析与校验

    前言 在使用 Express.js 进行开发时,我们难免要处理请求参数的问题。如何解析参数,如何校验参数的正确性,这些都是前端工程师需要掌握的技能。本文将会详细介绍 Express.js 的参数解析与...

    2 个月前
  • 如何使用 Custom Elements 和 WebSocket 实现实时数据更新?

    在现代的 web 应用程序中,实时数据更新是必不可少的。WebSockets 是一种可以建立实时连接的技术,而 Custom Elements 则为创建可复用的自定义标签提供了一种简单的方法。

    2 个月前
  • 使用 RxJS 实现实时数据的双向绑定和服务器推送

    在前端开发中,实时数据的双向绑定和服务器推送是非常常见的需求。传统的做法通常是利用轮询或者长轮询,但这种方式存在明显的不足,比如浪费带宽和延迟高等问题。而 RxJS 这个流式编程库可以提供一种新的解决...

    2 个月前
  • GraphQL API 调试入门:解决 JSON 错误的问题

    什么是 GraphQL API? GraphQL 是一种用于构建 API 的查询语言,提供了一种更加有效率、强大和灵活的方式来获取和操作持久化数据。GraphQL API 可以让前端开发者更直接地和服...

    2 个月前
  • React 单元测试利器 Enzyme 入门指南

    作为前端开发人员,单元测试是我们日常开发不可或缺的一部分。而针对 React 的单元测试,我们有一个非常强大的利器——Enzyme。Enzyme 是 AirBnb 开发的一个 React 测试工具,可...

    2 个月前
  • Jest 测试时如何 mock 掉 React 组件的生命周期?

    随着前端技术的发展,越来越多的新技术被采用到我们的工作中。在开发过程中,我们经常需要使用到测试工具来确保代码质量,而测试时mock掉React组件生命周期函数是一个非常实用的技巧。

    2 个月前
  • 如何在 Deno 中使用 JWT 进行用户认证和权限控制?

    在 Web 应用开发过程中,用户认证和权限控制是非常重要的功能,通常我们使用 JWT(JSON Web Token)来实现这些功能。那么,如何在 Deno 中使用 JWT 进行用户认证和权限控制呢?接...

    2 个月前
  • 在使用 CSS Reset 时注意列表样式的影响

    在使用 CSS Reset 时注意列表样式的影响 在 web 前端开发中,CSS Reset 是重要的一环。通常情况下,我们会使用 CSS Reset 来清除浏览器的默认样式,以确保我们的网页在不同浏...

    2 个月前
  • 如何解决在 Vue 中使用 TypeScript 时出现的错误提示?

    在前端开发中,Vue.js 和 TypeScript 越来越受到开发者的青睐。Vue.js 是一个简单、快速、灵活且可扩展的 JavaScript 框架,而 TypeScript 则是一种强类型、面向...

    2 个月前
  • 如何使用 ES8 的 Trailing commas 解决 JavaScript 数组和对象的语法错误

    前言 在 JavaScript 中,数组和对象是两种常用的数据类型。它们支持存储和操作一组数据。但是,在操作过程中可能会犯一些语法错误,例如最后一个元素后面多一个逗号。

    2 个月前
  • 如何在 Vue.js 项目中有效利用虚拟 DOM 技术

    在 Vue.js 中,虚拟 DOM 是其最为核心的技术之一,它的作用是将数据和视图进行分离,通过对数据的操作来实现页面的渲染更新。本文将为大家介绍在 Vue.js 项目中如何有效利用虚拟 DOM 技术...

    2 个月前
  • Angular HttpClient 拦截器使用详解

    Angular 的 HttpClient 是一个非常强大的 HTTP 客户端,能够提供丰富的 HTTP 请求和响应的处理能力。在实际应用中,我们通常需要对 HTTP 请求进行一些共同的处理,比如添加请...

    2 个月前
  • Next.js 的外链引入样式问题及解决方法

    Next.js 的外链引入样式问题及解决方法 前言 Next.js 是一个非常流行的 React 框架,它通过其强大的路由功能、静态生成和服务端渲染等特性,可以帮助我们构建出高效、灵活的应用。

    2 个月前
  • PhantomJS、Karma、ESLint、babel-plugin-istanbul 代码覆盖率问题

    PhantomJS、Karma、ESLint、babel-plugin-istanbul 代码覆盖率问题 在前端开发中,代码覆盖率是一种重要指标。它表示测试中代码被执行到的比例,能够帮助我们判断测试用...

    2 个月前
  • 如何在 Mocha 测试框架中使用 Sinon 进行 Stub 测试

    如何在 Mocha 测试框架中使用 Sinon 进行 Stub 测试 在前端开发中,测试是一个不可避免的过程。Mocha 是一个流行的 JavaScript 测试框架,而 Sinon 是一个独立于任何...

    2 个月前
  • 在 Web Components 中如何使用 Web Worker 来提高性能

    Web Components 是一项新兴的前端技术,通过封装 HTML、CSS 和 JavaScript,可以创建可复用的自定义组件,从而提高开发效率和代码可维护性。

    2 个月前
  • 解决 Redux 报错 TypeError: Cannot read property 'connect' of undefined

    当使用 react-redux 库的 connect 函数连接 redux 状态管理器时,有时会遇到报错 TypeError: Cannot read property 'connect' of un...

    2 个月前
  • Sequelize 中如何实现模型实例的更新和保存

    Sequelize 是一个基于 Node.js 的 ORM 框架,用于与各种 SQL 数据库进行交互。在使用 Sequelize 操作数据库时,我们经常需要更新和保存模型实例,因为这可以让我们持久化我...

    2 个月前