Loading results with connectInfiniteHits and removing filters with ClearAll sets page to -1

Hi,

I have a custom Hits component with connectHits, a ClearAll button and a Pagination component.

I’m trying to replace the pagination with an infinite scroll, by using a Waypoint (react-waypoint) component and connectInfiniteHits instead of connectHits.

The custom Hits component displays the results and the Waypoint component at the end, so when the user scrolls to it, a function is called that in turn calls the refine() function provided (without passing any parameters) to the custom Hits component.

The problems I’m experiencing right now:

  • I have to scroll to the waypoint once, then scroll back, then again so the second page of results loads.
  • Once I loaded a new page of results, when I click on the ClearAll button, the page gets reset to -1, so I get a 400 bad request result from algolia.

Am I doing something wrong? I’m not changing the page by myself at any point, and I’m using a ClearAll component without anything else.

I’m using react-instantsearch 3.2.0

1 Like

Hi @carles,

Can you provide us a jsfiddle illustrating your issue? I wasn’t able to use Waypoint but here’s an example of how you can create an infinite scroll using react-infinite-scroller.

connectInfiniteHits(({refine, hits, hasMore}) => <InfiniteScroll
  loadMore={refine}
  hasMore={hasMore}
>
  <div>{hits.map(hit => <div>{hit.name}</div>)}</div>
</InfiniteScroll>

Also, by adding a Refinement List plus a ClearAll button, I wasn’t able to reproduce your issue with the pagination.

2 Likes

Hi there @marielaure.thuret,

Thanks for the code, I’ll try it.

As for the problem I’m having, here’s an example very close to what I’m using now, where it happens:
https://jsfiddle.net/bitblitter/rwwos1mj/

Hey @carles, can you indicate me the steps that will help me see what’s wrong with your example?

@marielaure.thuret Sorry, the fiddle didn’t update correctly.

Turned out it was me being silly and not removing previous code that could cause problems.

I found the issue was that I had a ‘footer’ component that imported a Pagination component that didn’t render, so I left it temporarily while I was developing the infinite scroll.

When I removed the footer, it worked correctly.

Thanks!

1 Like

Great, Happy coding then @carles :slight_smile: