Ember Data peek 'x' amount of records from store

Question

So I'm working with Ember Data and have a component where I want to render so many records from the store, let's say 10. I also have a live feed of these records that I want to make sure show up in this component, but I still want no more than 10. Now if I had a static array of objects I'd just say 'hey, remove the last as the new data comes in', however I need this component reflecting a live recordset so that my live feed can pour into it.

For now I query the store to get the base set of records loaded from the backend

this.store.query('recordName', {
    numberOfRecords: 10
});

Then the list of records that I render is assigned recordList = this.store.peekAll('recordName'); Now this will update whenever new records are created (they are created client-side). My downsides are that new records are automatically appended to the bottom of the list rather than the top (which is a separate bug) and I can just keep loading infinite records into this list.

Is there an elegant way with Ember Store to limit the live record set returned or is it going to have to result in some operating on the list with custom javascript?

Answer 1

its pretty simple to filter for this in a component:

@tracked recordList;

constructor() {
  super(...arguments);
  this.recordList = this.store.peekAll('recordName');
}

get limitedArray() {
  return this.recordList.reverse().slice(0, 10);
}

this works because the live array is autotracked.

you can then do {{#each this.limitedArray}} in your template.