解决 GraphQL 中被过滤的查询返回的问题

背景

GraphQL 是一种用于 API 的查询语言，让客户端能够准确地获取其需要的数据，而不是像 RESTful API 一样获取整个资源。GraphQL 的查询有一个很重要的特性，那就是能够过滤查询结果。然而，在使用 GraphQL 过程中，我们可能会遇到被过滤的查询返回结果为空的问题。

问题描述

假设我们有一个图书馆应用，其中有两个 GraphQL 查询：

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

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

第一个查询返回一个作者及其所有书籍，第二个查询添加了一个名为 maxPrice 的参数，用于过滤价格高于该值的书籍。

如果作者没有任何书籍价格高于 maxPrice，第二个查询返回的 books 数组为空。

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

这会导致客户端在某些情况下无法正确处理返回结果。

解决方案

为了解决这个问题，我们可以在 GraphQL 查询中添加一个虚拟字段，该字段将返回用于筛选结果的参数。

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

添加的 filter 字段只有在 maxPrice 参数存在时才包含在最终结果中。这样做的好处是，客户端可以始终从结果中获取 filter 字段，并据此判断是否需要显示结果。

接下来，我们需要在服务端实现 filter 字段的解析器，它将返回用于过滤结果的参数。在这个例子中，我们使用了 Apollo Server：

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

在 Author 类型的解析器中，我们实现了 books 和 filter 两个字段的解析，books 会根据 maxPrice 参数过滤结果，filter 则会返回 maxPrice 值。

效果

现在，我们重新执行查询 AuthorAndBooksFiltered，即使过滤结果为空，也会包含一个 filter 字段。

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

客户端可以使用这个 filter 字段来判断是否需要显示结果。例如，在 React 组件中：

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

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

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

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

总结

GraphQL 的过滤查询特性非常有用，但当过滤结果为空时，客户端可能无法正确处理结果。为了解决这个问题，我们可以添加一个虚拟字段返回用于筛选结果的参数，从而让客户端始终能够正确处理结果。这个方法也可以应用到其他类似的问题中。

示例代码

本文示例代码基于 Apollo Server 和 React。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64cdb0371519ea946c17eb79

阅读全文

猜你喜欢

  • 解决 RESTful API 中遇到的 502 错误

    在前端开发中，我们经常会使用 RESTful API 来获取数据，但有时候会遇到 502 错误，让我们感到困惑。这篇文章将帮助你理解 502 错误，和如何解决它，让你能够更好地调试和优化你的应用程序。

    1 年前
  • CSS Flexbox 布局的兼容性问题及解决办法

    CSS Flexbox 布局是一种强大的 CSS 布局方式，它可以帮助前端开发者轻松地对页面进行布局，实现灵活且响应式的设计。然而，由于不同浏览器的实现方式不同，在使用 Flexbox 布局时会遇到一...

    1 年前
  • 如何使用 Headless CMS 实现 ERP 系统？

    作为一名前端开发者，你可能会遇到需要搭建一个企业资源计划（ERP）系统的需求。ERP 系统是一种集成管理的工具，它可以帮助企业管理各项业务活动。这些活动包括：财务、人力资源、生产、存货、采购等等。

    1 年前
  • 解决 babel-loader 升级后在 webpack2 中出现的错误

    1. 问题描述 最近在使用 webpack2 进行前端项目开发时，遇到了一个使用 babel-loader 的错误。错误信息如下： ----- -- -------------- ------ ---...

    1 年前
  • Sequelize ORM 如何自动识别表的名称

    在使用 Sequelize ORM 进行数据库操作时，我们通常需要定义模型(Model)来表示数据库表。而在 Sequelize 中，模型通常是通过引入 sequelize 模块并使用 define ...

    1 年前
  • 使用 Node.js 和 MongoDB 构建一个简单的 CRUD 应用程序

    前言 Node.js 是一个强大的 JavaScript 运行时环境，广泛应用于 Web 服务器、命令行工具等领域。而 MongoDB 是一个流行的 NoSQL 数据库，经常被用于处理海量数据。

    1 年前
  • Serverless 架构对传统云计算领域的影响

    传统云计算架构需要用户自己管理虚拟机、操作系统和应用程序等各种资源，这些可能会浪费大量时间和金钱。随着 Serverless 架构的出现，开发人员可以更快地构建应用并更有效地利用资源。

    1 年前
  • RxJS 中 debounceTime 操作符解析

    什么是 RxJS？ RxJS 是一种使用观察者模式实现异步数据流的 JavaScript 库。它提供了丰富的操作符和工具，可以帮助我们更好地处理异步数据。 debounceTime 操作符的作用 de...

    1 年前
  • 处理 Jest 测试运行缓慢的实用技巧

    背景 Jest 是一个优秀的 JavaScript 测试框架，但是它有个缺点就是测试运行速度较慢，尤其是在较大的项目中。测试运行缓慢不仅会影响开发者的开发效率，也会使测试成为一个瓶颈，从而影响开发周期...

    1 年前
  • ESLint 报错：“'import' and 'export' may only appear at the top level”

    如果你曾经用过 ECMAScript 6 或更高版本的 JavaScript，你一定会接触到 import 和 export 这两个关键字。它们可以让你在你的代码中引入和导出模块，从而帮助你更好地组织...

    1 年前
  • Webpack 参考手册

    Webpack 是一个强大的前端打包工具，通过将多个文件合并成最终的单一文件，提高了前端开发的效率和可维护性。本手册将提供详细的指导和深度学习，帮助你更好地使用 Webpack。

    1 年前
  • TypeScript 中如何进行错误处理和调试

    TypeScript 是一种静态类型的编程语言，它可以提前捕捉许多错误。但是即使在 TypeScript 开发中，也难免会出现错误。因此，进行错误处理和调试是非常重要的。

    1 年前
  • ECMAScript 2020 中的 nullish 合并操作及其实际使用

    ECMAScript 2020 是 JavaScript 编程语言的最新标准，它引入了一项新的语法特性：nullish 合并操作符（nullish coalescing operator）。

    1 年前
  • 在使用 Chai.js 测试异步代码时如何正确处理 done() 函数

    在编写前端测试代码时，经常需要测试异步代码。Chai.js 是一个流行的行为驱动测试（BDD）和测试驱动测试（TDD）框架，它提供了一些有用的方法来测试异步代码。这篇文章将介绍如何使用 Chai.js...

    1 年前
  • PM2 常用命令详解

    什么是 PM2？ PM2 是一个常用的 Node.js 进程管理工具，可以帮助我们管理应用程序（如 Web 应用程序）的生命周期。它可以做到以下几点： 管理进程的启动、停止、重启等操作。

    1 年前
  • Tailwind CSS 样式被重置的问题及解决方法

    Tailwind CSS 是一种快速创建现代化网站的 CSS 框架，因其强大的样式定制和响应式设计而备受欢迎。然而，在使用 Tailwind CSS 过程中，一些用户遇到了样式被重置的问题，这个问题的...

    1 年前
  • 深入理解 Mongoose 的 populate 方法

    深入理解 Mongoose 的 populate 方法 在 MongoDB 中，数据的存储是以文档的形式进行，可以将它想象成一个大型的 JavaScript 对象。

    1 年前
  • 在 Kubernetes 中解决 DNS 缺陷问题

    Kubernetes 是一个非常流行的容器编排平台，它允许用户在集群中高效的部署和管理容器应用。但是，在使用 Kubernetes 时，可能会遇到某些 DNS 缺陷导致服务之间无法正常通信。

    1 年前
  • 关于 Vue-Router 嵌套路由的使用方法和解决不同页面间过渡效果不同的坑

    Vue-Router 是 Vue.js 官方的路由管理器。它可以帮助我们更好地组织和管理我们的前端应用程序中的各个页面之间的跳转。Vue-Router 提供了许多不同的路由模式和配置选项，其中包括嵌套...

    1 年前
  • 无障碍设计之屏幕阅读器技术

    在今天越来越注重用户体验的时代，无障碍设计已经成为一项不可或缺的技术要求。为了能够让更多的人无障碍地接触到网络世界，在前端开发中加入屏幕阅读器技术已经成为一项必不可少的技术。

    1 年前

相关推荐

    暂无文章