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.

Thanks!

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

On the scroll event I call a component method:

    infiniteScroll(event: Event) {
      throttleScroll(event);
    }

throttleScroll is defined as:

  const throttleScroll = throttle(
    (event: Event) => {
      const showMoreButton = document.querySelector(
        '#site-search-results .btn.show-more',
        ) as HTMLElement;

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

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: https://github.com/algolia/doc-code-samples/tree/master/Vue%20InstantSearch/infinite-scroll

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