Requesting more pages than necessary

I have an issue where more pages are requested than necessary. In this example, I only have 8 results returned from the API. my pageSize is set at 25 to fetch 25 results/page. However, it requested 6 pages worth of data, which all returned empty except the first. I'm not sure what I'm doing wrong.

template

  {{#impagination-dataset
     fetch=(route-action 'fetch')
     on-init=(action 'initializeReadOffset')
     on-object-at=(action "onObjectAt")
     page-size=pageSize
     as |transactions|}}
...

controller

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

const { Controller } = Ember;

export default Controller.extend({
  pageSize: 25,

  setReadOffset: task(function * (dataset, offset) {
    yield timeout(5);
    dataset.setReadOffset(offset);
  }).restartable(),

  actions: {
    initializeReadOffset(dataset) {
      this.get('setReadOffset').perform(dataset, 0);
    },

    onObjectAt(dataset, index) {
      this.get('setReadOffset').perform(dataset, index);
    }
  }
});

route

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('account', params.account_id);
  },

  actions: {
    fetch(pageOffset, pageSize, stats) {
      return this.store.query('transaction', {
        account_id: this.get('controller.model.id'),
        page: pageOffset + 1
      });
    }
  }
});

[TopsyCM]

I don't see loadHorizon being set. What is the default value?

@TopsyCM I believe it's the pageSize, which I have set as 25

https://github.com/flexyford/impagination/blob/7381e66fb8134358da6e90b5109f4575d2a3df21/src/dataset.js#L9

[flexyford]

What happens when you set the load-horizon to 25? It is the default value, but I'm curious if you experience the same error. A couple tests exist to make sure we are requesting the correct number of pages.

[flexyford]

@anthonycollini could you please post the handlebars template that implements the {{impagination-dataset}}? I assume onObjectAt is setting the readOffset multiple times. Could you insert a console.log statement there?

onObjectAt(dataset, index) {
  console.log('onObjectAt index = ', index)
  this.get('setReadOffset').perform(dataset, index);
}

setReadOffset: task(function * (dataset, offset) {
  yield timeout(5);
  console.log('setReadOffset offset = ', offset)
  dataset.setReadOffset(offset);
}).restartable(),

I set the load-horizon to 25 and the same issue appears.

I added a console.log in my onObjectAt, and it does get called multiple times. It loops through index 0 - 24, then loops through 0 - 24 again. In this instance, the record I viewed did not have any transactions, so it should have only called the first page, but called 2 pages instead.

Here is my current template:

  {{#impagination-dataset
     fetch=(route-action 'fetch')
     on-init=(action 'initializeReadOffset')
     on-object-at=(action "onObjectAt")
     page-size=pageSize
     load-horizon=pageSize
     as |transactions|}}

   {{#paper-list class="transactions-wrapper"}}
      <div>
        {{#vertical-collection content=transactions as |transaction index|}}
           <div>
             {{index}}
            </div>
        {{/vertical-collection}}
      </div>
    {{/paper-list}}

  {{/impagination-dataset}}

[flexyford]

I believe the readOffset is set to a number greater than 0 in setReadOffset. If it is set to >= 1, then the next page will be requested (page 2 in your instance), because the loadHorizon (25) will jump to the next page.

In this instance, the record I viewed did not have any transactions, so it should have only called the first page

@anthonycollini are you saying that page 1 had < 25 transactions (records). I see in your first post there are only 8. Try setting stats.totalPages inside the then clause of your fetch function. This should prevent any additional page calls if you already reached the last page.

actions: {
  fetch(pageOffset, pageSize, stats) {
    return this.store.query('transaction', {
      account_id: this.get('controller.model.id'),
      page: pageOffset + 1;
    }).then(function(results) {
      // Check if last page was requested
      if (results.length < pageSize) {
        let lastPage = results.length > 0 ? pageOffset + 1 : pageOffset;
        stats.totalPages = Math.min(lastPage, stats.totalPages || Infinity);
      }
      return results;
    });
  }
}

It still doesn't seem to work. I'm not returning the record count from my API, so I just hardcoded a value of 4 for the stats.totalPages in the then clause, but it still requests 5 pages, even though I only have 4 pages worth of data. I also lowered the loadHorizon from 25 to 20, it did request one less page in total (5 pages instead of 6), but then it DOS'd my server ...

In this instance, there are 78 records in my API, so the 5th page of records would be the first page that had 0 results, however, I still don't know why the package is requesting all pages at once, as soon as I load the page.

route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('account', params.account_id);
  },

  actions: {
    fetch(pageOffset, pageSize, stats) {
      return this.store.query('transaction', {
        account_id: this.get('controller.model.id'),
        page: pageOffset + 1
      }).then(function(results) {
        // Check if last page was requested
        if (results.length < pageSize) {
          let lastPage = results.length > 0 ? pageOffset + 1 : pageOffset;
          stats.totalPages = 4; // Math.min(lastPage, stats.totalPages || Infinity);
        }
        return results;
      });
    }
  }
});

[Alonski]

@anthonycollini Is this still an issue that you need help with?
If so is it possible to get a reproduction of this issue in a repo or a twiddle?