Как правильно использовать API createPages для программного создания страниц?

Question

Я создаю свое портфолио, где я хотел бы иметь две отдельные вкладки для моих блогов и проектов.В идеале я должен создавать страницы программно для каждого элемента на этих вкладках.

Затем я смог сделать это для элементов на вкладке моего блога, следуя официальным учебным пособиям Gatsby.Однако, когда я попытался сделать то же самое для элементов на вкладке своих проектов, я смог заставить ее работать, но каким-то образом первоначальная настройка для вкладки моего блога перестала работать одновременно.

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предполагалось, что для каждой программной страницы, которую нужно настроить, экспорт отдельного API createPages - это путь, но вместо этого мы столкнулись с этой проблемой.Я искал документацию, но не смог найти часть, которая решает мою проблему.

Answer 1

exports.createPages = - это назначение, поэтому вы по существу перезаписываете первую функцию, когда пишете вторую.

Когда мне приходилось создавать страницы двух разных типов, я просто бросал все в один запрос, а затем делал foreach для вложенных объектов.

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