未被捕获的TypeError：无法使用Gatsby和graphQl读取未定义的属性“数据”

我正在第一次测试Gatsby和GraphQl，并且正在尝试一个简单的示例。

我想通过GraphQl请求在布局中显示标题时出现此错误？：未捕获的TypeError：无法读取未定义的属性“站点”

这是我的布局：

import React from 'react'
import { graphql } from 'gatsby'

export default ({ children, data  }) =>
  

  
{data.site.siteMetadata.title}
  {children}
  


export const query = graphql`
query LayoutQuery {
  site {
    siteMetadata {
      title
    }
  }
}
`

和我的gatsby-config.js：

module.exports = {
  siteMetadata: {
    title: `Hardcoders`
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-typography',
      options: {
        pathToConfigModule: 'src/utils/typography.js'
      }
    },
  ]
}  

这是项目的配置：

"dependencies": {
    "gatsby": "^2.0.0",
    "gatsby-plugin-typography": "^2.2.0",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-typography": "^0.16.13",
    "typography": "^0.16.17",
    "typography-theme-github": "^0.15.10"
  }

知道是什么干扰吗？

在Gatsby中，我知道2种graphql查询类型，即页面查询和静态查询。

页面查询 这些通常包含在文件src/pages夹下的组件文件的底部。查询结果将自动传递到其相应页面组件的props.data属性。 https://www.gatsbyjs.org/docs/page-query/

静态查询 是使用StaticQuery组件创建的，该组件可以包含在任何React组件中（也就是不仅仅在src / pages文件夹下）。 https://www.gatsbyjs.org/docs/static-query/

对于您的情况，这听起来像是您正在尝试在非页面组件中进行页面查询，该组件不会自动分配给数据道具。您可以尝试将查询移动到使用Layout的任何页面组件中，也可以通过StaticQuery组件将其转换为静态查询。

例如在src / pages / index.jsx中

export default ({ data }) => (
    
    
);

export const query = graphql`
  query LayoutQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
}