@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.
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.
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 ).
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!