Bind a section model's input to a custom component

Technical Questions
1

Builder content link
Builder.io: Drag & Drop Headless CMS (preview only works locally at the moment)

Builder public api key
3c3de37487814a68808f45b7c8e762e3

What are you trying to accomplish
What we want to do is the following:

  1. Create an Ecommerce item CMS data model to contain our products’ information.
  2. Create an Ecommerce item page section model for every Ecommerce item.
  3. Create an Ecommerce category CMS data model to contain our categories’ information.
  4. Create an Ecommerce category page section model for every Ecommerce category.

The reason we are using section models instead of page models is that we want to lock the page URLs to the ecommerce data slug properties. If editors could change the URL of an Ecommerce item, it would break the Ecommerce category page.

So with that being said, we want to add a field to the Ecommerce item page section model that’s a reference to an Ecommerce item CMS data model and have that be a default binding to a custom component. When I register the custom component for “Ecommerce item”, it has the following settings:

defaults: {
  bindings: {
    // Why can't I do this?
    'component.options.ecommerceItem': 'ecommerceItem',
  },
},
inputs: [
  { name: 'ecommerceItem', type: 'reference', model: 'ecommerce-item' },
],

When I output my Ecommerce item page section model, I see the ecommerceItem in the response under data. However, when I try to bind it like this, I always get null. I’ve added includeRefs: true.

Code stack you are integrating Builder with
Next.js.

2

For some reason, when I broke something and restarted my local dev environment, the above worked perfectly. So I guess it was just an environmental issue…