using Elasticsearch and ReactiveSearch with Gatsby

vermario commented 5 years ago

Summary

We would like to use https://opensource.appbase.io/reactivesearch/ as a UI for elasticsearch in certain pages of the site, but this fails at the moment (I suspect) because of server side rendering

Relevant information

To build interactive listings in category pages in our project, we would like to use elasticsearch + reactive search to provide a UI to filter items, change the order etc.

We are using the standard gatsby starter.

As for indexing, we have added the necessary code to index what we are interested in during the build process. Now we have to figure out the actual UI for searching.

I added the reactiveSearch component as usual and as detailed in their docs: https://opensource.appbase.io/reactive-manual/getting-started/reactivesearch.html

This has worked before in a small react app without server side rendering. However when I execute this with gatsby develop I get this error:

ReactiveSearch has some instructions about using server side rendering here: https://opensource.appbase.io/reactive-manual/advanced/ssr.html

It mentions next.js but nothing about gatsby.

I thought of opening this issue because the gatsby docs here: https://www.gatsbyjs.org/docs/adding-search/ mention reactiveSearch as a possible way of using elasticsearch in gatsby, but maybe some additional setup is included, and it would be a possible good addition to the docs?

(we looked into lunr and the available plugins, but the search we need to make is a bit more advance, so I think we have to stay with elasticsearch).

Thank you in advance to anyone that has any pointer in solving this. Or, if there is a better approach, I would be very grateful and interested to hear about it.

Environment (if relevant)

System: OS: macOS Sierra 10.12.6 CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz Shell: 2.7.1 - /usr/local/bin/fish Binaries: Node: 8.12.0 - /usr/local/opt/node@8/bin/node Yarn: 1.12.1 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/opt/node@8/bin/npm Browsers: Chrome: 71.0.3578.98 Firefox: 65.0 Safari: 12.0.2 npmPackages: gatsby: ^2.0.63 => 2.0.63 gatsby-image: ^2.0.22 => 2.0.22 gatsby-plugin-manifest: ^2.0.11 => 2.0.11 gatsby-plugin-offline: ^2.0.18 => 2.0.18 gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4 gatsby-plugin-sharp: ^2.0.14 => 2.0.14 gatsby-plugin-styled-components: ^3.0.4 => 3.0.4 gatsby-source-drupal: ^3.0.13 => 3.0.13 gatsby-source-filesystem: ^2.0.11 => 2.0.11 gatsby-transformer-sharp: ^2.1.9 => 2.1.9 npmGlobalPackages: gatsby-cli: 2.4.3

jonniebigodes commented 5 years ago

@vermario i've picked up on your issue and i have a quasi ready example for you. I'm just running some tests on it and see if everything works ok. And then i'll share an answer for you, sounds good?

vermario commented 5 years ago

@jonniebigodes thank you! That would be great!

jonniebigodes commented 5 years ago

@vermario i've checked the documentation and the example mentioned, namely this one.

And also the ssr example, that uses next.js.

I've created a repository in here to host the code, please be advised that this is a bare minimum example for both to "play nice" with each other. Also a live version can be found here. As a side note, the code in there could be improved to allow a better gatsby and reactivesearch integration. With that out of the way, onto the actual process.

Added reactivesearch version 2.5.1, not the alpha that was published to the npm registry, that alpha version started throwing out errors left and right with gatsby, which needs some more detective work to have it working correctly.

Moved onto creating a component called SearchReactive as a full blown class component. As the getInitialProps function does not exist in gatsby, then the code related to that was moved to the lifecycle method componentDidMount(), resulting in the following:


import React, { Component } from 'react'
import {
ReactiveBase,
CategorySearch,
SingleRange,
ResultCard,
} from '@appbaseio/reactivesearch'
import initReactivesearch from '@appbaseio/reactivesearch/lib/server'
import './reactivesearcher.css'
const reactiveSearchSettings = {
settings: {
app: 'carstore-dataset',
credentials: '4HWI27QmA:58c731f7-79ab-4f55-a590-7e15c7e36721',
},
dataSearcher: {
componentId: 'searchbox',
dataField: 'model',
categoryField: 'brand.keyword',
placeholder: 'Search for cars',
className: 'search',
highlight: true,
},
searchSingleRange: {
componentId: 'ratingsfilter',
title: 'Filter by ratings',
dataField: 'rating',
data: [
  { start: '4', end: '5', label: '4 stars and up' },
  { start: '3', end: '5', label: '3 stars and up' },
  { start: '2', end: '5', label: '2 stars and up' },
  { start: '1', end: '5', label: 'see all ratings' },
],
defaultSelected: '4 stars and up',
},
resultsCard: {
className: 'right-col',
componentId: 'result',
title: 'Results',
dataField: 'model',
from: 0,
size: 6,
pagination: true,
onData: data => ({
  image: data.image,
  description: (
    <div>
      <div className="price">${data.price}</div>
      <p className="info">
        {data.brand} · {data.model}
      </p>
      <p>
        year:{data.year} . {data.fuelType}
      </p>
    </div>
  ),
}),
react: { and: ['searchbox', 'ratingsfilter'] },
innerClass: {
  resultStats: 'result-stats',
  list: 'list',
  listItem: 'list-item',
  image: 'image',
},
},
}

class SearchReactive extends Component { state = { reactivedata: null, } async componentDidMount() { const result = await initReactivesearch( [ { ...reactiveSearchSettings.dataSearcher, type: 'CategorySearch', source: CategorySearch, }, { ...reactiveSearchSettings.searchSingleRange, type: 'SingleRange', source: SingleRange, }, { ...reactiveSearchSettings.resultsCard, type: 'ResultCard', source: ResultCard, }, ], null, reactiveSearchSettings.settings ) this.setState({ reactivedata: result }) } render() { const { reactivedata } = this.state return (

} }

export default SearchReactive


- And finally the index page code was changed a bit and now looks like the following:
```javascript
import React from 'react'
import Layout from '../components/layout'
import SEO from '../components/seo'
import SearchReactive from '../components/SearchReactive'

const IndexPage = () => (
  <Layout>
    <SEO title="Home" keywords={['gatsby', 'application', 'react']} />
    <h1>Ahoy hoy</h1>
    <p>Gatsby working with reactive search.</p>
    <SearchReactive />
  </Layout>
)

export default IndexPage

I'm going to do a bit more of research on this and see if i can better integrate both of them. Hope that my comment can solve your issue, or at least point you in the right direction.

vermario commented 5 years ago

@jonniebigodes Thank you SO MUCH for your help, I think this way we will be able to build what we need. So the trick was in componentDidMount.

Thanks again!

jonniebigodes commented 5 years ago

@vermario no need to thank. Glad that i could help out and point you in the right direction. And like i said in the meantime i'm going to do some more research on this and see if i can better integrate both of them

sidharthachatterjee commented 5 years ago

Thank you @jonniebigodes

Glad you got this to work @vermario

We would love to accept a PR adding more details to docs about using ReactiveSearch with Gatsby if you're interested 🙂

jonniebigodes commented 5 years ago

@sidharthachatterjee i'm currently in the process of implementing and documentating a "gatsbier" way (pardon the bad pun) of integrating both and a pull request will created soon.

sidharthachatterjee commented 5 years ago

Sounds great @jonniebigodes

Closing this for now since the issue is resolved

KalleVuorjoki commented 5 years ago

I'd love to see documentation on this. @jonniebigodes example works nicely with Reactivesearch 2.x, but npm install gives Reactivesearch 3.x. where things have changed and example does not work out-of-box.

jonniebigodes commented 5 years ago

@KalleVuorjoki for now if you don't mind use the version i provided in my reproduction. Namely 2.5.1 not the release candidate that is publicly available in the registry. I've not forgotten about this. But it was put on the "back burner" for some time. I'll see if can muster some time to catch up on the changes they made and see if i can create a reproduction based on the new version.

Jscott388 commented 5 years ago

Any update on 3.x version?

multidis commented 5 years ago

Regarding v3: as of reactivesearch 3.0.0-rc.15 this approach seems to work except for sorting (not part of the @jonniebigodes demo). I did some edits to make it v3 compatible here.

With sorting it fails

Hoping somebody could help resolve that part.

jonniebigodes commented 5 years ago

@multidis like i said on my previous comment, i would advise going with version 3 until it's actually a stable package. I've been fiddling with version 3 and i'm having issues "left and right" (pardon the bad pun), getting it to work properly. They have made some breaking changes and they are not documented still.

multidis commented 5 years ago

For those who are still watching: reactivesearch v3.0.1 stable is out with the updated docs https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/

daiky00 commented 4 years ago

@jonniebigodes Any implementation example with version 3?

jonniebigodes commented 4 years ago

@daiky00 sorry for the delay in answering. I've been tinkering with it once it hit a stable version on and off and forgot to update the repo or post something in here regarding it. The repo and a deployed version . Some caveats, as i'm using the same api keys used by the documentation they are imposing a rate limit so with that some request/queries not not work out of the bat. I'm going to make some changes in the coming future and test out a few things to see if a couple of questions left answered with the other major release are now fixed.

gatsbyjs / gatsby