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

Question

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

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

但我还想为每个 post 创建一个页面，用于另一种名为 locations 的内容类型，其设置方式相同：

组件 src/templates/locations.js

Storyblok 字段组件 “地点”

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

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

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

How to create multiple page types dynamically in Gatsby-node.js

javascript

reactjs

graphql

gatsby

storyblok