Tutorial, getInitialProps, and HOC

[awestbarrett]

Hi all,

I'm following along the NextJS tutorial and I'm trying to make sense of getInitialProps. I have an HOC/Layout file that looks like this:

const withLayout = Page => {
    return () => (
    <div style={layoutStyle}>
        <Header />
        <Page/>
    </div>
)};


export default withLayout;

And an index page that looks like this:

const Blog = (props) => {
    return (
        <>
            <h1>Batman TV Shows</h1>
            <ul>
                {props.shows.map(show => (
                    <li key={show.id}>
                        <Link href="/p/[id]" as={`/p/${show.id}`}>
                            <a>{show.name}</a>
                        </Link>
                    </li>
                ))}
            </ul>
        </>
    );
};

Blog.getInitialProps = async function () {
    const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
    const data = await res.json();

    console.log(`Show data fetched. Count: ${data.length}`);

    return {
        shows: data.map(entry => entry.show)
    };
}

export default withLayout(Blog);

This returns an error that key shows doesn't exist in the props object. I'm sure it's something to do with the HOC but i'm not sure what the fix is.

[messa]

I think there are two issues:

• withLayout is not passing props to the wrapped component
• withLayout doesn't expose getInitialProps of the wrapped component

[messa]

The fix should look like this, but I have not tested it:

const withLayout = Page => {
  function Wrapper(props) {
      return (
        <div style={layoutStyle}>
          <Header />
          <Page {...props} />
      </div>
    )
  }
  Wrapper.getInitialProps = Page.getInitialProps
  return Wrapper
)};