时间戳

首页 > 解决方案 > 如何复制 gatsbyjs 过滤器和搜索，就像他们的起始页一样？

reactjs - 如何复制 gatsbyjs 过滤器和搜索，就像他们的起始页一样？

问题描述

我想建立一个搜索页面，让用户根据他们可以从选择和单选复选框中选择的某些条件查询数据，代表它生成一个查询字符串，提供用于搜索的键/值对，功能有点相似到他们的状态页面。

请检查下面的链接以了解我在寻找什么：

这些页面需要可共享，因此查询字符串是必不可少的，并且数据获取需要像在他们的网站上一样快。

据我所知，根据文档：

我有两个选择：

对于运行时，我认为我需要使用 redux-thunk 对 ExpressJs、MongoDB REST API 进行网络调用，但我担心它可能会很慢。

对于构建时间，我确信如何从 Graphql 查询中获取数据并渲染它们。

对此的任何帮助都会很棒。谢谢

标签： reactjsexpressreduxgraphqlgatsby

解决方案

Gatsby Starters Library在组件的这个urlToSearch方法中解析 URL 参数PluginSearchBar：

urlToSearch = () => {
  if (this.props.location.search) { // get the params from the location prop
    const match = /(\?|&)=([^&]+)/.exec(this.props.location.search)
    if (match) return decodeURIComponent(match[2])
    return ``
  }
  return ``
}

主要是，它使用 Gatsby location prop（从@reach/router底层）从查询字符串中获取搜索关键字。

然后使用 Algolia 的react- instantsearch 库在客​​户端实现搜索。你可以在plugin-searchbar-body.js中找到完整的实现。

自然还有其他实现搜索的方法。Gatsby 的添加搜索文档是一个很好的灵感来源。

推荐阅读