如何在 GraphQL 中完成模糊搜索-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种新兴的数据查询语言，它可以让前端开发人员轻松地获取他们需要的数据。在 GraphQL 中完成模糊搜索是一项非常有用的技能，可以帮助我们更好地理解 GraphQL 和它的查询语言。

本文将介绍如何在 GraphQL 中完成模糊搜索，并包含详细的步骤和示例代码。

GraphQL 组件

在学习如何完成 GraphQL 中的模糊搜索之前，我们需要了解 GraphQL 的一些基本组件。

Schema（模式）：定义了我们可以查询的所有数据类型和字段。
Query（查询）：请求数据的一种方式，类似于 RESTful API 中的 GET 请求。
Mutation（变更）：修改数据的一种方式，类似于 RESTful API 中的 POST、PUT、DELETE 请求。
Subscription（订阅）：用于 WebSocket 等协议的数据实时更新。

实现模糊搜索

墨菲定律中说：“如果事情有可能出错，它就一定会出错”，在实现模糊搜索时也是同样的道理，模糊搜索需要我们保证输入查询条件的正确性，以及后端能够正确处理我们的查询。下面，我们将一步步实现 GraphQL 中的模糊搜索。

1. 创建 Schema

首先，我们需要在 GraphQL Schema 中定义我们要搜索的数据类型和字段。在这个例子中，我们将搜索书籍，所以我们会定义一个 Book 类型，包括 title 和 author 字段。 Book 类型的定义如下所示：

type Book {
  id: ID!
  title: String!
  author: String!
}

在 Query 类型中，我们将定义用于搜索书籍的 searchBooks 方法，该方法将接受一个 search 参数，该参数将使用作为查询条件，返回符合条件的书籍。 searchBooks 方法的定义如下所示：

type Query {
  searchBooks(search: String!): [Book]!
}

2. 实现 Resolver

在 searchBooks 方法中，我们将为 search 参数实现 Resolver。我们将使用 filter 函数筛选出 Books 数组中与搜索条件匹配的书籍。

// javascriptcn.com 代码示例
const books = [
  { id: '1', title: '人类简史', author: '尤瓦尔·赫拉利' },
  { id: '2', title: '红楼梦', author: '曹雪芹' },
  { id: '3', title: '西游记', author: '吴承恩' },
  { id: '4', title: '水浒传', author: '施耐庵' },
]

function searchBooks(_, { search }) {
  return books.filter(book => {
    return book.title.includes(search) || book.author.includes(search)
  })
}

const resolvers = {
  Query: {
    searchBooks,
  },
}

3. 发起查询

现在我们已经定义好 Schema 和 Resolver，现在我们就可以发起查询了。下面是一个查询的示例。

query {
  searchBooks(search: "梦") {
    title
    author
  }
}

该查询将返回一个包含所有标题或作者中包含 "梦" 的书籍的数组。查询结果如下所示：

{
  "data": {
    "searchBooks": [
      { "title": "红楼梦", "author": "曹雪芹" }
    ]
  }
}

总结

在本文中，我们了解了 GraphQL 的一些基本组件，并学习了如何在 GraphQL 中实现模糊搜索。完成模糊搜索可以帮助前端开发人员更好地理解 GraphQL 和它的查询语言，并提升我们的搜索技能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654af5cf7d4982a6eb4ea55e