How to prevent unfetch/undefined data when add or remove a new slice in the same page?

Developing with Prismic
, ,
1

Hi community! Hope doing greath.

I'm trying to improve the code of an application (NextJs) about how storage DATA fetched by Prismic, e.g in a page. Let me give you a quickly example.

I'm saving this data in this variables:
image

Then will be used in the COMPONENT (the page in this case).
image

But if we want to add a NEW PARAGRAPH (third_paragraph) this will broken the code because the next nodes from PRISMIC going to change. Or maybe you want to delete the cta_primary = slices[6].primary.cta_label and the const cta_secondary = slices[7].primary.cta_label is not going to be 7, now is 6.

How do you handle this type of situations? Somone have experience dealing with this situation? How is the best way to storage the info from PRISMIC in our NextJs project?

Thanks :slight_smile:

2

Hello @marko.bertonati

Welcome to the Prismic community and thanks for reaching out to us.

To handle this scenario, you need to define an additional property on the slice, such as type/category, and apply the checks on the code. For example:

for (slices:slice){
if(slilce.type=='paragraph'){
//handle properties for paragraph
}  else if(slice.type=='device'){
//handle properties for device 
}

You can also write different components for handling these cases. One example is here to check our starter project:"

Thanks,
Priyanka