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?

Technical Questions
1

Sometimes, it makes sense to have multiple versions of a given content type on the same page. For example, maybe you have a model for an ad block on your page, and you want multiple ad blocks in a row. However, if you make multiple calls to

const first = builder.get(myModel, { query: { id: 123 } });
const second = builder.get(myModel, { query: { id: 456 } });
const third = builder.get(myModel, { query: { id: 789 } });

or in the actual rendering element:

<BuilderComponent model={myModel} options={{query: {id: 123 }}} />
<BuilderComponent model={myModel} options={{query: {id: 456 }}} />
<BuilderComponent model={myModel} options={{query: {id: 789 }}} />

You may notice that your response, or your rendered content is just all the last result. This is because of optimizations within our API that prevents accidental, duplicate calls to the API from returning the same response multiple times.

But what if we WANT multiple calls to be made and return DIFFERENT responses? Just include a key prop, and our API will recognize these calls as unique and make sure to return unique responses. So based on the examples above, we just need to update out code like so:

const first = builder.get(myModel, { 
  key: 1,  
  query: { id: 123 } 
});
const second = builder.get(myModel, { 
  key: someUniqueValue, 
  query: { id: 456 } 
});
const third = builder.get(myModel, { 
  key: 'someString',  
  query: { id: 789 } 
});

<BuilderComponent model={myModel}  key={1}  options={{query: {id: 123 }}} />
<BuilderComponent model={myModel} key={someUniqueValue} options={{query: {id: 456 }}} />
<BuilderComponent model={myModel} key='someString' options={{query: {id: 789 }}} />

Try it out! Let us know if you have any questions or hit any issues!

1 Like