2

My back-end API supports cursor based pagination for the GET_LIST operations. 

API: {apiUrl}/{resource}?fltr={limit:100}

Response: 
{
data: [],
next: {reference_url_to_the_next_paginated_data_set}
}

What is the best way to supported this sort of pagination with the existing AOR pagination infrastructure ?

Sundaram Ravi
  • 1,185
  • 1
  • 8
  • 11

2 Answers2

1

I ended up achieving this using a Custom Saga, Action creator and Reducer.

  1. Have a custom Saga take every GET_LIST_SUCCESS and dispatch a custom "UPDATE_PAGINATION" action for that resource.
  2. Handle that action using a Custom Pagination Reducer. The reducer creates and maintains the "pagination" state for each resource, page-wise in the redux store

  3. A Connected Pagination Component that is subscribed to the pagination state of that resource, that has a "next" and "previous" button and a "currentPage" state. On-Click of "Next" or "Previous" buttons, fetch the "nextUrl" or the "previousUrl" for the "currentPage" and use AOR's fetch-meta to update the "data" state of that resource.

  4. Use this custom Pagination component in your data-grid like so

<List resource="myResource" pagination={<CustomPagination />} />
Sundaram Ravi
  • 1,185
  • 1
  • 8
  • 11
0

You need to write a custom Rest client to handle your response and request type. You need your API to set the X-Total-Count header when your client makes a GET_LIST type request.

https://marmelab.com/admin-on-rest/RestClients.html

kunal pareek
  • 1,285
  • 10
  • 21