0

0

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

WBOY

WBOY

发布时间:2024-08-06 10:27:46

|

725人浏览过

|

来源于dev.to

转载

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 服务中的有用自动过滤的方法。即使数据不是来自某个数据库也没关系。

盛世企业网站管理系统1.1.2
盛世企业网站管理系统1.1.2

免费 盛世企业网站管理系统(SnSee)系统完全免费使用,无任何功能模块使用限制,在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源,在您使用过程中可以根据自已实际情况加以调整或修改,完全可以满足您的需求。强大且灵活 独创的多语言功能,可以直接在后台自由设定语言版本,其语言版本不限数量,可根据自已需要进行任意设置;系统各模块可在后台自由设置及开启;强大且适用的后台管理支

下载

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

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 中实现过滤的想法和经验 - 在下面的评论中分享!

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

543

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

392

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

654

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

544

2023.09.20

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
MongoDB 教程
MongoDB 教程

共17课时 | 1.7万人学习

黑马云课堂mongodb实操视频教程
黑马云课堂mongodb实操视频教程

共11课时 | 3.1万人学习

MongoDB 教程
MongoDB 教程

共42课时 | 23.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号