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

阅读时长 10 分钟读完

背景

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

问题描述

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

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

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

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

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

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

解决方案

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

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

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

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

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

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

效果

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

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

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

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

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

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

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

总结

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

示例代码

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64cdb0371519ea946c17eb79

纠错
反馈