背景
GraphQL 是一种用于 API 的查询语言,让客户端能够准确地获取其需要的数据,而不是像 RESTful API 一样获取整个资源。GraphQL 的查询有一个很重要的特性,那就是能够过滤查询结果。然而,在使用 GraphQL 过程中,我们可能会遇到被过滤的查询返回结果为空的问题。
问题描述
假设我们有一个图书馆应用,其中有两个 GraphQL 查询:
-- -------------------- ---- ------- ----- --------------------------- -------- - ------------------ ------------ - ---- ----- - ----- ----- - - - ----- ----------------------------------- -------- ---------- ------- - ------------------ ------------ - ---- --------------- ---------- - ----- ----- - - -
第一个查询返回一个作者及其所有书籍,第二个查询添加了一个名为 maxPrice
的参数,用于过滤价格高于该值的书籍。
如果作者没有任何书籍价格高于 maxPrice
,第二个查询返回的 books
数组为空。
{ "data": { "authorByName": { "name": "George Orwell", "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