How to load data async from punkapi with infinite scroll?


#1

Hello. I have a problem while creating my app with Ember Infinity addon. I am using https://api.punkapi.com/v2 and https://github.com/hhff/ember-infinity.

In my app I want to display a number of beers (let’s say 10 beers) and then, while scrolling to the bottom load next 10 beers and so on. Punkapi by default loads 25 beers and allows me to load max 80 beers (there are about 250 beers in API). So the URL looks kind of this: https://api.punkapi.com/v2/beers?page=1&per_page=10

Ember Infinity creates the very same URL, so it’s also limited to 80 beers. And paging doesn’t work, because when I scroll to the very bottom, it says that all content has been loaded.

My question is: How do I load 10 beers from API and then load next 10 and next 10 until the end, while scrolling to the bottom of the list?

Here’s my beer adapter:

import Application from ‘./application’;

export default Application.extend({

pathForType(){

return 'beers';

}

});

My beers route:

import Ember from ‘ember’; import InfinityRoute from “ember-infinity/mixins/route”;

export default Ember.Route.extend(InfinityRoute, {

model: function() {

return this.infinityModel(‘beer’, { perPage: 80, startingPage: 1 });

}

});

And my beer template:

{{#each model as |beer|}}

<h 3>{{beer.id}}</h 3>

<h 3>{{beer.name}}</h 3>

{{beer.image}}

{{/each}}

{{infinity-loader infinityModel=model destroyOnInfinity=true loadingText=“Loading…” loadedText=“Loaded!”}}

`