Paginating customRefinement

When a user adds a refinement we get the correct results and a friendly url is created via our custom router e.g example.com/search/colour=yellow when the user scrolls we have an instance of connectInfiniteHits calling the showMore() method.

When this happens the refinement is stripped from the query and replaced with only page=2 in the url.

The refinement never makes it to stateToRoute(uiState).

I assumed it’s an issue with the custom router so we replaced it with the simple() state mapping and are getting the same result.

I then tested to see if it was an issue with the connectInfiniteHits showMore() method so I replaced that with the pagination widget and called the refine(pageNum) method and saw exactly the same behaviour, the refinement is stripped from the query.

Does anyone know what’s going on here? Can refinements be paginated? Do I need to handle the query manually? If so, can someone point me in the roughly the right direction for doing that?

MANY thanks to anyone that can offer some input. We’ve spent hours on this and it is proving to be very difficult to debug.

Hey @matt12,

I’m passing this along to the front end experts internally.

Do you have a codesandbox or equivalent with the issue reproduced? I know that will go a long way toward helping them identify the issue.

We have a heavily customised setup, so cannot sandbox. I rebuilt a skeleton of the setup using no customised (connect) widgets and instead using the vanilla infiniteHits, pagination and refinementList widgets only and can confirm pagination does work with the refinementList.

We have an entirely customised router setup for SEO, I re-used that “as-is” and can confirm it’s not the logic in the router. I believe the issue must be with the “connect” versions of the widgets.

I believe at this point my only question is “should I expect different internal behaviour from the “connect” versions of the widgets”?

Hi @matt12

I chatted with one of our engineers who put together this basic codesandbox with a custom infiniteHits component and could not reproduce the issue:

There might be something in there that could help you with your issue? If not, I’d recommend cutting an issue in the Github repo or opening a support ticket so the engineers can dive in deeper on your specific use case.