Home App Docs Blog Github

Not all data when navigating to a page using same template

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

Thanks for sharing @niftycode. Is there any chance you can provide a minimal reproducable example in codesandbox? Theres a couple details here I’m fuzzy on but if we can see the issue directly I believe we can diagnose it very quickly for you

Hi Steve

Never used Sandbox before so not 100% sure if what I have done is correct.

I think I have included everything to run a minimum example.

Here is the link https://codesandbox.io/s/builder-nefsu.

If this is no good or you need more, I am happy to share by GitHub repo with you.

One thing I did notice in the next.config.js I have a RunTime cache setting … however this exists on the site that has no issues.

Hi @niftycode , trying to investigate the issue but I’m seeing this error on the codesanbox you sent:

Ok, I have updated and am now getting the compiled successfully message.

@niftycode

I see you’re getting the page content in getStaticProps but only picking the data prop, which is omitting key informations from the BuilderComponent like (id, query , variations , testRatios , … etc )

Do this change and it should fix your navigations issues and render the content on the server as well (right now it’s not)

in getStaticProps:

    const fullContent = await builder.get("page", { url: ... }).promise();
    const { data } = fullContent;

   // do your processing then return
    return { props: { data, fullContent } };

and in the page component:

// get fullContent from static props
const Page = ({ data, fullContent }) => {
 // and pass it to BuilderComponent
        <BuilderComponent
          content={fullContent}

Hi Aziz

That’s fixed the issue, thank you.