Using infinite scroll with custom searchStore

Hello,

I’m using custom search stores in my code so that I can manage when searches are run better.

I’d like to implement infinite scroll too, and so I’ve installed the vue-observe-visibility component to detect when the user hits the bottom of the screen and this increments the page number by one. Brilliant.

But obviously the search results haven’t updated, presumably because the searchStore is currently stopped?

So I tried:

this.mainSearch.queryParameters.page ++;
this.mainSearch.start();
this.mainSearch.refresh();
console.log(this.mainSearch.queryParameters);

but this makes no difference :frowning:

Would it be possible to put this behaviour in a codeSandbox so it’s possible to debug it? Also: have you tried the :stack="true" option on the <ais-results>? In case of doubt, it will also be useful to look at that implementation on GitHub to see how it’s implemented.

Hi Haroen,

Yes I’ve tried :stack="true" but on an <ais-index component. Would that make a difference?

Where can I put this in a sandbox for you to see?

Thanks

Ben

You can use this sandbox as a template, stack is only an option on <ais-results>. You can take a look at how it’s implemented in the code of that component if you’re redoing it on your end

@ben4, sorry for delay, you only need set the page for your searchStore:

loadMore (isVisible) {
    if (isVisible) {
        console.log(this.queryParameters.page)
        this.queryParameters.page++;
        this.searchStore.page = this.queryParameters.page;
        this.searchStore.start();
        this.searchStore.refresh();
    }
},