Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Partial pagination #7120

Merged
merged 16 commits into from
Jan 26, 2022
Merged

Partial pagination #7120

merged 16 commits into from
Jan 26, 2022

Conversation

fzaninotto
Copy link
Member

@fzaninotto fzaninotto commented Jan 21, 2022

Problem

The getList() and getManyReference() methods return paginated responses. Sometimes, executing a "count" server-side to return the total number of records is expensive.

Solution

In this case, you can omit the total property in the response, and pass a pageInfo object instead, specifying if there are previous and next pages:

dataProvider.getList('comments', {
    pagination: { page: 1, perPage: 6 },
    sort: { field: 'created_at', order: 'DESC' },
})
.then(response => console.log(response));
// {
//     data: [
//         { id: 126, body: "allo?", author_id: 12 },
//         { id: 127, body: "bien le bonjour", author_id: 12 },
//         { id: 124, body: "good day sunshine", author_id: 45 },
//         { id: 123, body: "hello, world", author_id: 67 },
//         { id: 125, body: "howdy partner", author_id: 89 },
//         { id: 138, body: "nice sweater!", author_id: 78 },
//     ],
//     pageInfo: {
//         hasPreviousPage: false,    
//         hasNextPage: true,
//     }
// }

React-admin's <Pagination> component will automatically handle the pageInfo object and display the appropriate pagination controls.

Enregistrement.de.l.ecran.2022-01-26.a.07.59.25.mov

And while we are at it, time to upgrade to the new MUI <Pagination> component!

mui-pagination.mov
  • add pageInfo in the response signature for getList and getManyReference
  • add support for pageInfo in useGetList
  • add support for pageInfo in useGetManyReference
  • add support for pageInfo in useListController
  • add support for pageInfo in useList
  • add support for pageInfo in useReferenceManyFieldController
  • add support for pageInfo in useReferenceInputController
  • add support for pageInfo in useReferenceArrayInputController
  • Add new component to render Pagination controls for partial pagination
  • Migrate the <PaginationActions> to the new MUI <Pagination> component
  • Add tests
  • Add documentation

Closes #6300 and #5003

@fzaninotto fzaninotto changed the base branch from master to next January 21, 2022 09:21
@fzaninotto fzaninotto mentioned this pull request Jan 21, 2022
first: 'Go to first page',
last: 'Go to last page',
next: 'Go to next page',
previous: 'Go to previous page',
Copy link
Contributor

@WiXSL WiXSL Jan 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BC spotted: You change prev for previous.

Update: Now I see that, technically, it wasn't being used

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

indeed, I need to add an entry to the Upgrade guide

packages/ra-language-french/src/index.ts Show resolved Hide resolved
@WiXSL
Copy link
Contributor

WiXSL commented Jan 26, 2022

e2e test failing

Copy link
Collaborator

@djhi djhi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few linter warnings left, otherwise 💪

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants