How to properly use the createPages API to create pages programmatically?

Question

I am creating my portfolio, where I would like to have two separate tabs for both my blogs and projects. Ideally, I am supposed to create pages programmatically for each one of the items in those tabs.

I was then able to do just that for the items in my blog tab by following the Gatsby official tutorials. However, when I tried doing the same thing for the items on my projects tab, I was able to get it working but, somehow the initial set-up for my blog tab stopped working simultaneously.

const path= require('path')

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

const blogPost= path.resolve('./src/components/blogComponents/blog-post.js')
return new Promise((resolve,reject)=>{
    graphql(`
    {
        allContentfulBlog{
            edges{
              node{
                slug
              }
            }
          }
    }
`).then(results=>{
    // console.log(results)
    if(results.error){
        reject(results.error)
    }
      // create blog post pages
const posts=results.data.allContentfulBlog.edges
// console.log(post)

posts.forEach((post,index)=>{
    console.log(`showing slugs: ${post.node.slug}`)
    // const previous= index === posts.length-1?null: posts[index+1].node
    // const next= index === 0?null: posts[index-1].node

   createPage({
        path:`/${post.node.slug}`,
        component:blogPost ,
        context:{
            slug:post.node.slug,
            // previous,
            // next
        } 
    })

    })

}) .then(resolve)
}) }



//creating pages for projects


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

    const projectPage= path.resolve('./src/components/projectComponents/project.js')
    return new Promise((resolve,reject)=>{
        graphql(`
        {
            allContentfulProjects{
                edges{
                    node{
                        slug
                      }
                }   
              }
        }
    `).then(results=>{
        if(results.error){
            reject(results.error)
        }

        projects= results.data.allContentfulProjects.edges

        projects.forEach(project=>{
            createPage({
                path:`/${project.node.slug}`,
                component:projectPage ,
                context:{
                    slug:project.node.slug,

                } 
            })
        })

      }).then(resolve)

    }) 

}

I was under the assumption that for every programmatic page one wants to set-up, exporting a separate createPages API is the way to go, but instead, ended up encountering that issue. I searched the documentation but was unable to find the part that addressed my problem.

Answer 1

exports.createPages = is an assignment, so you are essentially overwriting the first function when you write the second.

When I've had to create two different types of pages, I've just thrown everything into one query and then did a foreach on the nested objects.

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  return graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
      allRatsJson {
        edges {
          node {
            name
            img
          }
        }
      }
    }
  `).then(result => {
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.fields.slug,
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          slug: node.fields.slug
        }
      });
    });

    result.data.allRatsJson.edges.forEach(({ node }) => {
      createPage({
        path: node.name.toLowerCase(),
        component: path.resolve(`./src/templates/rat.js`),
        context: {
          name: node.name,
          img_url: node.img
        }
      });
    });
  });
};