Dynamic title fails to set on 1st client-side navigation: `loaderData` undefined

So here's a usual article/post route setup:

export const Route = createFileRoute('/article/$id')({
    loader: async ({ params, context }) => {
        console.log('Loader running for article:', params.id);
        const data = await context.queryClient.ensureQueryData(
            articleQy(params.id),
        );
        console.log('Loader data:', data);
        return data;
    },
    
    head: ({ loaderData }) => {
        console.log('Head function called with loaderData:', loaderData);
        return {
            meta: [{ title: pageTitle(loaderData?.title ?? 'Article title n/a') }],
        };
    },
    
    component: ArticleDetailPage,
});

export const Route = createFileRoute('/article/$id')({
    loader: async ({ params, context }) => {
        console.log('Loader running for article:', params.id);
        const data = await context.queryClient.ensureQueryData(
            articleQy(params.id),
        );
        console.log('Loader data:', data);
        return data;
    },
    
    head: ({ loaderData }) => {
        console.log('Head function called with loaderData:', loaderData);
        return {
            meta: [{ title: pageTitle(loaderData?.title ?? 'Article title n/a') }],
        };
    },
    
    component: ArticleDetailPage,
});

When I first navigate to an article, from the article list page, the title fails to show; but if I revisit that same article for the second time, the title is set correctly.

Indeed, the

loader

loader

function prints out valid data, but the

head

head

function prints that its

loaderData

loaderData

is undefined!

Is this a known issue, or am I missing something?
Using Start 1.140.5 with Solid.
Thank you.

TanStack•3mo ago•

8 replies

faint-white

Dynamic title fails to set on 1st client-side navigation: `loaderData` undefined

So here's a usual article/post route setup:

export const Route = createFileRoute('/article/$id')({
    loader: async ({ params, context }) => {
        console.log('Loader running for article:', params.id);
        const data = await context.queryClient.ensureQueryData(
            articleQy(params.id),
        );
        console.log('Loader data:', data);
        return data;
    },
    
    head: ({ loaderData }) => {
        console.log('Head function called with loaderData:', loaderData);
        return {
            meta: [{ title: pageTitle(loaderData?.title ?? 'Article title n/a') }],
        };
    },
    
    component: ArticleDetailPage,
});

export const Route = createFileRoute('/article/$id')({
    loader: async ({ params, context }) => {
        console.log('Loader running for article:', params.id);
        const data = await context.queryClient.ensureQueryData(
            articleQy(params.id),
        );
        console.log('Loader data:', data);
        return data;
    },
    
    head: ({ loaderData }) => {
        console.log('Head function called with loaderData:', loaderData);
        return {
            meta: [{ title: pageTitle(loaderData?.title ?? 'Article title n/a') }],
        };
    },
    
    component: ArticleDetailPage,
});

When I first navigate to an article, from the article list page, the title fails to show; but if I revisit that same article for the second time, the title is set correctly.

Indeed, the

loader

loader

function prints out valid data, but the

head

head

function prints that its

loaderData

loaderData

is undefined!

Is this a known issue, or am I missing something?
Using Start 1.140.5 with Solid.
Thank you.

Dynamic title fails to set on 1st client-side navigation: `loaderData` undefined

Similar Threads

Dynamic title fails to set on 1st client-side navigation: `loaderData` undefined

Similar Threads

Similar Threads

Similar Threads