Reference object empty in preview

[jjablonski]

Hi I have a problem with a reference not including value in the visual editor. When I open the page im draft preview the reference is populated correctly.

Visual editor console:

{
    "@type": "@builder.io/core:Reference",
    "id": "fc2bbeb07092495b8ea7f1a49a705096",
    "model": "category"
    // "value" key missing
}

Draft preview console:

{
    "@type": "@builder.io/core:Reference",
    "id": "fc2bbeb07092495b8ea7f1a49a705096",
    "model": "category",
    "value": {
        "data": {
            "title": "Article"
        },
    }
    // More props...
}

This is the component schema:

Builder.registerComponent(LazyContentDisplay, {
  name: "ContentDisplay",
  inputs: [
    {
      name: "items",
      type: "list",
      subFields: [
        {
          name: "categories",
          type: "list",
          subFields: [
            {
              name: "category",
              type: "reference",
              model: "category",
            },
          ],
        },
        // More fields ...
      ],
    },
    // I tried the top level reference field, but it also doesn't work
    // {
    //   name: "test",
    //   type: "reference",
    //   model: "category",
    // },
  ],
})

Basically I want to have a list of all categories used by items and because of this issue it’s working only in the app but not in visual editor.

I know I can fetch all the categories and map them to ids but I wonder if there’s a cleaner way to do it.

Is there a way to make it work?

[manish-sharma]

Hello @jjablonski,

You may find help at the below forum post

Builder not passing reference value while in the visual editor

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 websit…

[jjablonski]

Thanks for the reply. Looks very similar but I think it differs a bit. In my case the category is a data model and I’m not using BuilderComponent to display it.

includeRefs sounds like a property I’m looking for but I would expect something more like this:

        subFields: [
            {
              name: "category",
              type: "reference",
              model: "category",
              // 👇 This is just an example
              options: {
                includeRefs: true,
              },
            },
          ],

… so component’s props are already populated with the reference data. Can I add this includeRefs prop somewhere else then BuilderComponent?

[manish-sharma]

Hi @jjablonski,

Currently, you can’t pass includeRefs: true from the custom components, either you will have to pass it with BuilderComponent or fetch the required data within the custom component as shown in the below forum post

How to get CMS data model data for a Custom Register component?

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank. Builder content link What are you trying to accomplish I have created a custom component ConnectorsBlock and add it in a Page. For this custom component, I want to fetch data that also lives in Builder in a CMS data model called Connector Item. I was trying to use getAsyncProps to get connectors info in t…

[jjablonski]

How come it works in the app then? On the web application the props come with the value object right away. Fetching it separately and combine the data using the IDs sounds like an overkill to ONLY make it work in the visual editor.

I just noticed that refreshing a visual editor view renders the fetched categories correctly for a brief second and then they disappear. I checked the logs and in fact there is value fetched correctly and then the page refreshes and loses the value field.

This looks like bug

[manish-sharma]

Hello @jjablonski,

Our app uses query API which is a little different than the content API used on the client side, if you could please share the builder content link where we can reproduce this issue would be much appreciated. Thank you~

[jjablonski]

Hi, sure. Here’s the link Builder.io: Drag & Drop Headless CMS

Let me know if I can provide anything more to help you solve this issue, thanks

[manish-sharma]

Hello @jjablonski,

We are not able to reproduce the issue, passing options={{ includeRefs: true }} with the BuilderComponent seems to work for us,

<BuilderComponent model="page" content={page || undefined} options={{ includeRefs: true }} />

For reference, I’ve recorded a loom that you can refer to

[jjablonski]

Hi, thank you for taking your time to provide this answer.
It is indeed working as expected now; I was just looking one level too deep, completely forgetting that I was rendering the whole page that had the component from BuilderPage. After adding includeRef to the BuilderPage, it works fine in the visual editor as well.

One last question regarding this topic - includeRefs is marked as deprecated now:

@deprecated — use enrich instead

Yet, enrich: true doesn’t seem to work the same way.

Is there a documentation somewhere of this property, or is it still work in progress? (I’m running @builder.io/react version 3.0.7)

[manish-sharma]

Hello @jjablonski,

We still want to support includeRefs and noTraverse (aka be backwards compatible), but we will update docs to focus on this new simpler query param enrich to avoid any confusion.

[manish-sharma]

Hi all,

To include reference field values in the response and make them available in the editor for use, you will need to use the “enrich: true” option. Add the “enrich: true” option to the builder.getAll call and BuilderComponent.

For example:

const pages = await builder.getAll('page', {
  // to fetch references and Symbols
  options: { enrich: true }
});

      <BuilderComponent
        options={{ enrich: true }}
        model="page"
        content={page}
      />

To know more, you can refer to the following documentation link Fetching References and Symbols with enrich