学习 GraphQL 的最佳方式:基于 Node.js 的教程

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

学习GraphQL的最佳方式:基于Node.js的教程

GraphQL是一个用于API的查询语言和运行时环境。它允许您描述应用程序中的数据要求,并使客户端能够准确地获取所需的数据。GraphQL比RESTful接口更加灵活和高效,并且在现代Web开发中越来越受欢迎。本文将教您如何在Node.js中学习和使用GraphQL。

安装GraphQL

首先,我们需要安装Node.js和npm。然后在您的项目根目录中,运行以下命令安装graphql:

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

安装完成后,我们可以在Node.js中创建一个GraphQL服务器。

创建GraphQL服务器

我们将使用Express框架来创建GraphQL服务器。在项目根目录中,使用npm来安装Express。

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

接下来,创建一个server.js文件,并编写以下代码:

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

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

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

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

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

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

上述代码创建了一个GraphQL服务器,它将“Hello World!”作为响应返回。现在启动服务器,访问http://localhost:4000/graphql,并在GraphQL playground中查询hello字段,您应该会得到“Hello World!”作为响应。

了解GraphQL架构

GraphQL的主要构建块是架构和类型。GraphQL架构定义了可用于查询的数据集,而类型则定义了数据的结构。需要先了解GraphQL架构的基础概念。

类型

GraphQL有两类类型:标量类型和对象类型。标量类型是原始类型,如整数、字符串和布尔值。GraphQL提供了一组标量类型,例如Int,String和Boolean。对象类型包含多个字段,并且每个字段都有其类型和参数。对象类型可以嵌套,因此您可以创建深度嵌套的类型,以表示递归数据结构。

架构

在GraphQL中,架构由类型、查询、变异和订阅组成。查询是从GraphQL服务器获取数据的方式,变异用于修改数据,而订阅用于实时数据推送。

了解GraphQL查询

创建GraphQL查询是通过定义查询类型来实现的。每个查询类型定义了一组可用于查询的字段。让我们在现有的GraphQL服务器中添加一个名称字段。

首先,更新schema定义:

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

然后,更新root定义:

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

现在,通过运行以下查询,您将获得名称“John”作为响应。

-
  ----
-

了解GraphQL变异

变异用于修改存储在GraphQL服务器中的数据。每个变异类型定义了一组可供使用的参数和要执行的操作。在变异操作中,请勿直接操作数据库 - 这是由数据持久性层(例如ORM或Mongoose)处理的。

让我们使用变异来添加一个用户。首先,更新schema定义:

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

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

这个schema定义了一个User类型,其中包含id、name和email字段。我还定义了一个UserInput类型,它表示输入参数。在Mutation类型中,我定义了一个名为createUser的变异,它接受一个UserInput对象,然后返回创建的用户。

接下来,更新root定义:

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

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

现在,您可以通过运行以下变异来添加一个新的用户:

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

您应该会得到一个响应,其中包含创建的用户信息。

了解GraphQL订阅

订阅用于实时数据推送。它是一个WebSocket连接,它可以从服务器订阅消息,以便在推送到客户端时立即接收。

让我们使用GraphQL订阅来实现一个简单的聊天应用程序。首先,更新schema定义:

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

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

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

这个schema定义了一个Message类型,它有id和text字段。在Subscription类型中,我定义了一个messageAdded订阅。在Mutation类型中,我定义了一个addMessage变异,它接受一个文本输入参数,并返回消息对象。

接下来,更新root定义:

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

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

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

在这里,我将消息数组存储在内存中,创建了nextId变量和一个名为pubsub的PubSub对象。在messageAdded字段中,我订阅了一个名为“MESSAGE_ADDED”的频道。在addMessage变异中,我创建了一个新消息,将其推送到消息数组中,并使用pubsub发布了一个名为messageAdded的事件,该事件随着新消息一起发送。

在订阅页面中,我们需要打开一个WebSocket连接,并使用graphql.js客户端在服务器上订阅消息。使用以下代码订阅服务器上的新消息:

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

现在,每当执行addMessage变异时,客户端将接收到新消息。

结论

通过Node.js学习GraphQL是一种有效的方式,但在您学习之前需要了解一些基本概念。在本文中,我们学习了GraphQL的类型、架构、查询、变异和订阅,并了解了如何在GraphQL服务器和客户端中使用它们。希望这篇文章可以帮助您开始使用GraphQL,构建优秀的Web应用程序。

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


猜你喜欢

  • NodeJS 测试:学习使用 Chai 和 Mocha 进行测试

    在开发 NodeJS 应用程序时,测试是至关重要的。它可以确保代码的正确性、可靠性和可维护性,并减少错误和 bug 的数量。本文将介绍如何使用 Chai 和 Mocha 进行测试,并提供详细的指导和示...

    9 天前
  • 如何在 Vue.js 项目中使用 Material Design?

    前言 Material Design 是 Google 推出的一种标准化的设计语言,其设计风格简洁明了,体现了显著的层次感和色彩对比。在前端开发领域中,我们可以使用 Material Design 来...

    9 天前
  • SSE 与 Ajax 轮询的比较

    前言 在 Web 开发中,前后端交互是必不可少的一环。为了实时更新内容,常常需要向服务器发送请求来获取新的数据。常见的解决方案是 Ajax 轮询和 SSE(Server-Sent Events)。

    9 天前
  • Enzyme 中如何进行 React 组件的状态测试?

    Enzyme 中如何进行 React 组件的状态测试? 前言 在编写 React 应用程序时,React 组件的状态是至关重要的。这些状态可能影响您的 UI 呈现,同时也会影响用户与应用程序的交互。

    9 天前
  • Cypress 实现 E2E 测试的技巧与注意事项

    前言 随着前端应用逐渐复杂,测试变得越来越重要。E2E(End-to-End)测试是确保应用程序在各个模块和部分之间正确运行的重要组成部分。准确地说,E2E 测试是测试整个应用程序的流程——从用户启动...

    9 天前
  • 从新手到专家:使用 Promise 进行异步编程的最佳实践

    随着前端应用的日益复杂,异步编程已成为大多数前端开发人员必须掌握的技能之一。在这方面,Promise 是一种非常常用的方法,因为它提供了一种简单且强大的方式来处理异步操作。

    9 天前
  • 如何在 Fastify 中使用 Winston 日志系统

    在现代 Web 应用程序中,日志写入是十分重要的一项功能。日志记录可以帮助我们跟踪应用程序中的错误和问题,同时也可以让我们收集有用的数据以监控应用程序的性能。 Winston 是一个流行的 Node....

    10 天前
  • RxJS 应用之实现键盘搜索功能

    在前端开发中,搜索功能是一个不可或缺的功能。而实现搜索功能的方式也有很多种。本文将介绍如何使用 RxJS 实现键盘搜索功能。 RxJS 简介 RxJS 是 Reactive Extensions fo...

    10 天前
  • 如何使用 Jest 测试 Node.js 应用

    简介 在开发 Node.js 应用过程中,测试是非常重要的环节。它可以帮助我们在开发的过程中快速发现并解决问题,保证最终代码的质量。Jest 是一个流行的测试框架,它可以帮助我们轻松快速地编写自动化测...

    10 天前
  • kubectl 命令行工具教程

    kubectl 是一个命令行工具,用于与 Kubernetes 集群进行交互。它可以帮助您创建、部署和管理 Kubernetes 资源。在这篇文章中,我们将学习如何使用 kubectl 命令行工具。

    10 天前
  • PWA 应用如何处理 vibrate 导致的页面错误

    在 PWA 应用中,使用浏览器的振动 API (Vibration API)是一种常见的交互方式,可以提供更好的用户体验。但是,在某些情况下,使用该 API 可能会导致页面错误,例如在页面尚未加载完毕...

    10 天前
  • ES10 新特性之:你了解 Array.prototype.sort() 排序的冷门特性吗?

    前言 JavaScript 是一门动态语言,拥有着丰富的内建对象和方法,其中的 Array.prototype.sort() 方法在前端编程中使用场景颇多。然而,你是否听说过它的冷门特性呢?在这篇文章...

    10 天前
  • 如何使用 Chai.js 和 Mocha.js 对 Vue.js 应用程序进行单元测试

    前言 随着 Vue.js 开发使用的逐渐普及,对于 Vue.js 应用程序进行单元测试变得越来越重要。单元测试可以提高应用程序的可靠性、稳定性和可维护性。为了进行单元测试,你需要使用一些测试框架和库。

    10 天前
  • Material Design 的 4 个跨平台开发框架

    Material Design 是由 Google 推荐的一种设计风格,旨在提供一种有鲜明特色的可复用 UI 组件库,使得产品的界面设计能够统一起来,也便于用户的操作和体验。

    10 天前
  • Vue.js 3.x 中的特殊组件调用方法

    Vue.js 3.x 是目前最受欢迎的前端框架之一,其具有简单易用、轻量级、灵活性强等众多优点。在实际开发中,我们常常需要使用一些特殊的组件调用方法,以便更好地实现我们的业务逻辑。

    10 天前
  • 如何使用 Enzyme 测试 React Native 应用中的导航组件?

    React Native 是一种流行的移动应用程序开发框架,它可以帮助开发者快速构建高效的跨平台原生应用程序。React Native 应用程序中的导航组件,可以让应用程序拥有更好的用户界面和用户体验...

    10 天前
  • 如何高效地测试 RESTful API 接口?

    RESTful API 接口是前端开发中常见的一种后台数据接口,并且随着 Web 技术的不断发展,越来越多的应用程序开始采用 RESTful API 接口进行数据传输。

    10 天前
  • ECMAScript 中的函数性能优化方法

    前言 在 JavaScript 开发中,函数是非常常见的数据类型,并且扮演着非常重要的角色。优化函数的性能,有助于减少程序的开销,提高执行效率,使得应用运行更加顺畅。

    10 天前
  • 使用 Tailwind 优化 Laravel 应用

    在现代 Web 开发中,前端的实现越来越重要,因为用户越来越注重网站的外观和体验。然而,开发人员经常陷入两个相对矛盾的目标之间:快速构建前端并保持代码干净可读。在这种情况下,Tailwind 可以提供...

    10 天前
  • ES11 (2020) 中的 Promise.allSettled:如何更好地处理异步任务?

    ES11 (2020) 中的 Promise.allSettled:如何更好地处理异步任务? 随着 Web 技术的不断发展,前端开发越来越复杂,异步编程也越来越重要。

    10 天前

相关推荐

    暂无文章