Gatsby结合GraphQL查询siteMetadata报props验证缺失错误

1. GraphQL查询缺失对应字段 #

你当前编写的GraphQL查询仅请求了Contentful的落地页数据，并没有包含站点元数据的查询请求，所以返回的data对象中根本不存在data.site属性，直接调用自然无法获取值，还会触发报错。
你需要修改查询语句，补充站点元数据的查询逻辑：

export const query = graphql`
  query MyQuery {
    allContentfulLandingPage {
      edges {
        node {
          heroTitle {
            heroTitle
          }
          heroBody {
            raw
          }
        }  
      }
    }
    # 新增站点元数据查询部分
    site {
      siteMetadata {
        description
      }
    }
  }
`

修改前请先确认你的gatsby-config.js中已经配置了siteMetadata字段及对应的description属性，否则即使补充查询也无法获取对应值。

2. Props校验报错解决 #

你遇到的 'data.site.siteMetadata.description' is missing in props validation 报错是ESLint的react/prop-types校验规则触发的，要求你为组件入参定义类型校验，你可以通过两种方式解决：

• 方式一：补充prop类型校验
  先安装prop-types依赖，然后在组件代码末尾补充校验规则：

import PropTypes from 'prop-types'

// 原有组件逻辑不变

IndexPage.propTypes = {
  data: PropTypes.shape({
    site: PropTypes.shape({
      siteMetadata: PropTypes.shape({
        description: PropTypes.string.isRequired
      }).isRequired
    }).isRequired,
    allContentfulLandingPage: PropTypes.shape({
      edges: PropTypes.arrayOf(PropTypes.object).isRequired
    }).isRequired
  }).isRequired
}

• 方式二：关闭对应校验规则
  如果不需要类型校验，可以在项目根目录的.eslintrc配置文件中添加规则关闭校验：

{
  "rules": {
    "react/prop-types": "off"
  }
}

3. console.log仅输出整数的问题 #

该问题通常是打印语句编写错误导致，比如误将整数和data用逗号分隔打印时，控制台可能优先展示整数，或是你没有在组件的正确作用域内打印data，建议将打印语句写在组件函数内部return语句之前：

const IndexPage = ({ data }) => {
  console.log('查询返回的完整数据：', data) // 正确位置
  return (
    // 原有渲染逻辑
  )
}

内容的提问来源于stack exchange，提问作者Shuib Abdillahi