Home App Docs Blog Github

Get content references inside a content item's Custom JS block

I had a very helpful answer to a post here: Drag and Drop Data Binding

But…it leaves me trying to figure out how I can get data from an item which is a Reference in my selected content item. I have a Blog Post for which I have an Author as a reference. I also have a list of Blog Categories that I am trying to get detailed information about.

context.builderContent.data.author.fullname doesn’t work
context.builderContent.data.author.data.author.fullname ?
context.builderContent.data.author.value.author.fullname ?
context.builderContent.data.author.data.author.value.fullname ?

I’d posted the following comment on that prior post asking the follow up question, but fear that since I marked the question as solved it won’t be seen as an update to the same question…

And…if I have a field which is a reference to an item in another content type? For instance I want to get the fullname of an author which is associated with a blog article? I see the author shows up an object: _app.js:1 {@type: “@builder.io/core:Reference”, id: "06b3e264ec59403daedca3ec8db5} do I have to make a content API call to get the related data? It seems odd to have to make a content API call to include refs.

1 Like

I’ve had this come up in two different places now. I am also trying to create a page which is a blog index (fine) which also includes information for specific selected blog posts. I have created an input for box in which I have a list of references to blog articles. I’m repeating a box within that box based on the values in that list. I’m trying to look up the Title and lead image that are on the Blog Article type, but i only get Type, Id and Model as available to choose from. Do I need to make a separate query for the information for the referenced items? can I dereference them in Custom JS code?

1 Like

Thanks @alex_lindsay_manime for reporting, we found an issue where those values are not available while editing, and have a fix coming, should be included in the next release.

Users can opt in to including refs by sending an includeRefs param with the API request if you’re using the API directly or if in react you can pass it directly to the BuilderComponent

<BuilderComponent model="my-page-model" options={{ includeRefs: true }} .../>

And you should be able to see the references values on the context object while previewing (pressing preview current draft) or in production ( after publishing), and soon while editing once we deploy the fix.

Thanks Aziz -

Yeah - I’m doing a separate fetch in the custom JS and adding includeRefs as a workaround.

Great to hear that there’s a fix coming.

1 Like