8

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.

Kalpesh Patel
  • 259
  • 2
  • 14
  • 4
    Could you expand a little on your requirements, are you looking to create paginated table / happy to have repeated api calls / able to work with websockets? For project I'm working on I'm using a `getWithQuery` (e.g. /api/?pageNumber=1&pageSize=10&sortOrder=asc) and implementing a `DefaultDataService` to map the api result so that the `data` entities get saved to the entityCache. – Andrew Allen Nov 29 '19 at 11:31
  • @AndrewAllen I ended up doing exactly same as you mentioned. Just wondering how do you determine if there is a next page? What is your response look like? Can you share an example if you don't mind? – Kalpesh Patel Nov 30 '19 at 18:34
  • I had a similar requirement, but with Django REST as the backend. The responses from differ a little, but there are similarities. To support this I created custom versions of DefaultDataService and DefaultDataServiceFactory and registered them with Angular via providers. I have captured it in a post [here](https://www.smallpearl.com/blog/paginated-responses-in-ngrxdata/). Putting it here so that it could help someone who lands here from google search. – Hari Mahadevan Dec 23 '20 at 04:36

1 Answers1

-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.

Rohith Pragallapati
  • 1
  • 1