I am unable to use the Algolia widgets

Question

Am using Algolia on my React App to do an instant search It works fine to get the Hits and results, but to make it a more friendly user experience by adding the Sort-By(price: asc or desc) its doesn't work, I used the Sort-By component provided by Algolia.

Here is the code:

function Search() {

  const searchClient = algoliasearch('C*********X', 'd***************************9');

  const Hit = ({hit}) =>  {
   return <div>
    <h2>{hit.ProductName}</h2>
    <h3>{hit.ProductPrice}</h3>
  </div>
  }


  return (
    <div>
  <InstantSearch searchClient={searchClient} indexName="Products">
    <SearchBox />
    <Hits hitComponent={Hit}/>
  </InstantSearch>
    </div>
  )
}

This works fine but when I add the Sort-by component Like

<div>
  <InstantSearch searchClient={searchClient} indexName="Products">
    <SearchBox />
<SortBy
  defaultRefinement="Products"
  items={[
    { value: 'relevent', label: 'Relevent' },
    { value: 'product_price_asc', label: 'Price asc.' },
    { value: 'product_price_desc', label: 'Price desc.' },
  ]}
/>
    <Hits hitComponent={Hit}/>
  </InstantSearch>
    </div>

The Sort-By Select Shows up by when I change it nothing happens, Is there an easy way to implement the Algolia widgets Ive been stuck on this for days now please help.

Answer 1

The sortBy widget simply swaps between Algolia indices. The actual sorting occurs within your index and its replicas based on their sorting/ranking criteria. The widget in your code is swapping between three indices/replicas:

• relevent
• product_price_asc
• product_price_desc

Can you confirm all three indices/replicas exist and are accessible with your current search-only API key?