CODEWITHSUNDEEP
gatsbynetlify
Locohost
Locohost

Reputation: 1702

gatsby-node.js createPages is not sending data to component in pageContext

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));
        });
};

Upvotes: 2

Views: 1632

Answers (2)

consciousOutsider
consciousOutsider

Reputation: 25

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'),

Upvotes: 0

Taylor Krusen
Taylor Krusen

Reputation: 1033

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.

Upvotes: 1

Related Questions