Fetch data from server in chunks using ember data (like infinite scroll) - ember.js

Question

I would like to display a very long list of users (yes i suggested pagination but the client wont take it) and i would like to fetch a few records at a time.
This is mainly because creating the list on the server side is resource intensive (every field is encrypted in the database<-- again there is little i can do to change this) and retrieving 1000 records would slow down the app. so i would like to display 30 records and get the next 30 immediately afterwards (the same way infinite scroll works, without having to scroll down to fetch more records). Below is my route handler:
import Ember from 'ember';
export default Ember.Route.extend({
model(){
return this.store.query('user', {
firstname:'doe' // this comes from a textbox when filtering the list of users
pageSize:30,
page:1,
orderBy:'id'
});
}
});
To make ember and webapi play nice together, i have implemented everything here https://github.com/CrshOverride/ember-web-api
the api does not return any pagination information, but i would like to keep fetching the next page until the recordset that returns is smaller than pagesize.
Background: Im migrating from angular 1 to ember 2 (very much an ember novice) and i believe i am using ember data and i generate most stuff via ember-cli

Answer 1

This is something that Ember-Data doesn't provide out of the box, but is very easy to implement on your own.
// route.js
export default Ember.Route.extend({
setupController(controller) {
controller.fetchUsers(someNameOrAnother);
}
});
// controller.js
export default Ember.Controller.extend({
fetchUsers(name) {
this.set('allUsers', []);
this.fetchUsersHelper(name);
},
fetchUsersHelper(name, page = 1) {
const queryParams = {
firstname: name,
pageSize: 30,
page,
orderBy: 'id'
};
this.store.query('user', queryParams).then((users) => {
this.set('allUsers', this.get('allUsers').concat(users.toArray()));
if (users.get('length')>= queryParams.pageSize) {
this.fetchUsersHelper(name, queryParams.page + 1);
}
});
}
});