GatsbyJS 和 Contentful：数据未定义答案

【问题标题】：GatsbyJS and Contentful: data coming up undefinedGatsbyJS 和 Contentful：数据未定义
【发布时间】：2018-07-12 03:59:51
【问题描述】：

我的布局文件夹中有一个 Header 组件，并进行了查询以提取一些数据。但是，当我 console.log out this.props.data 时，我得到了“未定义”的结果。我在哪里错了？我是否忘记了查询中的某些内容？

Header 组件代码：

import React, { Component } from 'react'

export default class Header extends Component {
    render() {

        console.log(this.props.data)

      return (
         code for component
      );
    }
  }

  export const headerQuery = graphql`
    query headerQuery {
        allContentfulBlogPost {
            edges {
                node {
                    postTitle
                    postDate
                }
            }
            totalCount
        }
    }
`

【问题讨论】：

查询是否在您的本地graphql 服务器中返回响应？
是的，它有效。我在另一个组件中也有完全相同的查询，而且工作正常。
AFAIK 仍然无法在组件内运行查询。将其移至页面并将其命名为pageQuery 或query。几乎可以肯定headerQuery 会被忽略。

标签： javascript reactjs graphql contentful gatsby

【解决方案1】：

您只能通过页面组件上的 pageQuery 导出从 Gatsby 获取数据。无法在其他组件中获取数据。这是让 Gatsby 静态编译数据所必需的。

【讨论】：

【解决方案2】：

请将您的组件放入/pages文件夹，重新启动服务器，或通过gatsby-node.js中的createPage api

【讨论】：