Next.js Discord

Discord Forum

fetch data in layout and pass to subpages

Unanswered
Wool sower gall maker posted this in #help-forum
Open in Discord
Wool sower gall makerOP
Hi, im fetching data in a layout.tsx and I want to pass it through the children so I can access the data in my subpages.
import {getSettings} from "@/lib/api";
import {Settings} from "@/lib/apitypes";

interface SettingsLayoutProps {
    children: React.ReactNode;
    params: { guildId: string }
}

export default async function SettingsLayout({children, params}: SettingsLayoutProps) {

    const settings: Settings = await getSettings(params.guildId);

    const {roles, channels} = settings;

    if (!settings) {
        console.log("Settings Page: failed to get data")
    }
    // console.log("ROLES", roles);
    console.log("revalidating settings page");
    return <main className="flex w-full min-h-screen flex-1 flex-col ">
        {children}
        {/*{roles}*/}
        {/*{channels}*/}
    </main>
}

4 Replies

Wool sower gall makerOP
American Crow
Any particular reason you fetching in layout?
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed
denexapp
To do that, I'd fetch initial data in layout and save it to context, then I access the context from client components in subpages.

Although I'd generally avoid using client side state, in my case of a chat app it feels necessary. If you have a similar highly dynamic app, you may use this approach