When refreshing page settings.data is undefined

[slender gazelle]

Hi @cloud river. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It seems that the error you're encountering is due to trying to access the data property of settings in your Layout component, but settings is undefined. This can happen if the settings prop is not passed correctly to the Layout component or if the fetched data is not structured as expected.

To fix this issue, you can add a check for the existence of settings and settings.data before accessing their properties in the Layout component:

import Footer from "./Footer";

export default function Layout({ children, settings, test }) {
  if (!settings || !settings.data) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <div className="grow shrink basis-full">{children}</div>
      <Footer
        info_title={settings.data.info_title}
        info_content={settings.data.info_content}
        address={settings.data.address}
        copyright={settings.data.copyright}
        mail={settings.data.mail}
        phone={settings.data.phone}
        social_media={settings.data.social_media}
      ></Footer>
    </>
  );
}

This will display a "Loading..." message while waiting for the settings prop to be available. If the issue persists, you may want to double-check the structure of the fetched data in getStaticProps and ensure that it matches the expected format.

For more information on data fetching in Next.js, you can refer to the Data Fetching Fundamentals (https://beta.nextjs.org/docs/data-fetching/fundamentals) documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@cloud river kapa.ai is still learning and improving, please let us how it did by reacting below

[cloud river]

@slender gazelle The data is there, it only gets lost when I refresh the page, it works on initial load

[slender gazelle]

Let me check the knowledge base for you. One moment! :books:

---

If the data is only lost when you refresh the page, it might be related to how the settings prop is passed from the App component to the Layout component. In your App component, you're passing settings={{pageProps.settings}} to the Layout component. However, in your page component, you're returning the settings prop directly inside the props object in getStaticProps.

To fix this issue, you can update the getStaticProps function in your page component to return the settings prop inside an object called pageProps:

export async function getStaticProps() {{
    const res_settings = await fetch(`${{process.env.NEXT_PUBLIC_API_URL}}/items/Settings`);
    const settings = await res_settings.json();
    return {{
        props: {{
            pageProps: {{
                settings
            }}
        }},
    }};
}}

This way, when you refresh the page, the settings prop should still be available in the Layout component, and you shouldn't encounter the "TypeError: Cannot read properties of undefined (reading 'data')" error.

For more information on data fetching in Next.js, you can refer to the Data Fetching Fundamentals (https://beta.nextjs.org/docs/data-fetching/fundamentals) documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: