Why does the <Hits> component show the entire index versus just the search results?


I am working with a very basic component using the available React components from the react-instantsearch-dom library.

My question is, why does the <Hits> component immediately show all results from my index, and only narrow down the result set when a query is typed into <SearchBox />?

Is there anyway to just display the search box and display results from <Hits /> versus just displaying the entire index right away?


@sf1 what do you have your hitsPerPage configuration value set to (documentation)? You can use this parameter to adjust how many results are shown at maximum.

By default, when no query is present, we will show the default set of results depending on your rules and any boosts you have active currently.

@michael.king I have whatever the default is set to, nothing explicitly configured. I guess my ideal experience is a SearchBox and zero results, shown by default. I only want to list hits that are returned when a query matches anything in the index. so, ideally, I can display a SearchBar with my default content pulled from my own database. When users type into the searchbar and hits come back from Agolia, I will replace that content with the content coming from Agolia. Right now though, if I embed the <Hits /> component on my React app, it shows a bunch of default listings from the index.

Also, to clarify, I am using the recommended react-instantsearch-hooks-web package now, not react-instantsearch-dom. After reading documentation, it was suggested to use this instead.

tldr; I don’t want the page with my SearchBox to show any of my index from Algolia. I want to display items from my own database. I want to conditionally render only matching Hits if there is a query put into the search bar

is that possible with algolia hooks? configuring the default number of hits doesn’t change the problem. It just limits the search to N Hits, and N number of items that are displayed by default by the <Hits /> component, even if no search query is input.

I want to display results only.

I see! I see two easy paths forward:

  1. Update the Algolia Index configuration to match the same ordering/sorting as the database so that the result results are the same. This would separate your database completely and makes the frontend implementation a bit less complex (and quicker of course :slight_smile:).
  2. Setup a proxy to disable the initial query on-load (documentation). Create a new component named <DefaultHits> (or as you see fit), and load your result set from your Database within this component. Where you are displaying the result set, use the useStats hook to obtain the query from InstantSearch and conditionally display the InstantSearch hits if a query is present:

In the sandbox above I’ve laid out an example. Let me know if can help any further, thanks!

1 Like