TypeError:result.data.umdHub.articles.forEach不是一个函数

时间:2019-04-25 19:19:03

标签: reactjs graphql gatsby

我在链接带有标签的页面时遇到问题。我要做的就是创建一个包含文章列表的页面(我有)。但是我不能链接那些文章以显示其内容。我了解您可能需要使用createPages。下面是我正在尝试的代码。有没有人对此有经验,也许可以为我指出链接索引和文章页面的正确方向?

exports.createPages = ({ graphql, actions }) => {
  // **Note:** The graphql function call returns a Promise
  // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
  const { createPage } = actions
  return graphql(`
      {
        umdHub {
          articles {
            data {
              slug
              title
              body
              subtitle
              hero_image {
                url_1200_630
              }
            }
          }
        }
      }
  `
).then(result => {
    result.data.umdHub.articles.forEach(({ data }) => {
      createPage({
        path: articles.data.slug,
        component: path.resolve(`./src/article.js`),
        context: {
          // Data passed to context is available
          // in page queries as GraphQL variables.
          slug: articles.data.slug,
        },
      })
    })
  })
}

我在上面的代码中遇到此错误:

  

TypeError:result.data.umdHub.articles.forEach不是函数


第二次尝试:

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const articleTemplate = path.resolve(`./src/terp/article.js`)
  // Query for markdown nodes to use in creating pages.
  // You can query for whatever data you want to create pages for e.g.
  // products, portfolio items, landing pages, etc.
  return graphql(`
    {
        umdHub {
          articles {
            data {
              id
              title
              subtitle
              body
              summary
              hero_image {
                url_1200_630
              }
              authorship_date {
                formatted_short
                unix
                unix_int
                formatted_long
                formatted_short
                time
              }
              slug
            }
          }
        }
      }
  `).then(result => {
    if (result.errors) {
      throw result.errors
    }

    // Create blog post pages.
    result.data.umdHub.articles.data.forEach(data => {
      createPage({
        // Path for this page — required
        path: `${data.slug}`,
        component: articleTemplate,
        context: {
          // Add optional context data to be inserted
          // as props into the page component..
          //
          // The context data can also be used as
          // arguments to the page GraphQL query.
          //
          // The page "path" is always available as a GraphQL
          // argument.
        },
      })
    })
  })
}

返回错误:

  

⠐createPages您网站的“ gatsby-node.js”创建了一个带有   不存在的组件

0 个答案:

没有答案