React hooks: The page parameter generated by the routing limits the amount of results shown

Open Q&A
, ,
1

Hi!

I am using the react-instantsearch-hooks-web library to display a search UI in my Next.js app.

I am using the infinite hits in my search result. And I also enabled the automatic routing which syncs my URL with the right search parameters.

When I apply refinements and other filters, I get all the results and I can scroll to load more, let’s say to page=4.
So after that, the UI state knows I am on page=4 and the URL has that parameter as well.

Example of URL generated:

http://localhost:3000/en/app/actors?development_actor[menu][categories.id]=4&development_actor[page]=4&development_actor[refinementList][themes.id][0]=12

Issue: If at that point I try to filter for something else, the results will be incomplete because it only uses the page 4.

So I’m wondering how do people usually manage that, or if I did something wrong. As a workaround, how do I remove that page parameter from the URL parameters?

Thanks a lot

2

I tried changing the routeState to remove the page parameter but that’s not solving the issue as the page mechanism is still used in the background.

I tried adding a ‘Show More’ button to load the missing results manually, but no luck either as that will load the next pages, not all pages missing.

I am thinking that this is a common use case and maybe I just need to configure Algolia properly?