Custom relationship field won't load

[RapidOwl]

I'm back after going down a bit of a rabbit hole.

TL;DR:

• I copied the Relationship.tsx from the Payload repository.
• I updated all the imports to use payload/dist instead of relative paths.
• I've configured a collection to use my CustomRelationship as the field for a Relationship.

I have two new problems that occur depending on minor changes to a single import.

The useEffect race condition

If I use import optionsReducer from 'payload';, when the field loads, it errors because the effect that loads the relationTo docs from the API finishes AFTER findOptionsByValue({ value, options }); is called. So the options property is empty when it hits a forEach.

I noticed that the import for the optionsReducer was coming from payload whereas all my other imports were coming from the dist folder.

I changed the import to import optionsReducer from 'payload/dist/admin/components/forms/field-types/Relationship'; and that caused...

No matched field found for "foo"

When the page loads, there is no error, but instead of the relationship field, I see the message No matched field found for "Categories".

In RenderFields/index.tsx, let FieldComponent = fieldTypes[field.type]; doesn't seem to be finding my component any more.

I've no idea how to investigate this further so if anyone could help, that would be brilliant. Here's a repository with my current set up: https://github.com/RapidOwl/payload-custom-component

[IAmNatch]

Did you ever resolve this?

[RapidOwl]

Nope. If I remember correctly, my goal was to give Relationship options different icons. In the end I took a different approach to the UI and used Payload's built in Block component.

[DanRibbens]

After reading this comment, we should add a classname if there isn't already one to make this easier handled with a custom css ::before rule.

[RapidOwl]

Do you mean a class name that we could specify per collection so when we're pulling multiple different collections into a relationship, we could style each one separately?

[DanRibbens]

Yes, by adding a classname that includes the slug.

[RapidOwl]

Oh I love that idea. Adding an extra class to the relationship--multi-value-label__content element would mean we could add a little icon inside the border.