As you know, when you would like to access a data from builder, by default the upper one is the returned one.
In my code I have 2 symbols:
<Container>
<BuilderComponent
model="symbol"
data={localizedData(filteredData?.data, true)}
/>
<BuilderComponent
model="symbol"
options={{ query: { id: 'dea1ff8b5458485b91c0eb55ab7cf189' } }}
data={{
leftData: leftData,
rightData: rightData,
locale: locale,
}}
/>
</Container>
And this way I am passing the data to the symbol.
This is the order in the editor. (The customer-story-promo is the bottom one in the code, where I query by id)
The issue is:
The bottom one is not displaying correctly, but if I switch the order between the two data in the editor:
This way the bottom one correctly displayed.
Why?
Looks like 2 same type of symbol on one page is buggy, if I delete any of these, works properly, but if both are there, something goes wrong
Link to these 2 symbol:
Here is the full code to try out yourself, this is very important, please let me know:
import React from 'react'
import { BuilderComponent, Builder, builder } from '@builder.io/react'
import { useRouter } from 'next/router'
export async function getStaticPaths() {
const pages = await builder.getAll('barion-userstory-data', {
options: { noTargeting: true },
limit: 99999,
omit: 'data.blocks',
})
const paths = pages.map((post) => ({
params: { id: post.data.name },
}))
return {
paths: paths,
fallback: true,
}
}
export async function getStaticProps({ params, locale }) {
if (locale == 'default') {
return {
props: {
article: null,
navbar: null,
footer: null,
subfooter: null,
},
revalidate: 5,
}
}
const filteredData =
(await builder
.get('barion-userstory-data', {
query: {
name: params.id,
},
})
.toPromise()) || null
let enumlocalization =
(await builder
.get('enum-type-localization', {
options: {
includeRefs: true,
noTraverse: false,
noTargeting: true,
query: {
name: 'data',
},
},
})
.promise()) || null
const hero =
(await builder
.get('hero-data', {
query: {
id: '32f148657e2646be8562eb4e6ebfa190',
},
})
.toPromise()) || null
const leftData =
(await builder
.get('barion-userstory-data', {
query: {
id: 'bca70ed951ae400995c38d8622da2d18',
},
})
.toPromise()) || null
const rightData =
(await builder
.get('barion-userstory-data', {
query: {
id: 'e54dacffe24f4cfb823c471c4616c4a6',
},
})
.toPromise()) || null
console.log(leftData)
console.log(rightData)
return {
props: {
filteredData,
enumlocalization: enumlocalization.data,
hero,
leftData,
rightData,
},
revalidate: 5,
}
}
const CustomerStoryDetail = ({
filteredData,
enumlocalization,
hero,
leftData,
rightData,
}) => {
const { locale } = useRouter()
const localizedCountry = (enuma) => {
return enumlocalization?.country.find((item) => item.key.type == enuma.type)
?.value?.[locale]
}
const localizedIndustry = (enuma) => {
return enumlocalization?.industry.find(
(item) => item.key.type == enuma.type
)?.value?.[locale]
}
const localizedSolution = (enuma) => {
return enumlocalization?.solution.find(
(item) => item.key.type == enuma.type
)?.value?.[locale]
}
const localizedData = (data, isDetail = false) => {
return {
backgroundImage: data?.backgroundImage,
backgroundImageAltText: data?.backgroundImageAltText?.[locale],
detail: {
...data?.detail,
description: data?.detail?.description?.[locale],
descriptionExplanation: data?.detail?.descriptionExplanation?.[locale],
employees: data?.detail?.employees?.[locale],
qa: data?.detail?.qa?.[locale],
},
industry: localizedIndustry(data?.industry),
country: localizedCountry(data?.country),
solution: data?.solution.map((sol) => localizedSolution(sol.solution)),
logo: data?.logo,
name: data?.name,
threeGridList: data?.threeGridList?.[locale],
threeGridName: data?.threeGridName?.[locale],
title: data?.title?.[locale],
isDetail: isDetail,
}
}
return (
<div style={{ marginTop: '110px', paddingBottom: '40px' }}>
<BuilderComponent
model="symbol"
options={{ query: { id: 'd0b1658f80c94928af1b96b4877ca9c9' } }}
data={localizedData(filteredData?.data, true)}
/>
<BuilderComponent
model="symbol"
options={{ query: { id: 'dea1ff8b5458485b91c0eb55ab7cf189' } }}
data={{
leftData: leftData,
rightData: rightData,
locale: locale,
}}
/>
<BuilderComponent
model="hero"
data={{
result: hero,
locale: locale,
}}
/>
</div>
)
}
export default CustomerStoryDetail
