Multi Index Search with one set of Refinements and Pagination

There may be situations where you might want to search multiple index's at once but have a single refinementList and pagination widget that controls the refinements and pagination for both indices. This works perfectly fine if you are using a replica index like in the example shown in our Multi-index search with InstantSearch.js guide.

However when you have two index's that are quite different in the total number of records and facet values there can be some discrepancies. For these situations it makes sense to combine the two child indices into one single index.

This will allow you to set at the parent level the refinements and pagination for this master index. Below this you could then use two index widgets to scope each individual set of hits and use a configure widget to filter only the results that should appear for what was previously a child index. For example, in this CodeSandBox, a single index is used named "instant_search" at both the parent level and within each index. The difference is that each index widget has a different indexId and its own configure widget filter by a particular brand. For this example lets imagine we previously had an apple Index and an HP index. Now we have combined the two into a single index which contains all the facet values for what used to be those child index's so the facet counts are now correct.

The refinements and pagination are set at the parent level filtering on both brands (ie the content of what would have been two child index's) so the pagination will not fall short for either of the child indices and the facet values for both child indices will be present.