BuilderComponent symbol data reference binding

Technical Questions
, ,
1

Hi!

I have a symbol in my Builder:

image
image391×672 25.3 KB

In this symbol we have a reference field, where I fetch the correct data model in the custom js tab by id, it works correctly if I use this symbol on my pages via drag-and-drop and click the reference in the editor.

But Now what I try to do is placing this symbol and passing the data to it from my code:

<BuilderComponent
        model="hero"
        data={{
          hero: {
            '@type': '@builder.io/core:Reference',
            id: '01da92a9dd324ae086fa21a657b35594',
            model: 'hero-data',
          },
          locale: locale,
        }}
      />

But on the page it shows me OUTSIDE OF REFERENCE:

image
image1404×488 37.1 KB

What is the problem with this?

2

Hi @radikris,

Thanks for getting in touch.

You may find help at Combining symbols with react components - #2 by korey

Let us know if you have any further questions or concerns. Thank you!

3

I updated my question and description with the new symbol, which is includedRefs:

Here is the link to the symbol:

So in this case, the state.hero ref should store the value of my json:
This is how I bind every field to this dynamically:
image
state.hero.value....

When I fetch the data from my code in getstaticProps:

  let tophero =
    (await builder
      .get('hero-data', {
        includeRefs: true,
        noTraverse: false,

        query: {
          id: '7de8be4731ec4ea69e532adc4e23c095',
        },
      })
      .promise()) || null

And when I pass the hero to my state:

  <BuilderComponent
                  model="hero"
                  options={{
                    query: '47854896424f4ae499952e68dc539a59',
                    key: 'tophero',
                    includeRefs: true,
                    noTraverse: false,
                  }}
                  data={{
                    hero: tophero,
                    locale: locale,
                  }}
                />

So the data is there, but it is not rendered on the symbol:

image
image854×556 31.8 KB

Builder-no-content is only there.

Tried with this as well, without success:

   <BuilderComponent
                  model="hero"
                  options={{
                    query: '47854896424f4ae499952e68dc539a59',
                    key: 'tophero',
                    includeRefs: true,
                    noTraverse: false,
                  }}
                  data={{
                    hero: { value: tophero },
                    locale: locale,
                  }}
                />

I added the includeRefs: true, so I don’t understand what else can cause this issue.

4

Hey @radikris what is the value you are binding to in the Symbol?

Also what is the value of tophero ? Does it have all the correct data shape as you expect it?

My guess is that you want to pass int tophero.data into the data prop, and not just tophero, as that is where you will get the actual input field values. tophero will contain the metadata as well as the data object you are looking for I suspect.

Test that out and let us know if that gets you the answer youre looking for!

5

I still cannot make it happen:

By your advice, we added the includeRefs to the page:

// This page is purely for using the Builder.io editor to edit symbols
export default function EditBuilderSymbol() {
  return (
    <BuilderComponent
      model="hero"
      options={{
        includeRefs: true,
      }}
    />
  )
}

The symbol bindings:
image
so REFERENCE here (but I won’t pass the reference to the symbol, I will pass the value)!

$block.eval(‘state’) log: shows it’s not only the data, all the meta fields as well, because we bind the reference in the symbol state, (and with the includeRefs: true, it also holds the value)

image
image1486×670 117 KB

And in the symbol we bind the data through:

For example:
image

state.hero.value.data?.description?.[state.locale]

And in my code, that’s why I try to bind to:

fetch the data:

  let tophero =
    (await builder
      .get('hero-data', {
        query: {
          id: '7de8be4731ec4ea69e532adc4e23c095',
        },
      })
      .promise()) || null

my tophero console.log

{
  createdBy: 'uw0UJ7VD7hS21zDPkekcB9zZgAD3',
  createdDate: 1659639067133,
  data: {
    buttonList: {},
    description: {
      '@type': '@builder.io/core:LocalizedValue',
      hu: 'Ismerd meg, hogyan használják a mások szerte a világon a Bariont a fizetési megoldásokhoz, az adatvezérelt felhasználói élmény javítására és az ügyfelek örömére.'
    },
    hasUnderline: true,
    heroContent: {},
    isFirstH1: true,
    superTitle: {},
    title: {
      '@type': '@builder.io/core:LocalizedValue',
      hu: '<p>Barion ügyfelek sikertörténetei</p>'
    }
  },
  id: '7de8be4731ec4ea69e532adc4e23c095',
  lastUpdatedBy: 'uw0UJ7VD7hS21zDPkekcB9zZgAD3',
  meta: { kind: 'data' },
  modelId: '60f37630962b4321934183c65ceec2a8',
  name: 'customer-stories-hero',
  published: 'published',
  query: [],
  testRatio: 1,
  variations: {},
  lastUpdated: 1659639198094,
  firstPublished: 1659639164966,
  rev: 'bxv7z2u3k4e'
}

So the symbol should store the data inside state.hero.value:

 <BuilderComponent
                  model="hero"
                  options={{
                    query: '47854896424f4ae499952e68dc539a59',
                    key: 'tophero',
                    includeRefs: true,
                    noTraverse: false,
                  }}
                  data={{
                    hero: {
                      value: tophero,
                    },
                    locale: locale,
                  }}
                />

I tried with removing the options includeRefs, noTraverse but did not help.
In my opinion, this should work, because I pass the locale, and the hero.value to the symbol, but I still got:

image
image759×139 4.92 KB

I also tried with hardcoded values just because of curiosity, I want to go with the previous approach:

 <BuilderComponent
                  model="hero"
                  options={{
                    query: '47854896424f4ae499952e68dc539a59',
                    key: 'tophero',
                    includeRefs: true,
                  }}
                  data={{
                    hero: {
                      '@type': '@builder.io/core:Reference',
                      id: '01da92a9dd324ae086fa21a657b35594',
                      model: 'hero-data',
                    },
                    locale: locale,
                  }}
                />

same no-content.

Hope now it makes sense, and you can help me figure out, what is the problem.

6

Hey @radikris I set up what I think is an approximation of your setup and was able to get it working…the piece you are missing is to spread the value into hero.value:

 <BuilderComponent
            model="hero"
            options={{
              query: '47854896424f4ae499952e68dc539a59',
              key: 'tophero',
              includeRefs: true,
              noTraverse: false,
            }}
            data={{
              hero: {
                value: {...tophero},
              },
              locale: locale,
            }}
          />

Even though the correct values were showing in the state inspector, for whatever reason it didnt seem to register it correctly, but spreading the values in was able to read and render as expected for me. Try it out and see if this works on your end as well, hopefully I set up my demo correctly!

7

I copied your answer:

image
image759×359 14.7 KB 

Error: error: Unexpected token `...`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier

For me it syntax error, and tried with {} as well, but not working:

   <BuilderComponent
                  model="hero"
                  options={{
                    query: '47854896424f4ae499952e68dc539a59',
                    key: 'tophero',
                    includeRefs: true,
                    noTraverse: false,
                  }}
                  data={{
                    hero: {
                      value: {...tophero},
                    },
                    locale: locale,
                  }}
                />

To save time, I will share with you the code in mail, can you please check out, what is missing?
Thank you!

8

Ah yes, apologies, in my haste I had a typo, in my code I also had {…tophero}

That being said, I think the issue is with your query prop, you arent including the value to query off of (in this case, id ) :upside_down_face:

 <BuilderComponent
                  model="hero"
                  options={{
                    query: { id: '47854896424f4ae499952e68dc539a59'},
                    key: 'tophero',
                    includeRefs: true,
                    noTraverse: false,
                  }}
                  data={{
                    hero: {
                      value: tophero,
                    },
                    locale: locale,
                  }}
                />
2 Likes
9

Well, ok, I checked everything except the most basic thing. Thanks for the quick win…