GatsbyJS and Contentful: data coming up undefined

Question

I have a Header component in my layout folder, and have made a query to pull out some data. However, when I console.log out this.props.data, I get a result of 'undefined'. Where am I going wrong here? Have I forgotten something in my query?

code for Header component:

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

Answer 1

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

Answer 2

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