Loading relationship data in custom Cell component

[reiv]

If you have a relationship field and define a custom Cell component for it, that component will only receive the id of the related document, which isn't very useful on its own. The default RelationshipCell fetches the associated data with a form of request batching and involving an intersection observer to prevent loading off-screen data. It would be nice if it were possible to make use of this mechanism from custom Cell components as well so that you're not forced to write this kind of logic yourself. I see two possibilities here:

• Wrap the RelationshipCell data fetching logic in a hook and expose it as useRelationship or something like that (user would be responsible for passing the intersection ref)
• Expose and extend RelationshipCell with a render prop that can be used by the custom Cell to display the related data in a different manner (intersection ref is already included)

[DanRibbens]

I definitly see your point here.

I think the way I would implement this would be pass any custom RelationshipCell components as children props and render it instead of the default template. That way instead of rendering only the default or the custom component, we'd render both and the same props would be passed through to the custom component.

Does that make sense?

[reiv]

I'm not sure I understand what you mean by children props here. Could you give a brief example of how such a custom component would be defined in the field config?

[DanRibbens]

Ah! I wasn't very clear. My comment was meant to explain how the Payload relationship cell code could be changed to make your situation easier. For now you'll have to copy most of the code in the Payload component and then customize it how you need.

We'll discuss this internally to see if it's the right direction.

[slavanossar]

Did anything ever come of this? I wanted to wrap the items in the cell in <Link> components for easy access to the relevant docs, came across this same issue while building out my custom component.