Pagination with Multiple Indexes

Hello there, I’ve got a quesiton regarding the functiionality of the Pagination or InfiniteHits widgets in the React-Instantsearch library. I’ve got a search component, that searches across 4 different indices and displays those results in individual columns, the results are limited to 5 results via (searchParameters). My component is set up as follows, a custom Search Bar (that has the onSearchStateChange) it calls a blank index, (UX needed the searchbar to be removed from the results columns), then the 4 results columns which have the searchState={this.state.searchState} as indicated in examples. I followed the example for multiple indexes here (https://github.com/algolia/instantsearch.js/blob/v2/packages/react-instantsearch/examples/multi-index/src/App.js) and simple adapted it to meet the 4 index results.

Next step was to provide a quick mechanism for the user to see more then the 5 results, so I figured the Pagination or InfiniteHits widget would do the trick. However in the my component, neither function, the widget displays but the buttons (pages or load more do nothing). I wondered if it was just something wrong in my code, so took the base example above and dropped in the pagination on the first index in the example and noticed it worked. So then my next step was to drop in the second pagination widget on the 2nd index and try that, it didn’t work, but if I selected a new page from the first index it updated the second. Seems they are linked together?

So it looks like you can only set up Pagination on the top level index that controls the searchState (onSearchStateChange) is there any way to decouple this from the top level index so that results return from queries on individual indexes can then be individually browsed via the widget?

1 Like

Hi @jeremy,

Do you want to add a pagination mechanism that will change at the same time the page on the four indices?

If that the case you just need to add the <Pagination/> component under the first <InstantSearch/> root component, and then use VirtualPagination (by using connectPagination) in every other <InstantSearch/>. Like for the <SearchBox/> on the example you linked.

If not, can you precise your use case? Maybe you can use this jsfiddle https://jsfiddle.net/482jkfwu/ to reproduce your use case and to show us what is not working.

Thanks a lot :slight_smile:

1 Like

@marielaure.thuret

What I want is to have each individual pagination control just the results from that individual indexes. Each column would have its own pagination widget, then selecting a new page would only change the results for the index it is associated with.

Of note, using the example (https://github.com/algolia/instantsearch.js/blob/v2/packages/react-instantsearch/examples/multi-index/src/App.js) , the default behavior of a pagination is does not appear to require the virtual pagination that you mention above, pretty sure using that example and dropping in a pagination widget to each instant search widget, the first pagination widget controlled the 2nd pagination widget, and the 2nd one doesn’t do anything.

@jeremy, if you want four different <Pagination/> then you need to listen about the onSearchStateChange hook of every <InstantSearch/> instances.

Basically, when pushing the search state to each instance, you need to perform some changes to indicate the right page value. So for example if you are clicking on the pagination of the second instance, then you will trigger the onSearchStateChange of the second instance, and then you need to update the search state according to it.

Be aware that you will still need to push the search state from the first instance to the others, except if the only difference is a change with the page number.

1 Like