将第二个动态模板正确添加到 Gatsby/NetlifyCMS - 我哪里出错了？

Question

我添加了一个与 NetlifyCMS 集成的博客页面，效果非常好。但是，我需要在我的网站上再多一个显示服务的动态页面，并且每个服务都会有自己生成的模板，理论上与博客页面非常相似。

所以我阅读了很多不同的解决方案，但一直碰壁。我在这里做错了什么？什么是完成这项工作的最简单方法，因为我不会再添加任何其他动态页面。

这是我的 gatsby-node.js，当时我刚刚拥有博客页面并且一切正常：

const { createFilePath } = require("gatsby-source-filesystem")
exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

//Blog
async function getPageData(graphql) {
  return await graphql(`
    {
      blogPosts: allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
}

const path = require(`path`)
exports.createPages = async ({ graphql, actions }) => {
  const { data } = await getPageData(graphql)
  data.blogPosts.edges.forEach(({ node }) => {
    const { slug } = node.fields
    actions.createPage({
      path: `/articles${slug}`,
      component: path.resolve("./src/templates/articlepost.js"),
      context: {slug: slug },
    })
  })
}

所以我试了一下并尝试做同样的事情，但添加了我的服务页面。这是最终的样子：

盖茨比-node.js

const { createFilePath } = require("gatsby-source-filesystem")
exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

async function getBlogData(graphql) {
  return await graphql(`
    {
      blogPosts: allMarkdownRemark(
        filter: { frontmatter: { template: { eq: "articlepost" } } }
      ) {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
}

async function getServiceData(graphql) {
  return await graphql(`
    {
      servicePosts: allMarkdownRemark(
        filter: { frontmatter: { template: { eq: "service" } } }
      ) {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
}

const path = require(`path`)
exports.createPages = async ({ graphql, actions }) => {
  const blogPage = path.resolve("./src/templates/articlepost.js")
  const servicePage = path.resolve("./src/templates/service.js")

  const { data } = await getBlogData(graphql)
  data.blogPosts.edges.forEach(({ node }) => {
    const { slug } = node.fields
    actions.createPage({
      path: `/articles${slug}`,
      component: blogPage,
      context: { slug: slug },
    })
  })

  const { serviceData } = await getServiceData(graphql)
  serviceData.servicePosts.edges.forEach(({ node }) => {
    const { slug } = node.fields
    actions.createPage({
      path: `/streaming-services${slug}`,
      component: servicePage,
      context: { slug: slug },
    })
  })
}

我的博客页面仍然可以正常工作，但出现错误：

如您所见，我在 config.yml 中添加了一个模板类型，它现在显示在我的前言中以分隔我的帖子，但我认为这可能让我更加困惑了。从 frontmatter 中删除模板类型完全没问题，但确实需要一种非常简单的方法才能工作。

非常感谢！

Answer 1

尝试为循环设置别名以避免作用域元素。

  const { data } = await getBlogData(graphql)
  data.blogPosts.edges.forEach(({ node: post }) => {
    const { slug } = post.fields
    actions.createPage({
      path: `/articles${slug}`,
      component: blogPage,
      context: { slug: slug },
    })
  })

并且：

  serviceData.servicePosts.edges.forEach(({ node: service }) => {
    const { slug } = service.fields
    actions.createPage({
      path: `/streaming-services${slug}`,
      component: servicePage,
      context: { slug: slug },
    })
  })

基本上，您正在为循环项设置别名，使它们独一无二（不同于之前的循环），分别为 post 和 service。

我会推荐阅读 this article from David Walsh。

Answer 2

const { serviceData } = await getServiceData(graphql)

在从 graphql( 返回的对象（由 getServiceData 返回）中没有 serviceData 时不起作用 - 它始终是一个名为属性的 data。

你可以重用data（如果之前data以后不需要）或者在解构中使用别名：

const { data: serviceData } = await getServiceData(graphql)

将第二个动态模板正确添加到 Gatsby/NetlifyCMS - 我哪里出错了？

Adding a 2nd dynamic template to Gatsby/NetlifyCMS correctly - Where am I going wrong?

javascript

node.js

graphql

gatsby

netlify-cms