Customizing type:"relationship" admin.components.RowLabel field - am i doing it right?

default discord avatar
wsz
7 months ago
6

Hello,


I want to customize the

RowLabel

of a

relationship

field to display the title and subtitle of the collection item it is related to


My issue is that

data

from

RowLabel: ({ path, data, index }) => {}

only contains for example

Object { id: "6438e283fbaec9259f48dde3", projects: "6438d9306be920572b3b8a59" }


And i'd like to access the data of the project it points to


But i cannot figure out if it's possible to raise the

depth

somewhere to achieve that



My understanding is that i cannot use the local API in a react component, and therefore cannot use

import payload from 'payload'

is that correct?



For now i have the following snippet that works but i am using a

GET

to fetch the data from the project and it doesn't feel right


Is there a better way to do this?



  admin: {
    components: {
      RowLabel: ({ path, data, index }) => {
      const [title, setTitle] = useState(null);
      const [subtitle, setSubtitle] = useState(null);
      console.log(payload) // returns an empty function
      useEffect(() => {
        axios.get("http://localhost:3000/api/projects/"+data.projects).then((res)=>{
        setTitle(res.data.title)
        setSubtitle(res.data.subtitle)
    })
  }, [data])
 return <><span style={{color:"gray"}}>{`Project ${String(index).padStart(2, '0')}`}</span>&nbsp;&nbsp;<b>{title}</b>&nbsp;{subtitle} </>
 }
  • default discord avatar
    Jarrod
    7 months ago

    @wsz I think this is the right approach. This is exactly why we exposed the ability to render custom react components with RowLabel. You could narrow you useEffectHook dependency to just

    data.projects

    also 👍

  • default discord avatar
    wsz
    7 months ago

    thanks 👍


    Sorry if dumb follow up question :


    If I use NextJS with Payload, i could use the local api (

    payload.find(), payload.findByID()

    , etc..) on these components? That's the whole point right?

  • default discord avatar
    Jarrod
    7 months ago
    payload

    methods can only be used on a server, not on the frontend



    so you could use them in a RSC, but not a client component



    but in this case, you will be writing a client component so you will need to use fetch

  • default discord avatar
    wsz
    7 months ago

    got it tyvm

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.