Partial Pagination Not Working for `ReferenceManyField`

What you were expecting:

When the getManyReference method of the dataProvider returns pageInfo instead of total, partial pagination should be in effect for the pagination component passed to the ReferenceManyField component.

What happened instead:

When the getManyReference method of the dataProvider returns pageInfo instead of total, the pagination component passed to the ReferenceManyField component does not render at all.

Steps to reproduce:

1. Pass a Pagination component to the ReferenceManyField: https://marmelab.com/react-admin/ReferenceManyField.html#pagination
2. Have the getManyReference method of the dataProvider return pageInfo instead of total.

Other information:

This could be the culprit here as the pagination prop is not rendered unless total is defined.

Environment

• React-admin version: 4.0.1
• React version: 18.0.0
• Browser: Chrome 103.0.5060.134

[septentrion-730n]

Thanks for this helpful and almost perfect reporting!

Could you provide a behaviour reproduction sandbox?

• a CodeSandbox forked from simple example V4 or v3
• a link to a GitHub repo with the minimal codebase to reproduce the issue?

Many thanks for your help in this matter! 👍

[MichaelSandor]

For those who encounter this issue in the future, a workaround is to return total as null as part of the getManyReference method of the dataProvider.

As an example:

getManyReference: (resource, params) => {
   ...
   return httpClient.get(path).then(res => ({
      data: ...
      pageInfo: {
         ...
      },
      total: null,
   }))
   ...
}

This works because the ReferenceManyField only renders the pagination controls if total !== undefined as seen here:

https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/field/ReferenceManyField.tsx#L92

For those who use TypeScript, you can use the @ts-expect-error or @ts-ignore directives to suppress the type error that will arise (total is expected to be number or undefined).