for a persistence layout, I use getLayout function on every page like this,
import { Layout } from 'hoc';
const Page = () => {
return (
<div>hii</div>
);
};
Page.getLayout = function getLayout(page: React.ReactNode) {
return <Layout>{page}</Layout>;
};
export default Page;
Now I want to pass some dynamic data through the props in Layout, and the data will come inside Page component through an API call, but it is not possible because we are setting the layout after Page component is made.
import { Layout } from 'hoc';
import { fetchData } from 'api/index';
import { useQuery } from 'react-query';
const Page = () => {
const { data } = useQuery('data', fetchData);
// I want to pass this data to the Layout component
return ( <div>hii</div>);
};
Page.getLayout = function getLayout(page: React.ReactNode) {
return <Layout>{page}</Layout>;
// <Layout data={data}>{page}</Layout>
// this data should come from the Page component and pass through layout
};
export default Page;
I tried to make the solution with context but my provider should be a top-level component, and for that, the solution is not working for this scenario, also saving a component in a global state does not seem like a good idea. I appreciate any kind of help, Thanks in advance _ / \ _
you can do this at your page component:
Page.getInitialProps = () => {
return {
data: 'your data',
}
}
and at layout component:
function getLayout(page) {
const { props } = page
return (
<YourLayout data={props.data}>
{page}
</YourLayout>
)
}