如何在 Gatsby-node.js 中动态创建多种页面类型

IT技术 javascript reactjs graphql gatsby storyblok
2021-05-11 17:43:07

我在 Gatsby-node.js 中为我的博客文章故事书内容为每个帖子创建一个新页面，如下所示：

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

  return new Promise((resolve, reject) => {
    const storyblokEntry = path.resolve('src/templates/blog-entry.js')

    resolve(
      graphql(
        `{
          stories: allStoryblokEntry(filter: {field_component: {eq: "blogpost"}}) {
            edges {
              node {
                id
                name
                slug
                field_component
                full_slug
                content
              }
            }
          }
        }`
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }

        const entries = result.data.stories.edges

        entries.forEach((entry) => {
          const page = {
            path: `/${entry.node.full_slug}`,
            component: storyblokEntry,
            context: {
              story: entry.node
            }
          }
          createPage(page)
        })
      })
    )
  })
}

但我也想为每个帖子创建一个页面，为另一种名为 location 的内容类型创建一个页面，该页面以相同的方式设置：

组件 src/templates/locations.js

Storyblok 字段组件 “位置”

如何在 Gatsby-node.js 中创建这两种页面类型？任何帮助将不胜感激！

1个回答

您需要重构您的方法，为每个查询结果分配一个变量，一个用于entries( result1)，一个用于locations( result2)。下一步是以相同的方式进行，迭代每个结果并调用createPage每个所需的值。

 const path = require(`path`)
    const { createFilePath } = require(`gatsby-source-filesystem`)
    
    exports.createPages = async ({ graphql, actions, reporter }) => {
      const { createPage } = actions
      const storyblokEntry = path.resolve('src/templates/blog-entry.js')
      const storyblokLocation = path.resolve('src/templates/locations.js')

      const result1 = await graphql(`{
              stories: allStoryblokEntry(filter: {field_component: {eq: "blogpost"}}) {
                edges {
                  node {
                    id
                    name
                    slug
                    field_component
                    full_slug
                    content
                  }
                }
              }
            }`
      )
    
      if (result1.errors) {
        reporter.panicOnBuild(
          `There was an error loading your blog posts`,
          result.errors
        )
        return
      }
    
      const entries = result1.data.stories.edges
    
      entries.forEach((entry) => {
        const page = {
          path: `/${entry.node.full_slug}`,
          component: storyblokEntry,
          context: {
            story: entry.node
          }
        }
        createPage(page)
      })
    
      //add here your query to locations schema. I've used your previous one
      const result2 = await graphql(`{ //
              stories: allStoryblokEntry(filter: {field_component: {eq: "blogpost"}}) {
                edges {
                  node {
                    id
                    name
                    slug
                    field_component
                    full_slug
                    content
                  }
                }
              }
            }`
      )
      if (result2.errors) {
        reporter.panicOnBuild(
          `There was an error loading your blog posts`,
          result.errors
        )
        return
      }
    
      const locations = result2.data.stories.edges
      locations.forEach((entry) => {
        const page = {
          path: `/${entry.node.full_slug}`, //customize with your data
          component: storyblokLocation, //customize with your data
          context: {
            story: entry.node //customize with your data
          }
        }
        createPage(page)
      })
    }
其它你可能感兴趣的问题
上一篇在日期选择器关闭时调用函数，当我只在日期选择器之外单击时 下一篇react-native TypeError: undefined 不是一个对象（评估'this.props.navigator.push'）