利用 Apollo Server 和 Express.js 构建 GraphQL Server

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在现代 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 文件,并添加以下代码:

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

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

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

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

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

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

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

在这段代码中,我们首先导入了 expressapollo-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 类型和 postspost 查询。在解析器中,我们使用 fetch 函数从 http://localhost:3000/postshttp://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


猜你喜欢

  • Mongoose 连接 MongoDB 时的报错及解决方法

    Mongoose 是用于连接 MongoDB 数据库的流行 Node.js ORM 框架。虽然它提供了一个容易使用的 API,但在连接 MongoDB 时,我们可能会遇到一些错误。

    11 天前
  • Golang 性能优化备忘录

    作为一种高效、快速的编程语言,Golang 被许多开发者称为是 C 语言和 Python 的结合体,并且在网络编程、高并发应用等领域有着广泛的应用。然而,像其他任何编程语言一样,Golang 在开发过...

    11 天前
  • Angular 如何优化应用程序的性能与体验?

    前端应用程序的性能和体验对于用户是至关重要的。Angular 是一个流行的前端框架,它提供了多种方法来优化应用程序的性能和体验。在本文中,我们将介绍一些优化 Angular 应用程序性能和体验的技巧。

    11 天前
  • 利用 Flexbox 技术搭建响应式布局

    在前端开发中,响应式布局一直是一个重要的话题。随着越来越多的人使用移动设备浏览网页,我们需要确保网页能够在各种屏幕尺寸下提供良好的用户体验。而 Flexbox 技术则成为了实现响应式布局最重要的工具之...

    11 天前
  • 如何利用 babel 插件巧妙实现前端代码优化?

    前端开发过程中,代码优化是一个非常重要的话题。优化前端代码可以提升网站性能,加速网页加载速度,提高用户体验。然而,优化前端代码同样也是一个非常复杂和繁琐的任务。 在这篇文章中,我将介绍如何利用 bab...

    11 天前
  • Sequelize 之 connect ECONNREFUSED 解决方案

    Sequelize 是一个 Node.js 的 ORM(对象关系映射),方便开发者进行 SQL 数据库操作。但在使用过程中,有时候会遇到 connect ECONNREFUSED 的错误提示,本文将会...

    11 天前
  • Angular 中 RxJS 被滥用的错误使用方式

    RxJS 是 Angular 中非常重要的一部分。它提供了一种强大的解决方案,用于处理异步操作和事件流。但是,在实践中,我们经常看到 RxJS 被滥用,导致代码难以维护和理解。

    11 天前
  • 无服务器应用程序架构的常见错误及其解决方案(Serverless)

    随着云计算技术的发展,无服务器应用程序架构(Serverless)在近年来变得越来越流行。相比传统的服务器端架构,Serverless 架构有很多优势,如灵活性、维护成本低、可扩展性强等。

    11 天前
  • 响应式网站设计的三大误区与解决方案

    随着移动设备的广泛普及,越来越多的用户在手机和平板电脑上浏览网站。因此,响应式网站设计已经成为了前端开发的一个重要方向。然而,在实践中,我们会遇到一些常见的误区。本文将讨论响应式网站设计的三大误区,并...

    11 天前
  • 初学 Next.js 的同学需要掌握的框架与概念

    什么是 Next.js? Next.js 是一个 React 服务端渲染框架。它可以为前端开发者提供更好的 SEO、用户体验和快速加载速度。Next.js 还支持静态生成,并且可以部署到任何地方。

    11 天前
  • 解决 Socket.io 事件被重复触发的问题

    问题描述 在使用 Socket.io 进行实时通信过程中,可能会出现事件被重复触发的情况,也就是说一个事件在被触发后,会再次触发多次,给应用带来不必要的负担和错误。

    11 天前
  • Vue.js 中如何使用 vue-loader 编译.vue 文件

    Vue.js 是一款流行的前端框架,使得我们可以更轻松地创建交互式的网页应用。在 Vue.js 中,我们可以使用 .vue 文件来编写组件,它们包括 HTML 模板、JavaScript 代码和 CS...

    11 天前
  • Hapi 框架如何通过 Nginx 实现反向代理?

    随着网站的访问量逐渐增加,单一服务器可能无法承受较高的负载,此时我们常常需要使用负载均衡和反向代理来提高网站的性能和稳定性。Nginx 是一款高性能的开源反向代理服务器,而 Hapi 则是一款基于 N...

    11 天前
  • Node.js 和 Vue.js 进行全栈开发:实践经验分享

    随着互联网的发展,全栈开发越来越受到关注。全栈开发指的是一名开发人员集成了前端、后端、数据库、服务器等多方面的技能,可以负责整个应用程序的开发。在全栈开发领域中,Node.js 和 Vue.js 是最...

    11 天前
  • Flexbox 布局下的换行处理技巧

    Flexbox 布局下的换行处理技巧 作为一名前端工程师,我们都知道 Flexbox 布局是一种非常强大的工具。它可以轻松地处理网页布局,实现响应式设计和更好的页面可访问性。

    11 天前
  • 如何在 React Native 中设计动态主题

    如何在 React Native 中设计动态主题 随着移动应用程序的增加,用户对于应用程序的整体外观和体验越来越注重。随着许多应用程序对于视觉效果的要求越来越高,动态主题成为一种让这些应用程序更加有设...

    11 天前
  • 如何使用 Flexbox 和 CSS Grid 协同实现布局?

    现代化前端网页开发,布局是其中一个非常关键的元素。现如今前端开发技术已经展现出了极其强大的布局技能,如何有效地使用布局技术能够提升网页开发的效率与质量。本文将介绍两种前端布局技术 Flexbox 和 ...

    11 天前
  • babel 转换 es6 中的 Promise 错误如何修复?

    在使用现代浏览器时,我们通常能够使用最新的 JavaScript 特性,如 ES6 的 Promise。但是,如果你想要支持旧版本的浏览器,你就要使用 Babel 将 ES6 代码转换成另一个版本的 ...

    11 天前
  • 如何在 ESLint 中排除所有样式

    在前端开发中,我们经常需要使用 ESLint 来规范我们的代码,并且在代码提交前,进行 ESLint 检查可以减少一些潜在的问题和错误。但是有时候,我们不想在 ESLint 检查样式方面花费太多时间和...

    11 天前
  • 怎样使用 ECMAScript 2019 中的 Array.prototype.flatMap 方法?

    ECMAScript 2019 增加了许多功能强大、实用的语言特性,其中包括 Array.prototype.flatMap 方法。本文将详细介绍这个方法的使用方法、意义,以及实用的案例。

    11 天前

相关推荐

    暂无文章