GatsbyJS：基于降价文件搜索答案

【问题标题】：GatsbyJS: Search based on markdown filesGatsbyJS：基于降价文件搜索
【发布时间】：2019-07-30 08:50:30
【问题描述】：

???? 谁能提供一些提示如何用 GatsbyJS 解决以下问题：我有一个页面，通过这个 GraphQL 查询列出了项目的所有降价文件：

query ListQuery {
    allMarkdownRemark(sort: {fields: frontmatter___date, order: DESC}) {
        edges {
            node {
                id
                html
                frontmatter {
                    date(formatString: "DD.MM.YY")
                    docs
                    path
                    tag
                    title
                }
            } 
        }
    }
}

如果我是对的，则无法设置绑定到搜索输入字段的动态过滤器。

后来我发现了这个：https://www.gatsbyjs.org/docs/adding-search-with-js-search/ 我认为 js-search 可能是解决方案，但我需要一个大的 .json 文件。问题：使用降价文件更舒服。所以这看起来也不是正确的解决方案。 ????

感谢您的帮助！

【问题讨论】：

标签： javascript graphql gatsby

【解决方案1】：

看来我回答这个问题很晚了，但它可能对其他寻找它的人有所帮助。

在向 gatsbyjs 网络应用添加搜索之前，您应该对 gatsby 如何构建应用有所了解。你可以在docs查看。

要添加搜索，您首先需要创建所有降价文件的索引。要创建索引，您可以手动完成，也可以使用 aloglia、elastic search 或 lunr.js 等搜索引擎。如果您希望一切都易于管理，您可以使用 aloglia，它有一个免费搜索上限。如果你想不花钱就去lunrjs。

这些搜索引擎会做的是，他们将在 graphql 数据层之上创建一个数据层，该数据层可以在运行时使用。然后，您可以创建可用于查询应用程序中的帖子的节点。This blogpost 解释了在 gatsby 中设置搜索的详细信息。

【讨论】：

【解决方案2】：

引用the docs

在我们完成添加客户端搜索所需的步骤之前你的 Gatsby 网站，你应该熟悉 Gatsby 的基础知识

Markdown 和 GraphQL 在构建阶段，在创建静态网站期间使用。

在运行阶段，在客户端搜索期间，您无权访问 GraphQL/Markdown。它们在用户与您的网站交互期间不存在。

所以对于客户端搜索，您应该创建need a big .json file。如果您遵循文档，那对您来说不会有问题。

【讨论】：