Can we use NgRx Data with pagination style REST API response? - ngrx

Question

I am currently using NgRx Data to perform CRUD operation on couple of entities on my project. Now, I've to develop pagination. Hence, REST API response is going to be like:
{
"page": 1,
"per_page": 10,
"total": 100,
"total_page": 10,
"data": [
{ ... },
{ ... },
{ ... }
]
}
AFAIK, NgRx Data works well with entities, I've no clue how to deal with this. Could you please redirect me to some light? Thank you.

Answer 1

Even I was facing a similar issue. So for people who are new to NgRx data, I have created an EntityDataListInterface which was similar to:
{
page: number,
per_page: number,
total: number,
total_page: number,
data: EntityDataItem[]
}
For each section I am working on I create a different service. Lets call it ComponentService. Inside this ComponentService I access the EntityService(which implements EntityCollectionServiceBase<EntityDataItem>) and entity's DataService (which implements DefaultDataService<EntityDataListInterface>).
Once the API returns EntityDataListInterface data, you can use addManyToCache to add them into the entity cache.
Inside the module, register the EntityDataItem by passing the filterFn. Now you can call setFilter to filter the entities based on indexes(or any pagination logic like shown below) and the result would be accessible via filteredEntities$.
//eds: EntityDefinitionService in the constructor
const entityMetadata: EntityMetadataMap = {
EntityDataItem: {
filterFn:(entities: EntityDataItem[], pattern:{startIndex: number, endIndex: number}) => {
return entities.filter((entity, index) => {
return ((index >= pattern.startIndex) && (index <= pattern.endIndex));
})
}
}
};
eds.registerMetadataMap(entityMetadata);
Subscribe to filteredEntities$ in your component and it will solve the pagination issue.