Populate Data In Cell Component

[bright kayak]

According to this doc -> https://payloadcms.com/docs/admin/components#cell-component, I can create my custom cell component to display data in the List view.
How would I go about populating the related fields here? Currently, the props passed to the custom component only have an array of IDs or a single ID. I want to display the image thumbnail in the list instead of the ID for that image.
So I have products and they have images(related to the media collection) and I want to display them in the table(List view).
I tried using the Local API to call findById (https://payloadcms.com/docs/local-api/overview#collections) but I got all sort of errors.

[frank galleon]

The List component itself fetches extra data using the REST API for relationships.
Example: /api/tenants?depth=0&... (see image)

So I would recommend the REST API

[bright kayak]

Thanks for your help. I called the api from the component. Not sure if this is efficient but it works for now. The code snippet if anyone needs it:

import React, { useEffect, useState } from "react";
const baseUrl = process.env.PAYLOAD_PUBLIC_SERVER;

export const ImageCell = (props) => {
    // learn more about cell component --> https://payloadcms.com/docs/admin/components#cell-component
    const { rowData } = props;
    const [product, setProduct] = useState();

    useEffect(() => {
        fetch(`${baseUrl}/api/products/${rowData.id}/?depth=1`)
            .then((d) => d.json())
            .then((i) => setProduct(i));
    }, []);

    return (
        <>
            {product && product.image && (
                <img src={product.image.url} style={{ borderRadius: "100%" }} height="40" width="40"></img>
            )}
        </>
    );
};

[pallid crystal]

I have this same question - would love to see the "local api" version of this