Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

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

default discord avatar
.wsz2 years ago
4

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} </>
 }
  • discord user avatar
    jarrod_not_jared
    2 years ago
    @646271936460095508

    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
    .wsz2 years 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?

  • discord user avatar
    jarrod_not_jared
    2 years 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
    .wsz2 years ago

    got it tyvm

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.