Headless WordPress Dynamic pages with GatsbyJS

In this article, I will show ‘how to create dynamic pages/routes with GatsbyJS’. I will fetch all post data from the WordPress website and create dynamic routes for each post.

At first, we need to create gatsby-node.js file in the root of our wp-gatsby project directory. Gatsby handles all dynamic routes from this file. Then add this asynchronous function in the file.

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions

    const wpData = await graphql(`
        {
            allWordpressPost {
                nodes {
                    wordpress_id
                    slug
                    title
                    content
                    author {
                        name
                    }
                }
            }
        }
  `)

    if (wpData.errors) {
        console.error(wpData.errors)
    }

    const { allWordpressPost } = wpData.data
    allWordpressPost.nodes.forEach( post => {
        createPage({
            path: `/${post.slug}`,
            component: require.resolve(`./src/templates/post.js`),
            context: { post },
        })
    })

}

Here, I wrote a Graphql query to fetch post data from the WordPress website than on line 26 creating dynamic routes.

Behind the screen, Gatsby will create routes root-url/post-slug for each post, expect output from ./src/templates/post.js this file and Gatsby will also send each post data to this file.

So now let’s go ahead and create post.js file on the following path and add these pieces of code to the file…

Read the original full article on my blog

This article is a part of my Headless WP series