CODEWITHSUNDEEP
reactjsexpressreduxgraphqlgatsby
Tech Basics
Tech Basics

Reputation: 27

How to replicate gatsbyjs filter and search, like the one they have for their starters page?

I want to build a search page that lets user query data based on certain criteria that they can choose from select and radio checkboxes, on behalf of which a query string is generated that gives the key/value pair for searching, the functionality is somewhat similar to what they have for their staters page.

Please check the link below to get an idea of what I am looking for:

These pages need to be shareable so query strings are essential and data fetching need be as quick as it is on their website.

From what I have understood so far, according to documentation:

I have two options:

For a run time, I think, I would need to use redux-thunk to make network calls to an ExpressJs, MongoDB REST API but my concern is that it can be slow.

For build time, I am sure on how can I source data from Graphql queries, and render them.

Any help on this will be great. Thanks

Upvotes: 0

Views: 254

Answers (1)

Robin Métral
Robin Métral

Reputation: 3208

The Gatsby Starters Library is parsing the URL param in this urlToSearch method in the PluginSearchBar component:

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 ``
}

Mainly, it uses the Gatsby location prop (from @reach/router under the hood) to get the search keyword from the query string.

Search is then implemented client-side using Algolia's react-instantsearch library. You can find the complete implementation in plugin-searchbar-body.js.

There are naturally other ways to implement search. A good place to start for inspiration is Gatsby's Adding Search documentation.

Upvotes: 1

Related Questions