搜索
首页web前端js教程GraphQL:如何使用 Sift.js 启用任意列表过滤。

GraphQL: How to Enable Arbitrary List Filtering with Sift.js.

原创文章

通常,您的 GraphQL 模式中存在一个列表数据类型,并且常见的要求是根据某些输入变量过滤列表。过滤是一项至关重要的功能,它允许用户仅检索他们需要的数据,从而使应用程序更加高效且用户友好。

使用支持查询的外部数据源时,有许多库和资源可用于过滤,例如数据库前面的 Prisma。然而,当编写您自己的返回 GraphQL 对象列表的解析器时,抽象出过滤逻辑并使其可在您的架构中重用将是有益的。

让我们考虑一个用于书籍列表的简单 GraphQL 模式:

type Book {
  title: String
  price: Float
}

type Query {
  books: [Book]
}

下面的解析器从简单列表中返回书籍列表。这可以是任何数据源。

const books = [
  { title: 'The Great Gatsby', price: 10.99 },
  { title: 'To Kill a Mockingbird', price: 12.99 },
  // more books
];

const resolvers = {
  Query: {
    books: () => books,
  },
};

对于我们的示例,假设用户需要根据以下条件过滤书籍:

  • 标题以什么开头

  • 价格在一定范围内,小于和大于

如何在 GraphQL 中定义单独的过滤器和逻辑

实现过滤器的一种方法是单独定义每个过滤器。这涉及对 GraphQL 架构输入类型进行更改并在解析器逻辑中实现过滤器。

您可以更新架构以包含这些新的输入变量,从而允许您表达允许的过滤器以及使用它们所需的参数:

input BookFilter {
  titleStartsWith: String
  priceLessThan: Float
  priceGreaterThan: Float
}

type Query {
  books(filter: BookFilter): [Book]
}

更新后的解析器可能如下所示:

const resolvers = {
  Query: {
    books: (_, { filter }) => {
      return books.filter(book => {
        if (filter.titleStartsWith && !book.title.startsWith(filter.titleStartsWith)) {
          return false;
        }
        if (filter.priceLessThan !== undefined && book.price >= filter.priceLessThan) {
          return false;
        }
        if (filter.priceGreaterThan !== undefined && book.price 



<p>使用这种语法进行查询相当容易理解。您可以向 GraphQL 解析器提供一个过滤器参数,并根据需要为这些过滤器输入字段提供值。</p>

<h3>
  
  
  这种方法的好处
</h3>

<p>仅支持您希望允许用户使用的过滤器。</p>

<p>这是由 GraphQL 类型验证系统支持的,该系统不允许进行超出允许范围的过滤。后端的解析器代码本身甚至不支持不允许的过滤器。</p>

<h3>
  
  
  这种方法的缺点
</h3>

<p>您必须在 GraphQL 模式和代码实现中单独定义每个过滤器。</p>

<p>您无法在不同的 GraphQL 对象之间轻松共享此代码。如果您还有视频并想要过滤它们,则需要一个新的视频过滤输入类型。 (您可以概括为过滤器输入,但书籍和视频不会有所不同。)</p>

<p>如果需要新的过滤器,则需要更改代码以添加到输入过滤器类型并更新解析器代码以支持它。</p>

<p>例如,如果您想过滤在任何地方(而不仅仅是开头)包含子字符串的标题,这是一个新的过滤器输入和解析器中的新实现。</p>

<h2>
  
  
  通过接受 Sift 查询语言作为过滤器输入进行任意过滤
</h2>

<p>我发现的一个有趣的库 sift,允许使用 MongoDB 查询语法轻松过滤 JavaScript 中的任意数据列表。我认为这真的很酷,可以在 GraphQL 中启用任意过滤。无头 CMS Strapi 之前使用 Sift,然后转向更自定义的解决方案来启用其 GraphQL 查询!</p>

<p>我对此感到最兴奋,因为它似乎是一种在某种程度上重现一些 ORM 和提供商已内置到其 GraphQL 服务中的有用自动过滤的方法。即使数据不是来自某个数据库也没关系。</p>

<p>您可以将上述架构重写为以下内容:<br>
</p>

<pre class="brush:php;toolbar:false">input SiftQueryInput {
  field: String
  filter: String
}

type Query {
  books(filter: [SiftQueryInput]): [Book]
}

解析器:

const sift = require('sift').default;

const resolvers = {
  Query: {
    books: (_, { filter }) => {
      const siftQuery = filter.reduce((acc, { field, filter }) => {
        acc[field] = JSON.parse(filter);
        return acc;
      }, {});
      return books.filter(sift(siftQuery));
    },
  },
};

那么这是如何运作的呢?假设您要查询所有以“The”开头的书籍。您可以执行此查询:

query {
  books(filter: [{ field: "title", filter: "{\"$regex\": \"^The\"}" }]) {
    title
    price
  }
}

使用这些变量:

{
  "filter": [
    { "field": "title", "filter": "{\"$regex\": \"^The\"}" }
  ]
}

正如预期的那样,您将返回过滤为“了不起的盖茨比”的列表!

另一个例子,如果您想过滤包含字母“i”并且价格大于 10 的书籍,您可以提供以下变量:

{
  "filter": [
    { "field": "title", "filter": "{\"$regex\": \"i\"}" },
    { "field": "price", "filter": "{\"$gt\": 10}" }
  ]
}

然后你就拿回了《杀死一只知更鸟》这本书!

请注意,我们不必更改查询、架构或解析器中的任何内容!我们能够表达全新的过滤器,而这些过滤器在其他方法中需要新的过滤器输入,只需使用 Sift 查询语法在变量中即可!

这种方法的好处

Sift 支持的任何过滤逻辑现在都可以在您的查询中表达。如果不同的过滤器出现新的需求,则不需要使用新的输入类型和解析器逻辑进行更新。

相同的过滤方法可以用于所有类型!仅接受 SiftQueryInputs 列表,以及处理这些 Sift 输入并将它们应用到对象列表的后端实现不会因列表类型而改变。

如果对象的形状发生变化或嵌套,这可以轻松支持对象。 SiftQueryInput.field 的类型为 String,因为您可以使用点语法访问对象上的嵌套属性。

例如,可以通过包含此 Sift 查询进行过滤: { field: 'author.name.last', filter: JSON.stringify({ $eq: "Orwell" }) }

缺点和注意事项

当然,这是使用字符串来表达 Sift 查询语言,这很容易出错——因此使用这种方法需要仔细的验证和错误处理。

通过使用通用的 SiftQueryInput 类型来收集用户的过滤器,您将失去 GraphQL 的类型安全性 - 它无法验证该字段是否存在或您的过滤器是否以正确的方式使用该字段。

列表的数据需要在过滤解析器运行时完全解析。它无法访问查询中尚未解决的字段。但对于数据不是来自具有自己查询的数据库(可能来自 JSON 文件或 REST API 响应)的情况,这无论如何都是可能的。

未来的改进

我认为在这种情况下失去 GraphQL 安全性是一种耻辱。可以在构建时将可能的 Sift 查询选项编译到 GraphQL 模式中,因此语法更相似地反映 Sift 的实际情况,而不依赖于字符串。

结论

总之,在 GraphQL 中使用 Sift.js 提供了一种灵活而强大的方法来实现任意过滤。它为列表中的纯 JavaScript 对象带来了通常为 ORM 和某些 GraphQL 供应商保留的自动查询优势,无论其来源如何。

通过在 GraphQL 服务器中提供通用过滤“引擎”,以及可应用于任何类型的灵活查询语言,将过滤逻辑转移到 GraphQL 客户端。这使得过滤器的迭代速度更快,并在过滤器中实现更大程度的表达。

我很想听听您在 GraphQL 中实现过滤的想法和经验 - 在下面的评论中分享!

以上是GraphQL:如何使用 Sift.js 启用任意列表过滤。的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在JavaScript中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

jQuery检查日期是否有效jQuery检查日期是否有效Mar 01, 2025 am 08:51 AM

简单JavaScript函数用于检查日期是否有效。 function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //测试 var

jQuery获取元素填充/保证金jQuery获取元素填充/保证金Mar 01, 2025 am 08:53 AM

本文探讨如何使用 jQuery 获取和设置 DOM 元素的内边距和外边距值,特别是元素外边距和内边距的具体位置。虽然可以使用 CSS 设置元素的内边距和外边距,但获取准确的值可能会比较棘手。 // 设置 $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); 你可能会认为这段代码很

10个jQuery手风琴选项卡10个jQuery手风琴选项卡Mar 01, 2025 am 01:34 AM

本文探讨了十个特殊的jQuery选项卡和手风琴。 选项卡和手风琴之间的关键区别在于其内容面板的显示和隐藏方式。让我们深入研究这十个示例。 相关文章:10个jQuery选项卡插件

10值得检查jQuery插件10值得检查jQuery插件Mar 01, 2025 am 01:29 AM

发现十个杰出的jQuery插件,以提升您的网站的活力和视觉吸引力!这个精选的收藏品提供了不同的功能,从图像动画到交互式画廊。让我们探索这些强大的工具: 相关文章: 1

HTTP与节点和HTTP-Console调试HTTP与节点和HTTP-Console调试Mar 01, 2025 am 01:37 AM

HTTP-Console是一个节点模块,可为您提供用于执行HTTP命令的命令行接口。不管您是否针对Web服务器,Web Serv

自定义Google搜索API设置教程自定义Google搜索API设置教程Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

jQuery添加卷轴到DivjQuery添加卷轴到DivMar 01, 2025 am 01:30 AM

当div内容超出容器元素区域时,以下jQuery代码片段可用于添加滚动条。 (无演示,请直接复制到Firebug中) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器