Hi
I have a staging site deployed at Home | Joe Fizz Asset Finance Ltd when I navigate to a page using the same template, not all the data is changing. I am asking this question here because I have another Next.js site using a different CMS and I don’t get this issue.
Here is the page code:
import React from 'react';
import { builder, BuilderComponent } from '@builder.io/react';
import BuilderPage from 'builder/Page';
import { get, includes, map, reject, trimStart } from 'lodash';
import { Helmet } from 'react-helmet';
import * as models from 'utils/models';
import Aos from 'vendor/Aos';
import Layout from 'layouts/Layout';
import Regions from 'regions';
const Page = ({ data }) => {
const slug = trimStart(get(data, 'url'), '/');
let bodyClass;
switch (slug) {
case 'insights':
bodyClass = 'posts';
break;
case 'case-studies':
bodyClass = 'projects';
break
default:
bodyClass = slug;
}
// console.log('Debug page [slug]:', data);
return (
<BuilderPage>
<Aos>
<Helmet>
<body className={`p-${bodyClass}`} itemScope itemType="http://schema.org/WebPage" />
</Helmet>
<Layout data={data}>
<BuilderComponent
model="page"
data={{
...(get(data, 'articles') && { articles: get(data, 'articles')}),
...(get(data, 'certifications') && { certifications: get(data, 'certifications')}),
...(get(data, 'events') && { events: get(data, 'events')}),
...(get(data, 'jobs') && { jobs: get(data, 'jobs')}),
organisation: get(data, 'organisation'),
...(get(data, 'patrons') && { patrons: get(data, 'patrons')}),
...(get(data, 'people') && { people: get(data, 'people')}),
...(get(data, 'posts') && { posts: get(data, 'posts')}),
...(get(data, 'products') && { products: get(data, 'products')}),
...(get(data, 'projects') && { projects: get(data, 'projects')}),
...(get(data, 'recipes') && { recipes: get(data, 'recipes')}),
...(get(data, 'reviews') && { reviews: get(data, 'reviews')}),
...(get(data, 'services') && { services: get(data, 'services')}),
...(get(data, 'stockists') && { stockists: get(data, 'stockists')}),
}}
/>
</Layout>
</Aos>
</BuilderPage>
);
};
export const getStaticPaths = async () => {
try {
let pages = await builder.getAll('page', {
options: {
fields: 'data.url',
noTargeting: true,
}
});
pages = reject(pages, page => {
return page.data.url === '/';
});
// console.log('Debug pages:', pages);
const paths = map(pages, page => get(page, ['data', 'url']));
// console.log('Debug paths:', paths);
return { paths, fallback: false };
} catch (error) {
console.error(error);
return null;
}
};
export const getStaticProps = async context => {
try {
const { slug = '' } = context.params;
console.log(slug);
const { data } = await builder.get('page', { url: `/${slug}` }).promise();
if (includes(get(data, 'models'), 'article')) {
data.articles = await models.getArticle(slug !== 'articles' ? 6 : null);
}
if (includes(get(data, 'models'), 'certification')) {
data.certifications = await models.getCertification();
}
if (includes(get(data, 'models'), 'event')) {
data.events = await models.getEvent(slug !== 'events' ? 6 : null);
}
if (includes(get(data, 'models'), 'job')) {
data.jobs = await models.getJob(slug !== 'jobs' ? 6 : null);
}
data.menus = await models.getMenu();
data.organisation = await models.getOrganisation();
if (includes(get(data, 'models'), 'patron')) {
data.patrons = await models.getPatron();
}
if (includes(get(data, 'models'), 'person')) {
data.people = await models.getPerson(slug !== 'people' ? 6 : null);
}
if (includes(get(data, 'models'), 'post')) {
data.posts = await models.getPost(slug !== 'insights' ? 6 : null);
}
if (includes(get(data, 'models'), 'product')) {
data.products = await models.getProduct(slug !== 'products' ? 6 : null);
}
if (includes(get(data, 'models'), 'project')) {
data.projects = await models.getProject(slug !== 'case-studies' ? 6 : null);
}
if (includes(get(data, 'models'), 'recipe')) {
data.recipes = await models.getRecipe(slug !== 'recipes' ? 6 : null);
}
if (includes(get(data, 'models'), 'review')) {
data.reviews = await models.getReview(slug !== 'reviews' ? 6 : null);
}
if (includes(get(data, 'models'), 'service')) {
data.services = await models.getService(slug !== 'services' ? 6 : null);
}
if (includes(get(data, 'models'), 'stockist')) {
data.stockists = await models.getStockist();
}
// console.log('Debug data:', data);
return { props: { data } };
} catch (error) {
console.error(error);
return { props: null };
}
};
export default Page;
The URL in the browser updates, the pageClass updates and title in the browser tab updates but the page content remains the same, so potentially the BuilderComponent is nopt updating?
Cheers
Peter
