如何使用 GraphQL 实现 Webhook?

简介

一个 Webhook 是一种让用户持续接受服务器端事件的方式,允许用户将一个 URL 注册到任何对应事件的监听器中。当事件触发时,服务器会将信息 POST 到 URL。这允许用户在这个事件发生时执行自定义行为,例如发送电子邮件、记录日志等。

GraphQL 是一个强大的查询语言,它提供了一种灵活的方式来查询、筛选和组合数据。GraphQL 自带的类型系统使其更安全,而且有利于编写可维护的代码。在 GraphQL 服务器中使用 Webhook 可以让你实时接收到来自服务器端的数据。

在本文中,我们将深入了解如何使用 GraphQL 实现 Webhook。我们会基于 Express 框架,但这些示例同样适用于其他框架和 Web 应用程序。

步骤

1. 创建 GraphQL schema

首先,我们需要创建一个 GraphQL schema。此 schema 声明了我们的 web 钩子的查询和变更,以及创建 web 钩子所需的参数。

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

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

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

我们可以看到,我们的 Webhook 类型包含一个 ID、URL 和事件数组。而且我们声明了一个查询,允许列表中所有 Webhook 被检索。

2. 创建 Resolver

接下来我们需要创建 Resolver,这是一个返回响应的函数。在这个例子中,我们将 Resolver 与数据库交互,但是这仅在示例中。调用 Webhook mutations 时,我们将把自定义事件分发到事件总线或消息队列中。此外,我们将在添加 Webhook 时生成 GUID 并发送通知以确保 URL 可用。

下面是 createWebhook 和 webhooks 查询的 Resolver:

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

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

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

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

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

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

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

3. 生成 Webhook 通知

我们已经完成了声名和Resolver,我们需要确保在每次添加 web钩子时通知 URL。我们可以做到这一点并确保在 URL 失效时进行重试。

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

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

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

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

这个函数会不断进行相同请求,尝试与 URL 通信,如果 URL 返回错误,就等待 30 秒后再重试。

4. 编写 GraphQL API

我们现在可以编写 GraphQL API 了。我们将使用 express-graphql 架设我们的 API。在这个例子中,我们将请求和答复注册到应用。

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

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

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

现在,我们可以从 GraphiQL 询问列表中的所有 Webhook,或创建新的 Webhook:

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

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

这就是使用 GraphQL 实现 Webhook 的全部内容。

总结

在本教程中,我们了解了如何使用 GraphQL 实现 Webhook。我们讨论了创建 GraphQL schema、Resolver 和生成 webhook 通知所需的步骤。最后,我们编写了 GraphQL API 以查询和推向服务器。

GraphQL 是一个优秀的工具,它提供了灵活的方法来查询和组合数据。实现 Webhook 是 GraphQL 开发中的一部分,它使得服务器和客户端都可以更高效地与对方通信。在开发过程中,要确保 URL 对错误的处理和故障转移备份。

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


猜你喜欢

  • 响应式设计中如何避免图片压缩导致的模糊问题

    随着移动设备的普及,响应式设计成为了前端开发的重点之一。在实现响应式设计时,经常会遇到图片压缩导致的模糊问题。这篇文章将介绍如何避免图片压缩导致的模糊问题,包括图片格式、尺寸、清晰度等方面的设定。

    1 年前
  • ECMAScript 2020 新特性 ——private and protected 修饰符

    前言 ECMAScript 2020 是 JavaScript 社区中的一大事件,它为我们带来了许多有用的新特性,其中之一就是 private 和 protected 修饰符。

    1 年前
  • Material Design 中使用 BottomAppBar 实现底部工具栏效果

    前言 在移动端应用程序中,底部工具栏是一个必需而有效的设计元素,提供了对用户最重要的操作的快速访问。Material Design 在这方面提供了 BottomAppBar 作为一种可复用的底部工具栏...

    1 年前
  • PM2 与 Node.js 性能优化实战

    在前端开发中,Node.js 是一个非常重要的工具,可以用它构建服务器端应用程序和命令行工具。然而,Node.js 在实际应用中经常出现性能问题,这不仅影响用户的体验,还会影响服务器的稳定性。

    1 年前
  • Mongoose 中预备钩子的用法

    在 Node.js 的开发中,Mongoose 是一个非常流行的 MongoDB 驱动程序,它提供了许多有用的功能,使我们能够更轻松地管理和维护 MongoDB 数据库。

    1 年前
  • ES7 中的 Iterator 详解与使用示例

    在 ES7 中,引入了一种新的循环机制——Iterator。这种机制可以在不了解数据结构的情况下,遍历数据。在这篇文章中,我们将深入讨论Iterator的工作原理并使用一些示例来演示它的用法。

    1 年前
  • RxJS 中的组合操作符详解

    RxJS 是一个强大的响应式编程库,提供了多种操作符帮助开发者处理异步数据流,使得代码更加简洁和易于维护。组合操作符是其中一类操作符,用于将多个数据流进行组合并输出一个新的数据流,本文将详细介绍 Rx...

    1 年前
  • TypeScript 中的命名空间和模块有什么区别?

    在 TypeScript 里面,命名空间和模块都是用来组织代码的方式。但是两者之间还是有一些细微的区别,本文将详细探讨这些区别。 命名空间 命名空间是 TypeScript 中的一个概念,用来封装代码...

    1 年前
  • Jest API 测试实战指南

    Jest 是 Facebook 开源的一个 JavaScript 测试框架,广泛应用于前端开发中。在前端开发中,我们通常需要测试大量的 API,来保证我们的应用具有良好的稳定性和可靠性。

    1 年前
  • Node.js WebSocket 的实现、使用心得

    WebSocket 是 HTML5 中的一项新技术,它提供了一种基于浏览器和服务器之间全双工通信的方式。Node.js 本身就是一个事件驱动的服务端 JavaScript 运行环境,因此它非常适合用来...

    1 年前
  • Custom Elements 在 Material Design 中的运用

    随着前端技术的不断发展,Custom Elements 成为了前端界的一个热门话题。Custom Elements 允许开发者自定义 HTML 标签,创建自己的 UI 组件,丰富页面的交互体验。

    1 年前
  • Chai 如何支持异步代码测试

    Chai 如何支持异步代码测试 使用 JavaScript 进行前端开发时,开发者通常使用测试框架来保证代码的质量,其中 Chai 是一种流行的断言库,它可以帮助我们编写更加直观和易于理解的测试断言。

    1 年前
  • SSE 实现实时数据监控及应用

    介绍 SSE(Server-Sent Events,服务器推送事件)是一种 HTML5 规范,用于在客户端与服务器之间,实现实时数据监控和推送。 与 WebSocket 相比,SSE 更加简单、轻量级...

    1 年前
  • Cypress 自动化测试常用 API 及测试实例

    随着前端开发的日益普及,自动化测试成为了保障软件质量的重要手段之一。Cypress 是一个基于 JavaScript 的端到端自动化测试框架,能够帮助我们轻松地编写可靠的自动化测试用例,并快速定位问题...

    1 年前
  • 通过使用高性能数据结构来改善 Java 程序性能

    随着互联网的发展,Java 语言在前端开发中的重要性日益凸显。因此,优化 Java 程序的性能成为了开发人员关注的焦点。其中,使用高性能数据结构是提高程序效率的重要手段。

    1 年前
  • 在 Express.js 中如何利用 Promise 来处理异步操作

    在 Express.js 中如何利用 Promise 来处理异步操作 在 Web 应用程序的开发中,经常需要处理异步操作。而在 Express.js 中,处理异步操作时可以用 Promise 来解决问...

    1 年前
  • 基于 Angular 的数据可视化方案解析

    前言 在前端开发中,数据可视化是非常重要的一部分,它可以将数据以图形化的方式展现出来,让用户更加直观地了解数据的含义。而 Angular 是目前较为流行的前端框架之一,可以帮助开发者更加快速、高效地开...

    1 年前
  • 如何在 Web Components 中使用 slot 分发内容

    Web Components 是一种新的 Web 技术标准,它由 Custom Elements、Shadow DOM 和 HTML Templates 三大部分组成。

    1 年前
  • ES10 中的 BigInt:解决 JavaScript 中的数字精度问题

    大部分开发人员都知道 JavaScript 中的数字精度问题:当我们处理大于 2 的 53 次幂的数字时,JavaScript 会失去精度,从而得到错误的结果。这是因为在 JavaScript 中,数...

    1 年前
  • CSS Reset 无效?JavaScript 或许可以帮你解决!

    在前端开发过程中,我们经常使用 CSS Reset 来消除浏览器默认样式的影响,确保不同浏览器的页面显示效果一致。不过,可能有时候你会发现 CSS Reset 并不完全起作用,这时 JavaScrip...

    1 年前

相关推荐

    暂无文章