GraphQL:如何使用 Siftjs 启用任意列表过滤

graphql:如何使用 siftjs 启用任意列表过滤

原创文章

很多时候,graphql schema 中有一个列表数据类型,一个常见的需求是根据一些输入变量过滤列表。过滤是一项至关重要的功能,它允许用户仅检索他们需要的数据,从而使应用程序更加高效且用户友好。

使用支持查询的外部数据源时,有许多库和资源可用于过滤,例如数据库前面的 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 <= filter.pricegreaterthan) {          return false;        }        return true;      });    },  },};

使用这种语法进行查询相当容易理解。您可以向 graphql 解析器提供一个过滤器参数,如果需要,可以为这些过滤器输入字段提供值。

这种方法的好处

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

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

这种方法的缺点

您必须在 graphql 模式和代码实现中单独定义每个过滤器。

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

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

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

通过接受 sift 查询语言作为过滤器输入进行任意过滤

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

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

您可以将上面的模式重写为以下内容:

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:如何使用 Siftjs 启用任意列表过滤的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1489968.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 12:50:39
下一篇 2025年12月19日 12:50:51

相关推荐

  • 为什么多年的经验让我选择全栈而不是平均栈

    在全栈和平均栈开发方面工作了 6 年多,我可以告诉您,虽然这两种方法都是流行且有效的方法,但它们满足不同的需求,并且有自己的优点和缺点。这两个堆栈都可以帮助您创建 Web 应用程序,但它们的实现方式却截然不同。如果您在两者之间难以选择,我希望我在两者之间的经验能给您一些有用的见解。 在这篇文章中,我…

    2025年12月24日
    000
  • 使用HTML表单GET方法创建带查询参数的动态搜索链接

    本教程详细阐述了如何在网页中,通过简单地将HTML表单的提交方法从`POST`更改为`GET`,来自动生成包含用户选择搜索条件的动态URL查询参数。这使得搜索结果页面的链接可分享、可收藏,并简化了%ignore_a_1%生成复杂URL的逻辑,后端可直接从URL中解析查询参数进行数据检索。 引言:动态…

    2025年12月23日
    000
  • Web表单提交:如何利用GET方法构建动态查询链接

    本文将指导您如何利用html表单的get方法,根据用户输入的搜索条件动态生成带有查询参数的url。当用户在表单中输入数据并提交时,get方法会自动将表单字段及其值附加到url作为查询字符串,从而创建如`/search?param1=value1&param2=value2`的链接。这对于实现…

    2025年12月23日
    000
  • Node.js中多字段多文件上传与MongoDB路径存储:Multer实践指南

    本教程详细讲解如何在node.js中使用multer处理html表单中的多字段文件上传,并将文件保存到服务器指定目录。核心内容包括multer配置,express路由集成,以及如何在控制器中正确获取上传文件信息并将其存储路径而非文件本身的数据存入mongodb,优化数据库性能和可维护性。 在现代We…

    2025年12月23日
    000
  • Node.js 多字段图片上传与 MongoDB 路径存储实践教程

    本教程详细阐述了如何在 Node.js 环境下,利用 Multer 中间件处理来自 HTML 表单的多个文件字段上传,并将图片分别存储到服务器的不同目录。更重要的是,教程纠正了直接将图片二进制数据存入 MongoDB 的常见误区,转而采用最佳实践——仅在数据库中存储图片的文件路径,从而优化数据库性能…

    2025年12月23日
    000
  • MongoDB/Mongoose中从数组中按ID删除子文档的教程

    本教程详细阐述了如何在mongodb/mongoose环境中,从一个文档的嵌套数组中,根据子文档的_id删除特定对象。我们将利用mongoose自动生成的_id字段和mongodb的$pull操作符,通过构建后端api路由,实现对特定子文档的精确、高效删除,并提供前端集成示例。 在构建复杂的应用程序…

    2025年12月23日
    000
  • 在MongoDB中通过子文档ID删除数组中的对象

    在MongoDB中处理复杂的数据结构时,我们经常会遇到需要在文档内部的数组中存储一系列子文档(或称内嵌文档)的场景。例如,在一个电影数据库中,一部电影文档可能包含一个`references`数组,其中每个元素都是一个描述电影引用的独立对象。当需要删除某个特定引用而非整个电影文档时,就需要一种精确的方…

    2025年12月23日
    000
  • MongoDB中通过子文档ID从数组删除对象的教程

    本教程详细介绍了如何在%ignore_a_1%中,利用mongoose框架从父文档的数组字段中删除特定的子文档。我们将探讨mongodb的`$pull`操作符,并提供完整的服务器端(node.js/express)和客户端(ejs)代码示例,指导你如何通过子文档的`_id`高效地移除数组中的元素,确…

    2025年12月23日
    000
  • 从MongoDB数组中按ID删除内嵌文档的教程

    本教程详细介绍了如何在mongodb中使用mongoose和`$pull`操作符,从一个文档的数组字段中删除特定的内嵌文档。我们将通过一个电影参考数据库的示例,演示如何根据内嵌文档的唯一id(`_id`)来精准定位并移除数组中的元素,确保数据管理的精确性和效率。 在构建数据库应用程序时,经常会遇到需…

    2025年12月23日
    000
  • HTML数据如何实现数据智能 HTML数据智能分析的技术架构

    实现HTML数据智能分析需构建包含采集、解析、存储、分析与可视化的闭环系统,首先通过爬虫技术获取网页数据并进行清洗标准化,接着利用DOM树分析与NLP技术提取结构化信息,随后将数据存入合适数据库或数据仓库并建立元数据管理机制,进而应用AI模型开展分类、情感分析、趋势预测与知识图谱构建等智能分析,最终…

    2025年12月23日
    000
  • HTML数据如何构建数据市场 HTML数据市场平台的架构设计

    答案是构建HTML数据市场需整合采集、管理、交易与合规体系,通过爬虫或上传获取网页数据,利用解析引擎将HTML转为结构化信息并标注元数据,依托分布式存储与版本控制保障数据可用性,建立索引分类和质量评估机制提升检索效率,通过商品发布、搜索推荐、API服务和计费系统实现数据流通,同时遵守法律规范,实施身…

    2025年12月23日
    000
  • HTML数据如何构建数据生态 HTML数据生态系统的建设思路

    HTML数据本身是网页内容的载体,但要将其转化为可用的数据资产并构建完整的数据生态系统,需要系统化的采集、处理、整合与应用流程。关键在于将静态的HTML内容动态化、结构化,并与其他数据源打通,形成可持续更新和高效利用的数据闭环。 1. 数据采集:从HTML中提取有效信息 构建HTML数据生态的第一步…

    2025年12月23日
    000
  • HTML数据如何实现分布式采集 HTML数据分布式爬虫的架构设计

    答案:构建分布式HTML采集系统需整合任务调度、去重、存储与监控模块,以Redis为核心协调任务分发与去重,通过消息队列实现负载均衡,结合布隆过滤器减少重复抓取,利用无状态工作节点支持弹性扩展,依托ZooKeeper保障高可用,并集成反爬适配与请求控制机制,确保系统稳定高效运行。 要实现HTML数据…

    好文分享 2025年12月23日
    000
  • HTML5在线如何添加实时编辑功能 HTML5在线协作工具的集成方案

    实现实时编辑需结合WebSocket与协同算法,核心是内容同步和冲突解决。2. 使用WebSocket实现低延迟通信,用户操作实时发送至服务器并广播给其他客户端。3. 冲突处理推荐CRDT或OT算法,CRDT因逻辑简单、天然无冲突更适用于现代系统。4. 集成Y%ignore_a_1%等成熟库可快速搭…

    好文分享 2025年12月23日
    000
  • 如何实现HTML在线编辑功能_HTML在线编辑功能实现方法与技术选型指南

    答案:实现HTML在线编辑需选型富文本编辑器如TinyMCE、Quill或CKEditor,通过前端获取HTML字符串并经AJAX提交,后端存储至数据库,同时使用DOMPurify防范XSS攻击,结合实时预览与样式隔离提升体验,并可扩展图片上传、代码高亮等功能。 要实现HTML在线编辑功能,核心是提…

    2025年12月23日
    000
  • 如何实现HTML在线协作编辑_HTML在线协作编辑实现技术与实时同步方案

    实现HTML在线协作编辑需选型合适编辑器并构建实时同步体系。推荐Tiptap + Yjs组合,基于CRDT模型实现无冲突数据合并,通过WebSocket或Socket.IO建立低延迟通信,配合Y-WebRTC/Y-Socket.IO完成多端状态同步,后端可用Node.js搭建中继服务器,必要时结合M…

    2025年12月23日
    000
  • Node.js中基于JWT和Cookie实现持久化登录状态管理与免登录访问

    本文详细阐述了如何在node.js应用中,利用jwt(json web tokens)和cookie实现持久化的用户登录状态管理,从而避免用户在每次访问时重复登录。通过引入一个认证中间件,我们能够有效地检查用户是否已通过有效令牌进行身份验证,并据此控制页面访问权限,实现无缝的用户体验,同时提供了登出…

    2025年12月23日
    000
  • 使用FastAPI实现POST请求后文件下载的教程

    本文详细介绍了在fastapi中处理post请求后下载文件的两种主要方法。第一种是直接使用`fileresponse`返回文件,适用于简单场景,通过设置`content-disposition`头部实现强制下载,并探讨了内存加载和流式传输大文件的替代方案。第二种是异步下载模式,通过post请求生成文…

    2025年12月23日
    000
  • Spring Boot中将特定字段映射到HTML页面:DTO与视图渲染实践

    本文将深入探讨如何在Spring Boot应用中,从后端实体中选择性地提取特定字段,并将其高效且安全地渲染到HTML页面。我们将重点介绍数据传输对象(DTO)作为最佳实践,结合Spring MVC控制器和模板引擎(如Thymeleaf),实现数据展示层与业务逻辑的解耦,并讨论其他序列化控制策略。 1…

    2025年12月22日
    000
  • Spring Boot中将后端数据特定字段映射到HTML页面教程

    本教程详细阐述了如何在Spring Boot应用中,利用Thymeleaf模板引擎将后端服务获取的数据,仅提取并展示其特定字段(如标题和描述)到前端HTML页面。通过重构控制器方法并设计相应的HTML模板,实现数据与视图的有效分离与定制化渲染,同时辨析了@JsonIgnore注解的适用场景。 问题背…

    2025年12月22日
    000

发表回复

登录后才能评论
关注微信