Partial Pagination Not Working for ReferenceManyField

[MichaelSandor]

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

[antoinefricker]

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]

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! 👍

Thank you @septentrion-730n! I will do this soon.

[MichaelSandor]

Hi @septentrion-730n, here is the reproduction sandbox:

https://codesandbox.io/s/sad-murdock-lgb5ck

The changes I made are as follows:

1. Set every comment's post_id to 13.
2. Pass a Pagination component to the ReferenceManyField in PostShow (line 90).
3. Set perPage of the same ReferenceManyField to 5 (line 91).
4. "Override" the default getManyReference of the dataProvider to use partial pagination (lines 11-22).

Notice how the pagination does not render at the following path: posts/13/show/3.

However, when commenting out the fourth change, pagination works because the default implementation of getManyReference returns a total value.

[MichaelSandor]

With Partial Pagination (Nothing Rendered)

With Regular Pagination (Rendered)

[WiXSL]

Reproduced, thanks!

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