Fix ReferenceArrayField passes empty data to child when loaded

[fzaninotto]

Problem

<ReferenceArrayField> relies on dataProvider.getMany() to retrieve the references, and to pass it them to its child (e.g. a <SingleFieldList>. When getMany() returns, for a brief moment, loaded is true and data is empty. If the child of <SingleFieldList> doesn't check for the existence of its injected record before looking up a field, it fails.

const WeakField = ({ record }: any) => <div>{record.title}</div>; // fails when record is undefined
...
<ReferenceArrayField
  record={{ id: 123, barIds: [1, 2] }}
  className="myClass"
  resource="foos"
  reference="bars"
  source="barIds"
  basePath="/foos"
>
  <SingleFieldList linkType={false}>
    <WeakField />
  </SingleFieldList>
</ReferenceArrayField>

Solution

The bug comes from a race condition in useReferenceArrayFieldController. This hook processes the data in a useEffect when loaded becomes true. As a consequence, the hook timeline is:

1. returns { loaded: false, data: {} }
2. dataProvider.getMany() returns
3. returns { loaded: true, data: {} }
4. Processes the useEffect
5. returns { loaded: true, data: { 1: { id: 1, title: foo } }

At 3, the hook state is incoherent.

[fzaninotto]

this test fails without the fix