npm 包 graphql-batching-helpers 使用教程

随着 GraphQL 在前端应用中的广泛使用,越来越多的开发者开始使用 GraphQL 服务来获取数据。同时,为了优化性能,GraphQL 服务通常会提供 batch 查询,即将多个查询合并为单个请求并返回结果。

然而,与此同时,处理 batch 查询也变得更加复杂,需要使用更多的代码来处理请求和响应。若你使用 Node.js 开发 GraphQL 服务端,那么 npm 包 graphql-batching-helpers 可以为你提供一组方便的工具函数来处理 batch 查询。在本篇文章中,我们将详细介绍这个 npm 包的使用方法。

安装

你可以在你的项目目录中使用以下命令来安装 graphql-batching-helpers

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

然后在你的服务端代码中引入模块:

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

用法

createBatchResolver

createBatchResolver 函数可以将查询的多个 fieldName 合并为单个请求:

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

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

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

参数:

  • batchLoadFn:一个异步函数,负责将查询信息加载到批处理结果中
  • options:一个包含以下属性的对象:
    • keyArg:一个字符串,指定用于查找结果的输入参数名称
    • batchArg:一个字符串,指定批处理加载的数组输入参数名称
    • keyFn:一个该字段的输入参数转换函数,将查询的输入参数映射到它们在返回值中的位置。如果未提供,则默认情况下期望 key 值与输入参数名称相同。
    • batchFn:一个对输入参数的筛选器函数,限制查找多个请求数据(默认情况下返回数组中所有内容)。函数接受批组的查询参数和整个请求参数
  • resolver:单个 fieldName 的标准返回值,具有参数和上下文。

createBatchLoadFn

createBatchLoadFn 函数可以将查询的多个 fieldName 合并为单个请求:

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

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

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

参数:

  • batchLoadFn:一个用于将 query 中的信息加载到批处理结果中的异步函数
  • options:在没有使用 createBatchResolver 的情况下遵循
    • keyArg:一个字符串,指定用于查找结果的输入参数名称
    • keyFn:一个该字段的输入参数转换函数,将查询的输入参数映射到它们在返回值中的位置

示例

以下示例代码展示了如何使用 graphql-batching-helpers 解析一个用户的帖子和评论。用户需要首先解析所有帖子,然后解析所有评论:

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

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

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

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

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

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

在这个示例中, 通过前端传来的用户 id,我们首先通过 userBatchResolver 将用户的帖子和评论合并成单个请求,然后异步地加载帖子和评论(分别使用 postBatchResolver()commentBatchResolver()),最后将帖子和评论组装成 UserType 的返回值。

总结

使用 graphql-batching-helpers,可以轻松优化 GraphQL 查询性能。本文我们介绍了这个 npm 包的两个函数 createBatchResolvercreateBatchLoadFn,并提供了详细的使用教程和示例代码。希望这篇文章能让你更好地理解这个工具,并在实践中提高 GraphQL 的性能!

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


猜你喜欢

  • npm 包 k-kits 使用教程

    简介 k-kits 是一个针对前端开发的 npm 包,它包含了常用的工具集,使用 k-kits 可以轻松地实现诸如日期格式化、颜色转换、数据验证等常见的功能。 本文将为大家详细介绍如何使用 k-kit...

    3 年前
  • npm 包 cchm-los 使用教程

    介绍 cchm-los 是一个 npm 包,它是一个轻量级的本地存储库,用于在前端应用程序中存储和检索数据。它支持 key/value 的存储,并提供了一些有用的方法来操作存储的数据。

    3 年前
  • npm 包 wxpage-cli 使用教程

    简介 微信小程序是一种轻量级的应用程序,受到了很多开发者的关注。作为前端开发者,我们需要为小程序编写代码,并把它发布到微信平台上。在这个过程中,我们可能需要一些工具来帮助我们提高开发效率。

    3 年前
  • npm 包 @panosvoudouris/storybook-addon-blabbr 使用教程

    介绍 @panosvoudouris/storybook-addon-blabbr 是一个 Storybook 的插件,它可以让你在编写组件时,快速提交带有评论的屏幕截图到 Blabbr.app,方便...

    3 年前
  • npm 包 airman 使用教程

    前言 在前端开发中,许多常用的功能往往需要借助一些工具或者库来实现。npm 的众多包拓展了前端开发的功能的实现,而其中有一个非常实用的包,叫做 airman。 airman 是一个强大的 npm 包,...

    3 年前
  • npm 包 b-antd 使用教程

    概述 b-antd 是一个轻量级的前端 UI 库,基于 Antd 和 Vue.js。它提供了一系列的 UI 组件和工具,以帮助开发者快速构建高质量的前端应用程序。 在本篇文章中,我们将详细介绍 b-a...

    3 年前
  • npm包drivetech-icons使用教程

    在前端开发中,常常需要使用各种图标来进行界面设计。而drivetech-icons是一个优秀的图标库,提供了一系列矢量图标,可以根据业务需求进行选择和使用。为了方便使用,drivetech-icons...

    3 年前
  • npm 包 node-red-contrib-pi-omxplayer 使用教程

    前言 node-red-contrib-pi-omxplayer 是一款适用于树莓派的 npm 包,它可以让我们在 node-red 中轻松地使用 omxplayer 播放视频。

    3 年前
  • npm 包 react-autosuggest-fix-ios-scroll-issue 使用教程

    在前端领域,React 是一种非常流行的开发框架,而自动补全组件是实现自动提示搜索的一种非常实用的技术。不过,在特定情况下,在 iOS 设备上自动补全组件可能会遇到滚动问题。

    3 年前
  • npm 包 vexflow-music 使用教程

    介绍 vexflow-music 是一个基于 VexFlow 的 npm 包。VexFlow 是一个支持创建支持 JavaScript 单页应用的乐谱库。vexflow-music 完全基于 VexF...

    3 年前
  • npm 包 ember-flexberry-gis-csw 使用教程

    简介 ember-flexberry-gis-csw 是一个能够帮助你在 Ember.js 框架中使用 OGC 服务(如 CSW 服务)的插件。本插件基于 ember-flexberry-gis 库,...

    3 年前
  • npm 包 taxcloudjs 使用教程

    当我们在开发电商网站时,处理税率问题常常是一个头疼的问题。而 TaxCloud 就提供了一种可靠和简单的方式来处理税率计算问题。在这篇文章中,我将向大家介绍如何使用 npm 包 taxcloudjs ...

    3 年前
  • npm 包 graphql-auto-mutation 使用教程

    前言 GraphQL 是一种优秀的 API 查询语言,它具有强类型的定义和高效的数据传输。而graphql-auto-mutation就是一个基于GraphQL语言的自动化变异器,它提供了一种简单快捷...

    3 年前
  • npm包 native-md5 使用教程

    简介 native-md5 是一个基于 Javascript 的npm包,用于快速生成字符串的MD5校验值。相比其他 MD5 库,native-md5更快,因为它是用纯 JavaScript 实现的。

    3 年前
  • npm 包 matias2588-drag-drop 使用教程

    在前端开发过程中,经常需要实现拖拽组件,让页面更加互动,用户体验更加优秀。其中, npm 包 matias2588-drag-drop 是一个非常好用的工具,简单易上手,本文将为大家介绍如何使用。

    3 年前
  • npm 包 @numminorihsf/json2csv 使用教程

    在前端开发中我们经常需要将 JSON 数据转换为 CSV 文件进行导出,而 @numminorihsf/json2csv 是一款非常好用的 npm 包,它可以快速将 JSON 转换为 CSV 格式,节...

    3 年前
  • npm 包 @softplan/react-paginate 使用教程

    前言 随着现在前端开发越来越依赖于库和框架,所以 npm 包的使用也越来越方便和必不可少了。而本文将介绍一个个人感觉非常好用的 npm 包 @softplan/react-paginate,这是一个在...

    3 年前
  • npm 包 futura-dom 使用教程

    前端开发中,我们需要使用各种工具和库来辅助我们完成更好的网页效果或者交互。futura-dom 是一个轻量、快速的 JavaScript 库,它提供了一些常用的 DOM 操作,使我们能够更轻松地处理用...

    3 年前
  • npm 包 bootstrap-jalali-datepicker 使用教程

    前言 日期选择器在 Web 开发中是十分常见的组件。在多数情况下,我们使用的是 Gregorian(公历)日历,但在某些场景下,需要使用别的日历类型。比如在中东地区,使用的是 Jalali(波斯历)日...

    3 年前
  • npm 包 flotta-sdk 使用教程

    介绍 flotta-sdk 是一个 JavaScript 版的浏览器和 Node.js 客户端库,提供针对 Flotta API 的接口。此文档介绍如何安装和使用该 npm 包。

    3 年前

相关推荐

    暂无文章