Populate Data In Cell Component

bay_breezy3 years ago

4

• 

  thgh.3 years ago

  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
• 

  bay_breezy3 years ago

  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>
              )}
          </>
      );
  };

• 

  ssyberg3 years ago

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

• 

  dribbens

  3 years ago

  See my response in this post:

  https://discord.com/channels/967097582721572934/1042513404390285392
  

  Internally Payload uses the same relationship provider for upload collections.

  
  

  That might help you here.