Is there an example of infinite scroll with new vue-instantsearch API?

I found this example

But it isn’t clear to me how to call the methods loadMore or refine on ais-infinite-hits in my parent component in order to load more items on scroll.


I got it working but it isn’t exactly elegant.

On the scroll event I call a component method:

    infiniteScroll(event: Event) {

throttleScroll is defined as:

  const throttleScroll = throttle(
    (event: Event) => {
      const showMoreButton = document.querySelector(
        ) as HTMLElement;

      if (showMoreButton !== null) {
        const target = as HTMLElement;
        if (target.scrollTop + target.offsetHeight + paginationTriggerOffset
            > showMoreButton.offsetTop) {

and throttle is just a plain javascript implementation of _.throttle()
I’m not happy about having to use document.querySelector and .click() but I couldn’t figure out another way to get isLastPage from the infinite-hits component, or call refine() from my component.

Here’s an example of Vue InstantSearch v2 infinite scroll without button:

Using buttons instead of intersection observer is the default behaviour of ais-infinite-hits