GastbyJS 和 Contentful：我的节点似乎未定义？答案

【问题标题】：GastbyJS and Contentful: my node appears to be undefined?GastbyJS 和 Contentful：我的节点似乎未定义？
【发布时间】：2018-07-15 06:39:26
【问题描述】：

在我的 pages/about.js 文件中，我创建了一个查询来从 Contentful 中获取两个图像和一个文本。该查询在 GraphiQL 中运行没有问题，但是当我尝试使用 About 组件中的数据时，出现以下错误：

我不明白为什么会这样，因为查询似乎写得正确？我哪里出错了，这里？

这是我的组件代码和查询：

const About = ({data}) => (
  <div>
    <h1>Hi from the about page</h1>
    <p>Welcome to page about</p>
    <img src={data.allContentfulProfile.edges.node.emblem.file.url} />
  </div>
)

export default About

export const aboutQuery = graphql`
  query aboutQuery {
    allContentfulProfile (
      filter: {
        node_locale: {eq: "en-US"}
    },
    ) {
      edges {
        node {
          logo {
            file {
              url
            }
          }
          emblem {
            file {
              url
            }
          } 
          aboutText {
            childMarkdownRemark {
              html
            }
          }
        }
      }
    }
  }
`

【问题讨论】：

标签： reactjs graphql contentful

【解决方案1】：

你需要把aboutQuery改成pageQuery否则会被盖茨比忽略。

export const pageQuery = graphql`
  query aboutQuery {
    allContentfulProfile (
      filter: {
        node_locale: {eq: "en-US"}
    },
    ) {
      edges {
        node {
          logo {
            file {
              url
            }
          }
          emblem {
            file {
              url
            }
          } 
          aboutText {
            childMarkdownRemark {
              html
            }
          }
        }
      }
    }
  }
`

【讨论】：

Edges是一个数组，应该是edges[0].emblem