未捕获的类型错误：无法使用 Gatsby 和 graphQl 读取未定义的属性“数据”

Posted 2023-03-08

【中文标题】未捕获的类型错误：无法使用 Gatsby 和 graphQl 读取未定义的属性“数据”

【英文标题】：Uncaught TypeError: Cannot read property 'data' of undefined with Gatsby and graphQl

【发布时间】：2019-03-17 17:09:36

【问题描述】：

我是第一次测试 Gatsby 和 GraphQl，我正在尝试一个简单的例子......

当我想在布局中通过 GraphQl 请求显示标题时出现此错误？ : Uncaught TypeError: Cannot read property 'site' of undefined

这是我的布局：

import React from 'react'
import  graphql  from 'gatsby'

export default ( children, data  ) =>
  <div style=margin: 'auto', maxWidth: 760>
  <h2>data.site.siteMetadata.title</h2>
  children
  <footer>
    Copyright blablb abolajoa.
  </footer>
</div>

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"
  

知道什么是干扰吗？

【参考方案1】：

据我所知，在 Gatsby 中有 2 种类型的 graphql 查询，页面查询和静态查询。

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

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

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

例如在 src/pages/index.jsx 中

export default ( data ) => (
    <Layout data=data>
    </Layout>
);

export const query = graphql`
  query LayoutQuery 
    site 
      siteMetadata 
        title