Search code examples
javascriptreactjsgatsbyalgolia

problem with algolia when i try to customize searchbox component

I've added Algolia to my gatsby project it works great but when I want to custom the search box I get a problem I need some help here please my friends this my first time working with this plugin thanks for the help

When I change the search box component from "react-instantsearch-dom" to customize it gave me this error any help, please.

enter image description here

import React from "react"
import { graphql } from "gatsby"
import { InstantSearch, Hits, SearchBox } from "react-instantsearch-dom"
import algoliasearch from "algoliasearch/lite"

import SEO from "../components/seo"
import Article from "../components/article"
import {Articles} from "../style/styles"
import Layout from "../components/layout"

const Blog = () => {
  const searchClient = algoliasearch(
    "XXXXXXX",
    "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  )
  return (
    <Layout>
      <SEO title="blog Page" />
      <h1>Hello</h1>
      <InstantSearch indexName="hma" searchClient={searchClient} >
        <div className="right-panel">
          <SearchBox />
          <Articles>
              <Hits hitComponent={Article} />
          </Articles>
        </div>
      </InstantSearch>
    </Layout>
  )
}
export const query = graphql`
  query($skip: Int!, $limit: Int!) {
    blogs: allMdx(
      filter: { fileAbsolutePath: { regex: "//data/blogs//" } }
      sort: { order: ASC, fields: frontmatter___date }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            tags
            keywords
            image
            description
            author
            category
          }
        }
      }
    }
  }
`
export default Blog

import { connectSearchBox } from 'react-instantsearch-dom';

const SearchBox = ({ currentRefinement, isSearchStalled, refine }) => (
  <form noValidate action="" role="search">
    <input
      type="search"
      value={currentRefinement}
      onChange={event => refine(event.currentTarget.value)}
    />
    <button onClick={() => refine('')}>Reset query</button>
    {isSearchStalled ? 'My search is stalled' : ''}
  </form>
);

const CustomSearchBox = connectSearchBox(SearchBox);

export default CustomSearchBox;

Solution

  • In your <SearchBox> component you are exporting <CustomSearchBox>, however, you are importing <SearchBox> in your Blog template, this leads to your error because you are not passing props to your component. Since you are customizing your search component and connecting it to the <Searchbox> via connectSearchBox you need to export/import it. Just change it to:

      return (
    <Layout>
      <SEO title="blog Page" />
      <h1>Hello</h1>
      <InstantSearch indexName="hma" searchClient={searchClient} >
        <div className="right-panel">
          <CustomSearchBox />
          <Articles>
              <Hits hitComponent={Article} />
          </Articles>
        </div>
      </InstantSearch>
    </Layout>
  )
}

    Algolia's documentation lacks explanations, especially when customizing components, of the most common use-cases so you have to squeeze your brain a little to find out how to proceed.