Show popular/empty query results if no results have been found for a query


I am using react instant search on our site. We have three different indices. My case here is how can i show popular results if the query doesn’t comeback with any results. The implementation needs to happen in a search page where a query is going to search in all three indices and gives results. But the noResults state needs to get the popular items from only one index.

<InstantSearch> <Index indexName="test1"> <Configure hitsPerPage={test1hitsperpage} clickAnalytics removeWordsIfNoResults="allOptional" /> <Test1Hits /> </Index> <Index indexName="test2"> <Configure hitsPerPage={test2hitsperpage} clickAnalytics /> <Test2Hits /> </Index> <Index indexName="test3"> <Configure hitsPerPage={test3hitsperpage} clickAnalytics /> <Test3Hits /> </Index> </InstantSearch>

I have added the removeWordsIfNoResults prop to allOptional. How can i make that to behave in a way if no results are found for a query then get empty query results.

I tried adding another Index instance similar to the test1 index and conditionally displaying it if there are no results for a query and using configure to set the query to be empty. I am using connectStateResults to get the results state and setting the conditional based on that props. But that doesn’t really work as it goes into a loop.

How can i achieve this? Thanks in advance!