Admin-On-Rest - ReferenceField making multiple queries instead of Deduplicated queries as written in docs

Question

I am creating an editor field that displays some posts

code below

export const EditorView = (props) => {
  return (
    <List {...props} title="Fresh Tales">
      <Datagrid>
        <TextField source="id" />
        <TextField source="text" />
        <ReferenceField label="Writer" source="writerId" reference="writers">
          <TextField source="name" />
        </ReferenceField>
      </Datagrid>
    </List>
  )
}

The docs for reference field here

Suggest that referenceField de-duplicates API queries while the query I see on the mock API for every query are. There are 2 issues for me here.

1) Every query is being made twice - once with OPTIONS and once with a GET

2) Every writer resource in the ReferenceField is being fetched by a single query to Writers.

OPTIONS /tales?_sort=ID&_order=ASC&_start=0&_end=10 204 0.168 ms - -
GET /tales?_sort=ID&_order=ASC&_start=0&_end=10 304 2.130 ms - -
OPTIONS /writers/312 204 0.148 ms - -
OPTIONS /writers/314 204 0.153 ms - -
OPTIONS /writers/316 204 0.190 ms - -
OPTIONS /writers/318 204 0.226 ms - -
OPTIONS /writers/320 204 0.116 ms - -
OPTIONS /writers/322 204 0.118 ms - -
OPTIONS /writers/324 204 0.142 ms - -
OPTIONS /writers/330 204 0.135 ms - -
OPTIONS /writers/340 204 0.122 ms - -
OPTIONS /writers/350 204 0.129 ms - -
GET /writers/312 304 1.769 ms - -
GET /writers/314 304 0.884 ms - -
GET /writers/316 304 4.023 ms - -
GET /writers/318 304 2.928 ms - -
GET /writers/320 304 0.759 ms - -
GET /writers/322 304 1.126 ms - -
GET /writers/324 304 1.040 ms - -
GET /writers/330 304 1.687 ms - -
GET /writers/340 304 0.653 ms - -
GET /writers/350 304 0.771 ms - -

This seems quite heavy and wasteful. Loading every writer on to the view is a new request. Can't figure out if I am wrong or the docs are.

Answer 1

The fact that you see an OPTIONS and a GET request is an effect of CORS (Cross-Origin-Resource-Sharing - google that term) and is normal if your API and the admin aren't on the same domain.

As for grouping all calls into one if your API supports it, it's your responsibility to do it in your restClient.

You're probably using a custom REST client, or the jsonServerRestClient, which doesn't support this option.

For instance, here is how it is done in the simpleRestClient:

    case GET_MANY: {
        const query = {
            filter: JSON.stringify({ id: params.ids }),
        };
        url = `${apiUrl}/${resource}?${queryParameters(query)}`;
        break;
    }