Builder not passing reference value while in the visual editor

Technical Questions
,
1

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

Builder content link

With this preview URL:

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

image
image857×381 23.8 KB

image

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

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

image
image767×291 35.9 KB

Happens with both next dev server and production build.

Code stack you are integrating Builder with
NextJS, React

2

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.

Another option is to dynamically fetch references by given Id;

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

Hope this helps!

3

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