Errors when attempting `payload` access

ssyberg5 months ago

4

import React from 'react';
import payload from 'payload';
  
  
const SyndicationCell = (props) => {
    const { field, colIndex, collection, cellData, rowData } = props;
    const result = payload.findByID({
        collection: 'blogs', // required
        id: rowData.id, // required
    })
    return <span>{rowData.id}</span>;
  };
  
export default SyndicationCell;

• 

  dribbens

  2 years ago

  The error you're seeing is because webpack cannot handle all the backend code that comes with Payload when doing that import.

  
  

  This is not the right way for the frontend component to get the data you need.

  
  
  

  You have 3 options for getting data in your component.

  
  

  1) use the props on cell, which you're already doing.

  
  

  2) Use the relationship provider that wraps the table to get relational data (which looks like what you need to do)

  
  

  3) do HTTP requests using

  fetch

  or a package like

  axios

  in your component or in a custom provider.

  
  
  

  We haven't documented that RelationshipProvder anywhere in the docs, but this might be a good thing to add since there isn't a reason why you can't use it in your custom cell components.

  
  https://github.com/payloadcms/payload/blob/master/src/admin/components/views/collections/List/RelationshipProvider/index.tsx
  

  Note that since you're replacing the cell and normally that data is requested from the cell, you might also need to copy some parts of the relationship cell to get request the docs get loaded by the relationship provider:

  https://github.com/payloadcms/payload/blob/master/src/admin/components/views/collections/List/Cell/field-types/Relationship/index.tsx
  
  

  That is cool!

  
  
  

  So you effectively have a collection acting as a join table?

  
  
  

  I would just make another

  fetch

  request in your cell type then.

  
  
  

  The relationship provider won't help since it is querying with depth 0 and you would need depth 1 to get the data you're after

  
  
  @1069626017846665307

  That is expected. The relationship provider is meant to reduce duplication of requests on the list view. It is written this way so that if you have multiple columns of redundant relationships being loaded in, it can be as efficient as possible by only accessing that data once from the DB. I don't see a problem with what you have above, nice job!

• 

  bombnp2 years ago

  Hi,

  @778799229988110337

  . I'm also doing something similar that might require M2M relationship with additional attributes in payload (say,

  Books

  and

  Tags

  , with additional attributes)

  
  
  

  How do you plan on creating new relationships inline? I'm trying to find a solution but i'm not sure what's the most elegant way to do it.

• 

  jellygatorade2 years ago

  Necroing this thread to ask

  @969226489549713438

  if something like this would be preferred method of utilizing the

  RelationshipProvider

  in a custom

  Cell

  component.

  
  
  

  import { useListRelationships } from "/node_modules/payload/dist/admin/components/views/collections/List/RelationshipProvider";
  
  const ImageCell = (props) => {
    const { field, colIndex, collection, cellData, rowData } = props;
  
    const { getRelationships, documents } = useListRelationships();
  
    useEffect(() => {
      getRelationships([
        {
          value: cellData,
          relationTo: field.relationTo,
        },
      ]);
    }, [getRelationships]);
  
    return (
      <>
        {documents?.[field.relationTo]?.[cellData]?.sizes?.thumbnail?.url && (
          <img
            src={documents[field.relationTo][cellData].sizes.thumbnail.url}
            style={imageStyle}
            height={size}
            width={size}
          ></img>
        )}
      </>
    );
  };

  
  

  It looks like

  documents

  object holds returned data on all relationships in the collection type, not just the

  cellData

  passed originally into

  getRelationships()

  ? Therefore the related data I am interested in must be accessed by accessing these keys on

  documents

  ->

  documents[field.relationTo][cellData]

  ... which is not what I expected having passed that information into

  getRelationships()

  originally.

  
  
  

  Great! Appreciate the insight. Thanks!

• 

  tyteen4a03last year

  This should be in the documentation

  
  
  

  also, any chance this can support Suspense (as I assume payload will need to make a network request)?