Gatsby giving error on generating pages from markdown files

Question

I am trying to generate pages from two categories of .md files [projects/posts] , I have combined the query related to both folders in a query as below in gatsby-node.js :

exports.createPage = ({ graphql, actions }) => {
  const { createPage } = actions
  const blogTemplate = path.resolve("./src/templates/blog-details.js")
  const projectTemplate = path.resolve("./src/templates/project-details.js")

  return graphql(`
    query {
      projects: allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/projects/" } }
        sort: { fields: [frontmatter___date], order: DESC }
      ) {
        nodes {
          frontmatter {
            slug
            title
          }
          fileAbsolutePath
        }
      }

      posts: allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/posts/" } }
        sort: { fields: [frontmatter___date], order: DESC }
      ) {
        nodes {
          frontmatter {
            slug
            title
          }
          fileAbsolutePath
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      Promise.reject(result.errors)
    }
    console.log(result)

    const projects = result.data.projects.nodes
    const posts = result.data.posts.nodes

    console.log("starting projects page creation")
    console.log(projects)

    projects.forEach((node, index) => {
      createPage({
        path: "/projects/" + node.frontmatter.slug,
        component: projectTemplate,
        context: { slug: node.frontmatter.slug },
      })
    })

    console.log("starting posts page creation")
    console.log(posts)

    posts.forEach((node, index) => {
      const next = index === 0 ? null : posts[index - 1]
      const previous = index === nodes.length - 1 ? null : posts[index + 1]

      createPage({
        path: "/blog/" + node.frontmatter.slug,
        component: blogTemplate,
        context: {
          slug: node.frontmatter.slug,
           previous,
           next,
        },
      })
    })
  })
}

The query is fetching response , have verified from GraphiQL :

But gatsby develop gives error in creating pages: Exported queries are only executed for Page components. It's possible you're trying to create pages in your gatsby-node.js and that's failing for some reason. Not able to find the exact reason of the error.

Kindly let me know what I am missing here, thanks.

score 0 · Answer 1 · answered Aug 13 '21 at 04:59

createPages is an asynchronous action. In addition, you have a typo (notice the trailing "s").

In list of gatsby-node.js APIs you have an onCreatePage function or createPages, but not createPage.

Your createPages should look like:

const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const queryResults = await graphql(`
    query AllProducts {
      allProducts {
        nodes {
          id
          name
          price
          description
        }
      }
    }
  `)

  const productTemplate = path.resolve(`src/templates/product.js`)
  queryResults.data.allProducts.nodes.forEach(node => {
    createPage({
      path: `/products/${node.id}`,
      component: productTemplate,
      context: {
        // This time the entire product is passed down as context
        product: node,
      },
    })
  })
}

As I said, notice the async.

Gatsby giving error on generating pages from markdown files

1 Answers1