Send props to index page

[omidahourai]

Description

In gatsby-node.js, I am trying to inject data from Instagram to my index page by calling createPage(), but it doesn't seem to work unless I rename the index.js to home.js and have it create it from home.js with path of /. This works but now I have a duplicate /home/ path that I don't want to exist. Tried calling deletePage() on the home path but it throws errors so maybe I'm doing it wrong? I tried to delete it in exports.createPages, and also in exports.onPostBootstrap.

Environment

Gatsby version: ^1.9.147
Node.js version: 8.9.3
Operating System: OSX 10.13.2

File contents (if changed):

gatsby-node.js:

//const instagramData = {...}
exports.createPages = ({ graphql, boundActionCreators }) => {
    const { createPage, deletePage } = boundActionCreators
    return new Promise((resolve, reject) => {
        createPage({
            layout: 'index',
            path: '/',
            component: slash(path.resolve(`./src/pages/home.js`)),
            context: { instagramData }
        })

        graphql(ARTICLES_QUERY).then(({errors, data}) => {
            if (errors) {
                reject(errors)
            }

            const template = path.resolve(`./src/templates/article.js`)
            forEach(data.allContentfulArticle.edges, edge => {
                const { id, slug } = edge.node
                createPage({
                    layout: 'article',
                    path: `/articles/${slug}/`,
                    component: slash(template),
                    context: { id, slug },
                })
            })
            resolve()
        })
    })
}

exports.onPostBootstrap = ({ boundActionCreators }) => {
    const { deletePage } = boundActionCreators
    return new Promise((resolve, reject) => {
        deletePage({
            path: '/home/',
            component: slash(path.resolve('./src/pages/home')),
        })
        resolve()
    })
}

[KyleAMathews]

You're supposed to query for data for a page from its component. Have you tried that? createPage is for creating pages from data e.g. markdown files.

[omidahourai]

Hmm, I suppose that would make sense. But then, wouldn't Instagram need to provide a graphql API? I think they only do REST.

[dsbrianwebster]

@omidahourai obviously Kyle is right about how it is supposed to work (querying data from its component). With that said, we actually did have a scenario where I needed to build the index page via createPages from gatsby-node.js. In case you and anyone else needs to do THAT, simply placing your home component in the /templates directory instead of /pages will solve your problem with the duplicate duplicate /home/ path :)

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍