Dynamic children are only rendering on page refresh

Technical Questions
1

Hi Guys

Got an odd problem here. So I have an app setup using Svelte. I have a custom component that has a child custom component
Main component is a grid container
Child is a grid item

I’ve a stange issue where if you go the the /our-work page directly or refresh the page when getting there, the data loads correctly, otherwise it does not:

Go to

Then click into Menu and select “Our Work”
The main body of the page won’t load

Refresh the page and it works OK

The template file looks like:

<script>
    import { Content, isPreviewing } from '@builder.io/sdk-svelte';
    import { CUSTOM_COMPONENTS } from '../../CustomComponents.js';

    // Create an array of your custom components and their properties

    // this data comes from the function in `+page.server.js`, which runs on the server only
    export let data = {};

    // shortcut to the actual content
    export let pageContent = data.builderProps.content?.data || {};

    // we want to show unpublished content when in preview mode.
    const canShowContent = pageContent || isPreviewing();

</script>

{#if canShowContent}
    <!-- force re-rendering of `Content` on client-side navigation -->
    {#key pageContent}
        <!-- Render builder content with all required props -->
        <div class="container">
            <Content
                content={data.builderProps.content}
                apiKey={data.builderProps.apiKey}
                customComponents={CUSTOM_COMPONENTS}
            />
        </div>
    {/key}
{:else}
    Content Not Found
{/if}

and this is using +page.server.js:

import { fetchBuilderProps } from '@builder.io/sdk-svelte';
import { BUILDER_PUBLIC_API_KEY } from '../../config/apiKeys.js';
import { error } from '@sveltejs/kit';
import { DEFAULT_META_DESCRIPTION, DEFAULT_META_TITLE } from '../../config/constants.js';

/** @type {import('./$types').PageServerLoad} */
export async function load(event) {
    // fetch your Builder content

    const builderProps = await fetchBuilderProps({
        model: 'page',
        apiKey: BUILDER_PUBLIC_API_KEY,
        searchParams: event.url.searchParams,
        userAttributes: {
            urlPath: event.url.pathname || '/'
        }
    });

    if (!builderProps) {
        throw error(404, 'Content not found');
    }

    const meta = {
        title: builderProps.content?.data?.metaTitle || DEFAULT_META_TITLE,
        description: builderProps.content?.data?.metaDescription || DEFAULT_META_DESCRIPTION
    };

    return { builderProps, meta };
}

I’ve tried creating an onMount and other events in +page.svelte mirroring the load in the +page.server.js

Just can’t work this out at all and hoping you guys might be able to point me in the right direction

Thanks
Tom

2

Hello Valguss2001

I did notice that you’re currently using the sdk-svelte, which is in beta. The issue could be with implementation release.

To get a more prompt response, would you please reach out to support@builder.io with your Public API Key or Content ID. Our Technical Support Specialists, will gladly assist with the implementation and provide troubleshooting with the content in question.

3

Totally forgot to post an update there in that I did manage to fix this. I had to make pageContent and canShowContent reactive to get this working. so:

 // this data comes from the function in `+page.server.js`, which runs on the server only
    export let data = {};

    // shortcut to the actual content
    export let pageContent = data.builderProps.content?.data || {};

    // we want to show unpublished content when in preview mode.
    const canShowContent = pageContent || isPreviewing();

turned into

    export let data = {};

    // shortcut to the actual content
    $: pageContent = data.builderProps.content?.data || {};

    // we want to show unpublished content when in preview mode.
    $: canShowContent = pageContent || isPreviewing();

Cheers

Tom