Builder not passing reference value while in the visual editor

[efogdev]

Hi there, I have a bug with the custom component here on easyplant.

Builder content link

Builder.io: Drag & Drop Headless CMS

With this preview URL:

7 Best Indoor Plants for Beginners | easyplant

Builder public api key
b701a8b1c4d744048ad10c35760795f4

What are you trying to accomplish
I’ve created a custom component “BlogRelatedArticles”. It has an input named “articles” which is a list of references to the “blog-article” model. So, in my component I use props to get that “articles” array and get actual articles from there. It works perfectly fine when I’m on the website, but I don’t have a “value” field for any article while I’m in the Builder visual editor. Please see the screenshots.

Screenshots or video link

Here is what I see on Builder (no “value” field):

And here is what I see if I go to the actual website:

Happens with both next dev server and production build.

Code stack you are integrating Builder with
NextJS, React

[manish-sharma]

Hello @efogdev<

We do have a new option available to include references in the builder state. If you go ahead and add options={{ includeRefs: true }} to the SDKs <BuilderComponent> it should include references to the relevant models, and give you the data that you want.

Can't get reference field data in state

I understand now, thank you for clarifying. Currently, models that reference other models will only include the reference data, not the data of the referenced model itself. Our system is set up to be extremely flexible, so there are many different ways you can use that model reference to then access the necessary data, as you have mentioned calling the content API is one such way. You could also connect the insurancePartners data on the page, just as you have done with the insuranceCategories, …

Another option is to dynamically fetch references by given Id;

blog-article(query:
{
id: “{’$in’: [list of ids]}”
}
)

Hope this helps!

[efogdev]

@manish-sharma

options={{ includeRefs: true }}

Thank you, this helped. I already tried to fetch IDs dynamically but the promise never resolves when in Builder.