marmelab/admin-on-rest

ReferenceManyField not rendering data after first load (cache issue?)

Closed this issue · 2 comments

Porting issue #1749 from react-admin, initially reported by evancorl

What you were expecting:
When my restClient returns a response, the ReferenceManyField should re-render with the fetched data.

What happened instead:
When my restClient returns a response, the ReferenceManyField occasionally doesn't re-render with the fetched data. Instead, it continues to display the loading bar. This can be directly traced to the ids prop being undefined.

Steps to reproduce:
The pattern I've noticed: the first attempt at loading a ReferenceManyField renders properly. Any subsequent loads of that ReferenceManyField will not be rendered properly.

In other words, I first load Dealer 1 with referenced salespeople. Loading Dealer 2 (or Dealer 3, Dealer 4, etc.) will not render the salespeople. Going back and loading Dealer 1 again, however, will render the salespeople.

My guess is this is some sort of issue related to the AOR cache. Notice how the id prop here is undefined-undefined-objectObject-63822:

referencemanyfield - broken

Related code:
Here is my Edit component for Dealers:

export const DealerEdit = props => (
  <Edit {...props} title="Edit Dealer">
    <SimpleForm>
      <TextInput source="name" validate={required} />
      <ReferenceManyField
        reference="salespeople"
        target="dealerId"
        label="Salespeople"
      >
        <Datagrid>
          <TextField source="firstName" label="First Name" />
          <TextField source="lastName" label="Last Name" />
          <EmailField source="email" />
          <DateField source="createdAt" label="Created" />
          <DateField source="updatedAt" label="Updated" />
          <EditButton />
        </Datagrid>
      </ReferenceManyField>
    </SimpleForm>
  </Edit>
);

And here is the data returned from my restClient (using Apollo under the hood):

// GET_ONE (Dealer)
{
  "data": {
    "_id": "5ac7df3b5bc8ae1454ebd549",
    "id": "5ac7df3b5bc8ae1454ebd549",
    "name": "Dealer 1",
    "__typename": "Dealer",
  }
}

// GET_MANY_REFERENCE (Salespeople)
{
  "data": [
    {
      "_id": "5ad3b59fc7d879946ca7e5bc",
      "id": "5ad3b59fc7d879946ca7e5bc",
      "firstName": "John",
      "lastName": "Salesman",
      "email": "johnsalesman@dealer.com",
      "createdAt": "2018-04-15T20:27:11.924Z",
      "updatedAt": "2018-04-16T21:35:31.259Z",
      "__typename": "DealerUser",
    }
  ],
  "total": 1
}

Environment

  • Admin-on-rest version: 1.4.0
  • React version: 16.3.1
  • Browser: Chrome 65.0.3325.181 (Mac)

@fzaninotto This can be closed. The issue was that the rest client was unintentionally mutating the rest params filter, which seemed to break the cache.

@evancorl Can you elaborate regarding your findings. I'm having a similar issue and trying to crack the problem.