Как скопировать фильтр gatsby js и выполнить поиск, как тот, который у них есть для начальной страницы?

Question

Я хочу создать страницу поиска, которая позволяет пользователям запрашивать данные на основе определенных критериев, которые они могут выбирать из переключателей select и radio, от имени которых генерируется строка запроса, которая дает пару ключ / значение для поиска, функциональность что-то похожее на то, что есть у них на странице для начинающих.

Пожалуйста, перейдите по ссылке ниже, чтобы получить представление о том, что я ищу:

• https://www.gatsbyjs.org/starters/?v=2 <---- строка запроса. </li>

Эти страницы должны быть доступны для совместного использования, поэтому строки запроса имеют важное значение, а выборка данных должна быть такой же быстрой, как и на их веб-сайте.

Из того, что я понял до сих пор, согласно документации:

• https://www.gatsbyjs.org/docs/data-fetching

У меня есть два варианта:

• Получение данных во время сборки
• Получение данных во время выполнения

Я думаю, что во время выполнения мне нужно будет использовать redux-thunk, чтобы совершать сетевые вызовы на ExpressJs, API REST MongoDB, но я обеспокоен тем, что он может быть медленным.

Что касается времени сборки, я уверен в том, как я могу получать данные из запросов Graphql и обрабатывать их.

Любая помощь по этому вопросу будет отличной. Спасибо

Answer 1

Библиотека Gatsby Starters анализирует параметр URL в этом urlToSearch методе в компоненте 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 prop (из @reach/router под капотом), чтобы получить ключевое слово для поиска из строки запроса.

Затем поиск выполняется на стороне клиента с использованием библиотеки response-instantsearch Algolia. Вы можете найти полную реализацию в plugin-searchbar-body. js.

Естественно, есть другие способы реализовать поиск. Хорошее место для вдохновения - документация Гэтсби Добавление поиска .