如何使用 Node.js 和 Express 创建一个简单的 GraphQL 服务器

GraphQL 是一种用于 API 的查询语言,可以帮助前端开发人员更好地定义和获取与服务器交互的数据。使用 Node.js 和 Express 可以轻松地创建一个 GraphQL 服务器,本文将详细介绍如何实现它。

安装必要的依赖

首先,我们需要安装一些必要的依赖项,包括 Express、GraphQL、graphql-tools 和 body-parser:

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

创建 GraphQL Schema

GraphQL Schema 是定义 GraphQL API 的核心部分。我们将使用 graphql-tools 库来创建一个基本的 schema。

在项目根目录下创建一个名为 schema.js 的文件,并添加以下代码:

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

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

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

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

代码中定义了一个 Query 类型,该类型具有一个 hello 字段,该字段返回字符串 "Hello world!"。

创建 Express 应用程序

接下来,创建一个 Express 应用程序,并在其中启用 GraphQL API。在项目根目录下创建一个名为 app.js 的文件,并添加以下代码:

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

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

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

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

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

代码中创建了一个 Express 应用程序,并在 /graphql 路由中使用 graphqlExpress 中间件来启用 GraphQL API。在 /graphiql 路由中,使用 graphiqlExpress 中间件来启用 GraphiQL 工具。最后,应用程序在本地的端口 3000 上启动。

运行 GraphQL 服务器

将项目文件转到项目根目录,并使用以下命令运行服务器:

- ---- ------

打开浏览器,访问 http://localhost:3000/graphiql,如果一切正常,您将看到 GraphiQL 工具在屏幕上。

在 GraphiQL 中,在左侧的查询编辑器中输入以下查询:

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

然后单击右上角的运行按钮。应该会在右侧的响应窗口中会看到以下输出:

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

这就是我们的第一个 GraphQL 查询,返回文本 “Hello world!” 。

结论

使用 Node.js 和 Express 创建一个简单的 GraphQL 服务器非常简单。本文介绍了如何安装必要的依赖项、如何定义 GraphQL Schema、如何使用 Express 启用 GraphQL API,并提供了可运行的示例代码。

GraphQL 是一个非常强大的 API 查询语言和类型系统,可以轻松地定义和检索需要的数据,这使得开发出现了巨大的变革。我们建议您探索 GraphQL 的其他功能,并将其集成到自己的开发项目中。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6712e8aead1e889fe2093704


猜你喜欢

  • 在API中使用GraphQL的优缺点解析

    简介 GraphQL是一种用于 API 的查询语言和运行时环境,由Facebook于2015年推出。它的目标是替代REST API的缺点,如高嵌套和过度获取。 在本文中,我们将分析在API中使用Gra...

    6 天前
  • Vue.js:使用 slot 插槽实现组件内容的分发

    Vue.js 是一款流行的前端框架,它在构建大型应用程序时具有很高的灵活性和可维护性。其中一个核心功能是使用 slot 插槽实现组件内容的分发,这为开发人员提供了一种简单而强大的方式来定义组件的行为。

    6 天前
  • 解决 Jest 测试报告中错误的 “unexpected token” 语法错误

    解决 Jest 测试报告中错误的 “unexpected token” 语法错误 在前端开发中,我们经常会使用 Jest 来对代码进行测试。但有时在测试报告中,会出现错误的 “unexpected t...

    6 天前
  • 利用 ES7 async/await 重构你的代码,让异步编程更易理解

    对于前端开发者来说,异步编程一直是一个重要的话题。当处理复杂的业务逻辑或者与后端交互时,异步编程非常必要。以前,我们需要使用回调函数或者 Promise 进行异步编程,而这些编程方式常常会让代码变得难...

    6 天前
  • React Native 中如何实现国际化

    React Native 是一种创建流畅的交互式 UI 的开源框架,它可以让开发者使用 JavaScript 构建真正的移动应用。React Native 的 APIs 和组件可以让开发者将代码重用到...

    6 天前
  • 响应式设计中遇到的十大困惑及解决方法

    随着移动设备的普及,网站的响应式设计越来越受到开发者的重视。然而,即使是经验丰富的前端开发人员也可能遇到一些困惑。在本文中,我们将讨论响应式设计中遇到的十大困惑,并提供解决方法、示例代码和最佳实践。

    6 天前
  • 盘点 ES8 标准中的 Promise 和 async/await

    前言 在前端开发中,异步编程是非常常见的一种编程方式,而 Promise 和 async/await 就是异步编程的重要实现方式。在 ES8 标准中,Promise 和 async/await 得到了...

    6 天前
  • 解决使用 Custom Elements 在各浏览器中兼容性的问题

    什么是 Custom Elements? Custom Elements 是 Web Components 技术中的一部分,用于定义新的 HTML 元素。通过 Custom Elements,开发者可...

    6 天前
  • 如何使用 Web Components 实现自定义滚动条

    随着互联网技术的不断发展,前端技术也在不断进化,Web Components 就是其中之一。Web Components 为我们提供了一种自定义网页组件的方式,能够提升网页的可重用性和可维护性。

    6 天前
  • 无障碍模式下,如何实现屏幕上下滚动的辅助功能

    无障碍模式是指尽可能使所有人都能轻松地访问应用或网站。这种设计考虑到了身体上的不同需求,例如使用辅助技术(比如文字转语音),可使用性和可访问性更强。 为了满足无障碍用户的需求,在设计前端时,我们需要为...

    6 天前
  • Sequelize 实践指南:如何对关系型数据库进行数据迁移?

    Sequelize 是一款 Node.js 的 ORM 框架,可以操作多种关系型数据库,包括 PostgreSQL、MySQL、SQLite 和 Microsoft SQL Server 等。

    6 天前
  • 高效地使用 Node.js 框架 Koa 构建 RESTful API

    前言: Node.js是一个基于Chrome V8引擎的JavaScript运行环境,使得开发人员可以使用JavaScript进行服务器端编程。它提供了轻量级的事件驱动、非阻塞式I/O模型,使得开发高...

    6 天前
  • GraphQL 数据库语言入门教程

    GraphQL 是一种通过 API 来查询和获取数据的新型数据库语言。相比传统的 REST API,GraphQL 拥有更高度的灵活性和可定制性,因此在前端开发方面得到了越来越广泛的应用。

    6 天前
  • 如何正确使用 LESS 中的 Mixin

    如何正确使用 LESS 中的 Mixin LESS 是一种基于 CSS 的扩展语言,它允许使用变量、函数、Mixin 等高级功能,让 CSS 编写更为简便。在 LESS 中,Mixin 是其中一个最实...

    6 天前
  • 使用 Socket.io 和 Vue.js 实现实时数据交换

    在现代前端应用程序中,实时数据交换变得越来越重要。很多情况下,我们需要通过 WebSockets 等实时通信协议进行实时数据传输。Socket.io 是一个支持实时数据交换的 JavaScript 库...

    6 天前
  • 当你遇到 CSS Reset 会出现的问题,看这里就够了

    如果你正在学习前端开发,那么你肯定不会陌生 CSS Reset 这个概念。关于 CSS Reset,它是一种应对浏览器默认样式不一致的技术方案,旨在消除各个浏览器之间的差异,使得开发者可以更加精确地控...

    6 天前
  • ES8 中的 Array Buffer 对象和 Typed Arrays

    ES8 中的 Array Buffer 对象和 Typed Arrays Array Buffer 对象是一个表示固定长度的二进制数据缓冲区的类数组对象,而 Typed Arrays 是 ES8 中添...

    6 天前
  • RESTful API 的幂等性详解

    什么是 RESTful API ? REST(Representational State Transfer)是一种 Web 架构风格,它最初是由 Roy Fielding 在其博士论文中提出,用于描...

    6 天前
  • ES11 中的私有字段和方法

    随着 JavaScript 语言的快速发展,ES11 也加入了一些新特性,其中最值得注意的就是私有字段和方法。在这篇文章中,我们将深入探讨这些新特性的特点以及如何在实际应用中使用。

    6 天前
  • 从多种角度剖析 Serverless 架构缺点及解决方案

    随着云计算的快速发展,Serverless 架构也越来越受到前端开发者的关注。Serverless 架构可以帮助我们轻松构建、部署和管理应用程序,同时实现弹性伸缩和更快速的交付。

    6 天前

相关推荐

    暂无文章