Multiple algolia queries per search

Hello,

I’ve been using Algolia to build a search engine indexing around 800k results.

Those results are identified by a category, and displayed using 6 different refinements (for example : classifieds, real estate, e-commerce, businesses…).

One thing I did to improve UX is that, any time a search is done, the page displays 10 results, each ‘tab’ containing each refinement, also displays its number of hits.

In order to do that (using react-instantsearch), in addition to my main <InstantSearch/> component, I’ve also defined a minimal component, only responsible for gathering this " x results " preview on each tab:

  <InstantSearch
    appId="xxx"
    apiKey="xxxx"
    indexName="xx"
    searchState={searchState}
  >
    <Configure
      hitsPerPage={0}
      analytics={false}
      attributesToRetrieve={null}
      attributesToHighlight={null}
    />
    <RefinementList
      attribute="category"
      defaultRefinement={["xxx"]}
    />
    <SearchBox />
    <Hits />
  </InstantSearch>

Those components are called this way, for each search :

const { InstantSearch, findResultsState } = createInstantSearch()
const resultsNbHits = {
refinement1: await findResultsState(Refinement1Search, {
  searchState
}),
refinement2: await findResultsState(Refinement2Search, {
  searchState
}),


};

This search component is made to be minimal and to not overload Algolia, since each search done by the user, will trigger one main search, and then 6 of those “number of hits” search.

I feel like this method is sub-optimal, is there a way to reduce the number of requests to Algolia? in this case?

Hi @romain.lavoix,

I’m not sure I completely understand what you are trying to do. Could you please provide us a live example of your implementation? It will help to better understand the issue. We provide template to avoid you the boilerplate part. You can find it on CodeSandbox.

Thanks!

Hi @samuel.vaillant,

thanks for looking into that.
here is my web site https://qwarx.nc
it’s a search engine dedicated to everything concerning New Caledonia.
you can see on the home page, and on the search page (once you type and search something), that there are between 6 and 7 categories to choose from.

Here are the categories from the homepage, showing an empty search with different refinements, accessible here https://qwarx.nc
homepage_categories

Here is an exemple of the categories visible in the search page, after a search, accessible here https://qwarx.nc/?recherche=bateau&categorie=tout&page=1
searchpage_categories

From the search page, open the dev console and type a new search, and notice the number of requests to Algolia. 13 for a single search.

requests_per_search

This is due to two things :

  • there is one request for the main search, and then one request per category, only to get back the number of hits for each category. Those ones use findResultsState with a minimal < InstantSearch/> component.
  • and then all requests seems to be triggered twice, but this will be part of another investigation.

My main question right now is : is it possible, in a single query, to get back the number of hits of several different refinements?

I hope this helps, I didn’t take the time to use the boilerplate template yet, but if you’d like I’ll do it.

Hi @romain.lavoix,

From what I understood the values that you want to display on the left are the different categories of the results. You want to list them and be able to refine with those values correct? It sounds like it’s exactly what the Menu does. Here is an example with that shows how to use it.

The UI of the widget might not match the design of your website. You can customise them with the classes but you can also use the connector API to create you own custom Menu. This API lets you implement the view without having to re-implement the logic related to search. You can find more information about that inside the documentation. You can take a look at the connectMenu connector to build your custom widget.

Hope that helps, let me know if you have questions.

That’s amazing!
I’ve been using connectors a lot to customize everything, I just didn’t realise Menu could give you a number of hits preview out of the box.