How do I update URL with page number when using react-instantsearch?

I have an onSearchStateChange prop on InstantSearch which receives a searchState parameter from the InstantSearch component.

I am also working with multiple indices, so I can see page changes if I look at this.state.searchState.indices['controversy-cards'].page.

And I also have pure functions createURL and searchStateToUrl which generate the desired URL based upon the searchState which is generated by InstantSearch.

I am also using an endless scroll package (react-infinite-scroll-component) which has worked rather well with connectInfiniteHits.

There is some complexity to all of these connections, and I am not 100% sure that everything is hooked up properly. But, for the most part, it does what I expect.

I am at the moment trying to fine-tune the browser’s forward and back buttons to move through the progression of search states. I’ve had some luck with this, but getting it to work perfectly has proven to be tricky.

One thing that I am noticing is that onSearchStateChange is not firing for me on pagination events. I can detect these changes with componentDidUpdate (since I can there perform a comparison of this.state.searchState with prevState.searchState to detect the page change event). But, this does not really update the URL as expected.

Is there a way to make these pagination events show up for onSearchStateChange?

Hi @paradigmsareconstruc,

The onSearchStateChange should be trigger on each searchState changes. If you are using the connectInfiniteHits connector there is no reasons why the event shouldn’t be triggered.

Can you provide a working example of your use case? It will be easier to find the issue :slightly_smiling_face:

Thanks!

I’m using Redux, which would seem to complicate the creation of a working example. It might make more sense (?) to view these connected components within the actual codebase …

(the screen shot that is created there is not accurate, see the link)

Do you see anything that would appear to be unusual here?

Hi @paradigmsareconstruc,

I looked at your application. The URL sync is working for me. As soon as I reach the end of the list, the InfiniteScroll render the rest of the items and the URL is sync after the delay.

Does it working for you or did I miss something?

Thanks for taking a look!

I am noticing two things: first, when the page number does appear in the URL, it’s oftentimes wrong. I think this has to do with my decision to use componentDidUpdate – which seemed necessary because I have access here to prevState. I am printing out the actual page transitions in the console, and to do that, I have to go very deep into this searchState structure. I am suspicious that the page event is getting lost due to the depth of this state comparison. You will notice that part of what I am doing to get all of this to work is reducing the depth of these state changes by manually placing the state change I care most about directly onto this.state.searchState.

But also, it seems that the page numbers do not always show up. If I do a faceted search by clicking the elephant and selecting a facet like “Controversy Cards” (which produces a multi-page list of results), the page number never shows up in the URL at all.

I’m afraid that the complexity of all of these connections is really testing my understanding of all of these technologies, and have become suspicious in particular that the issue I am seeing pertains to the specific situation where there are multiple indices. Best I can tell, the depth of the resulting searchState data structure seems to alter the behavior of onSearchStateChange – and my efforts to reduce the depth of the data structure have so far produced an inconsistent result.

Hi @paradigmsareconstruc,

Actually the onSearchStateChange is always triggered, sometimes with some delay because the next function of the InfiniteScroll is called with some delay too. I don’t think the problem come from the depth of the searchState during my test the callback onSearchStateChange is always called with correct values.

You don’t need to replicate the changes on the searchState from you componentDidUpdate. You can read the correct page number directly from the createURL as you previously said:

searchState.indices['controversy-cards'].page

When dealing with multi indices the searchState is nested as you already saw. The common parameters are on the root of the object and the specific one are under the index name. You can find more informations about this subject on our guide.

Hope that helps.

Thanks for the response. It may be another week before I can take a closer look.

chris