CODEWITHSUNDEEP
javascriptjquerymeteorecmascript-6infinite-scroll
Ankur Soni
Ankur Soni

Reputation: 6018

Subscription behavior for Infinite Scroll Implementation in Meteor

I have implemented my own version of infinite scroll using Meteor 1.5.0. Consider below piece of subscription code.

Template.App_ViewClients.onCreated(function(){  
    this.autorun(() => {
        Meteor.subscribe('Clients', this.total.get(), this.searchString.get());
    });
});

When the template is rendered, Initially 20 records are fetched by default.

Every time when I reach the end of the Screen, this.total is incremented by say 20. So, First scroll down gives me 40 records, then 60 and so on. I have to use this.autorun because searchString is variable input from UI and data must change.

Below is the scroll code that I used.

Template.App_ViewClients.onRendered(function(){
    $(window).scroll(function(event){
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
          console.log('End Reached.');
        }
    });
});

If my Collection has 1000 records and I have already scrolled 10 times (i.e. 20*10 = 200 records fetched), so will the subscription reset and fetch 220 records again altogether at my 11th scroll to bottom? So at 50th scroll to bottom, entire subscription is reset and 1000 records are fetched one shot?

If this is the case then how is possible to implement infinite scroll in meteor? Any thoughts?

Upvotes: 1

Views: 288

Answers (1)

Styx
Styx

Reputation: 10076

No, subscription won't "reset" and re-fetch the same data. If you will re-subscribe to the same subscription but with different limit option, then publication will send only those documents you don't have on client. Thus, every time you scroll to the end of the screen and (as result of this action) re-subscribe — publication is sending to client just next 20 records.

Here are some useful links about that:

  1. Publication behavior when arguments change.
  2. Paginating subscriptions

Upvotes: 2

Related Questions