Multiple `BuilderComponent`s

Technical Questions
1

Hello, pardon me if I’ve missed a solution for the following issue somewhere else, haven’t found anything related.

I want to show multiple Sections inside a popup (without SSR). In order to achieve that I’m adding multiple BuilderComponents.

<BuilderComponent
          model="registration-block"
          options={{
            userAttributes: {
              locale,
            },
            query: {
              'data.position': 'top',
              'data.isActive': true,
            },
          }}
        />
/* .................. */
<BuilderComponent
          model="registration-block"
          options={{
            userAttributes: {
              locale,
            },
            query: {
              'data.position': 'bottom',
              'data.isActive': true,
            },
          }}
        />

The important thing is that the model is the same for the two components. If written as above code makes only one request to Builder API and uses the result in both components.

Seems like BuilderComponent caches results just by the model name. A workaround that I found is to add key to options like that:

<BuilderComponent
          model="registration-block"
          options={{
            key: 'bottomThing',
            userAttributes: {
              locale,
            },
            query: {
              'data.position': 'bottom',
              'data.isActive': true,
            },
          }}
        />

It works but it produces requests to API that I would consider broken because it uses non-existent endpoint (bottomThing) and overwrites the model with query parameter:

"https://cdn.builder.io/api/v1/query/key-12345/bottomThing?omit=meta.componentsUsed&apiKey=key-12345&userAttributes.locale=ja&options.bottomThing.query=%7B%22data.position%22%3A%22bottom%22%2C%22data.isActive%22%3Atrue%7D&options.bottomThing.model=%22registration-block%22"

Another option is to get content via builder API (doesn’t matter serverside or from the client) and feed it directly to content property of BuidlerCompenent. But it’s less descriptive and requires extra code.

Am I missing something? Is this a by-design behavior for BuilderComponent?
Maybe I should use a different approach altogether.

2

Hi @Ivan.1,

To pull in content entries from different models you can use the built-in Symbol block. This allows you to select another model, and then an entry from that model to add other content to your page.

Screen Shot 2022-05-02 at 12.57.46 PM

3

Hi @Ivan.1,

In the code yes it is recommended to use the key prop as outlined here: How come having multiple calls to the API to the same content model, or having multiple <BuilderComponent> elements of the same model type, doesn't render as I expect?

The API requests look broken but the SDK is able to resolve them and serve the right content, which is by design, using the key prop is our recommended method to prevent the result caching.

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

1 Like