skip to Main Content

You can see I’m logging the data returned from my lambda function. The data is definitely coming back as expected. However, in the createPage(…), the allMessages in pageContext in the dashboard.js component is always null/undefined.

Why?…

dashboard.js

const DashboardPage = ({ pageContext: { allMessages } }) => (
    <Layout>
        <SEO title="Dashboard" keywords={[`gatsby`, `application`, `react`]} />
        <h1>Dashboard</h1>
        <p>Welcome to your new Gatsby site.</p>
        {console.log('allMessages: ', allMessages)}
        {allMessages.map(mssg => (
            <li
                key={mssg.id}
                style={{
                    textAlign: 'center',
                    listStyle: 'none',
                    display: 'inline-block'
                }}
            >
                <Link to={`/message/${mssg.name}`}>
                    <p>{mssg.name}</p>
                </Link>
            </li>
        ))}
    </Layout>
);

export default DashboardPage;

gatsby-node.js

exports.createPages = async ({ actions: { createPage } }) => {
    get('get-messages')
        .then(allMessages => {
            console.log('gatsby-node allMessages: ', allMessages);
            // Create a page that lists all Pokémon.
            createPage({
                path: `/dashoard`,
                component: require.resolve('./src/pages/dashboard.js'),
                context: { allMessages }
            });
        })
        .catch(err => {
            return Promise.reject(new Error(err));
        });
};

I’m blocked. Thank you for sharing your expertise!

EDIT:

This doesn’t work either. Same undefined in dashboard.js…

exports.createPages = async ({ actions: { createPage } }) => {
    get('get-messages')
        .then(allMessages => {
            // allMessages = typeof allMessages === 'string' ? JSON.parse(allMessages) : allMessages;
            // console.log('gatsby-node allMessages: ', allMessages);
            // // Create a page that lists all Pokémon.
            const test = [{ name: 'Test message' }];
            createPage({
                path: `/dashoard`,
                component: require.resolve('./src/pages/dashboard.js'),
                context: { allMessages: test }
            });
        })
        .catch(err => {
            return Promise.reject(new Error(err));
        });
};

2

Answers


  1. The context data you’re passing in CreatePages is already accessible in your DashboardPage component as a prop.
    Instead of trying to take it into your DashboardPage component as a parameter, try accessing the allMessages data directly with this.props.pageContext.

    Login or Signup to reply.
  2. This is caused because js page components must be in a template directory and not in the same folder with MarkDown files:

    require.resolve('./src/pages/templates/dashboard.js'),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search