Search code examples
react-admin

React-Admin doesn't show column data in List component

I don't seem to be able to understand why data is missing. Here is my field:

<ReferenceField source="imageId" reference="files">
        <TextField source="urlPath" />
</ReferenceField>

Here is what the main model papers is returning:

brandId: "b3dc4246-3adf-4f4e-9f81-294f23d24977"
brandModelId: "2819360d-2e6e-48e4-88a3-823a03177a7c"
colorId: "98031f74-a83f-4389-b9d6-bab959ff8a0e"
gsm: 200
id: "058cc13d-1255-4d9b-9ccf-e087ddb3935d"
imageId: "1bc99717-f60c-485e-989a-5d1726501b8d"
originalSize: "A4"
paperMaterialId: "5afd0d7c-5ace-49e3-a538-894ce288fe71"
paperSurfaceId: null
price: 12
ref: "44202129"
storeId: "2f7567ad-fa62-4bda-851b-89b8c39a189e"

Here is what the related model files is returning:

id: "1bc99717-f60c-485e-989a-5d1726501b8d"
originalFileName: "palette1.2.png"
type: "undefined"
urlPath: "asdf/101d7c68-9bf4-4d55-bbb5-818f62c480a3-palette1.2.png"

but here is my screenshot with missing data: enter image description here

Note that the Store related field works, which has the exact same code:

      <ReferenceField source="storeId" reference="stores">
        <TextField source="name" />
      </ReferenceField>

Also, here is my getMany dataProvider:

  getMany: (resource, params) => {
    const query = {
      filter: JSON.stringify({ id: params.ids }),
    };
    const url = `${API_URL_LOCAL}/${resource}?${stringify(query)}`;

    return request(url, 'get', {}, {}).then(({ data }) => ({
      data,
    }));
  },

Any help is welcome.

Solution

  • In cases where you have some reference fields working, and others not, and no error is logged in console, this probably means that the non-working reference resource wasn't declared as Admin child with <Resource name="files" .../>.

    From react-admin docs:

    Note: You must add a <Resource> for the reference resource - react-admin needs it to fetch the reference data. You can omit the list prop in this reference if you want to hide it in the sidebar menu.

    https://marmelab.com/react-admin/Fields.html#referencefield

    If none reference resource is working, and the resources has been properly declared, the error will probably rely on your data provider. Log the responses for getMany requests and see if it match the expected format and if it contains any data and not an empty array:

    getMany     { data: {Record[]}, validUntil?: {Date} }

    A {Record} is an object literal with at least an id property, e.g. { id: 123, title: "hello, world" }.

    The validUntil field in the response is optional. It enables the Application cache, a client-side optimization to speed up rendering and reduce network traffic

    https://marmelab.com/react-admin/DataProviders.html#writing-your-own-data-provider