TypeError：无法读取未定义的属性“allMarkdownRemark”（在页面中）答案

【问题标题】：TypeError: Cannot read property 'allMarkdownRemark' of undefined (In pages)TypeError：无法读取未定义的属性“allMarkdownRemark”（在页面中）
【发布时间】：2020-08-23 05:09:31
【问题描述】：

我试图在 pages 文件夹内的 about 页面上显示我的降价数据，但是 Data 属性未定义。

allMarkdownRemark 查询在 GraphiQL 中按预期工作，我在 about（我在顶部导入 graphql）或 MD 文件中看不到任何错误。任何帮助将不胜感激！

Github 回购 - https://github.com/JackBPainter/portfolio-v2

GraphiQL

盖茨比配置

about.js

【问题讨论】：

标签： javascript graphql markdown gatsby

【解决方案1】：

盖茨比文档：https://www.gatsbyjs.org/docs/page-query/

您需要执行如下查询：（而不是您需要指定为query 的数据）

export const query = graphql`
  query {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            last_updated
          }
          html
        }
      }
    }
  }
`

完整组件：

const About = ({ data }) => {
  console.log(data)

  return (
    <Layout>
      <StyledAboutContainer>
        <StyledImgContainer>
          <StyledImg src={Face} alt="My Face" />
        </StyledImgContainer>
        <StyledSvgContainer>
          <svg x="0px" y="0px" viewBox="0 0 511.999 511.999">
            <path d="M403.073,292.074c-20.817-104.643-108.06-179.475-209.15-189.379l59.398-59.399 c9.905-9.905,9.905-25.962,0-35.867c-9.903-9.905-25.962-9.905-35.867,0L111.808,113.074c-0.003,0.003-0.007,0.008-0.012,0.012 c-0.6,0.602-1.172,1.233-1.709,1.892c-0.247,0.301-0.458,0.622-0.688,0.932c-0.257,0.345-0.526,0.681-0.764,1.04 c-0.318,0.477-0.597,0.969-0.879,1.461c-0.123,0.216-0.264,0.426-0.382,0.646c-0.257,0.48-0.477,0.972-0.7,1.464 c-0.118,0.26-0.25,0.512-0.36,0.776c-0.179,0.428-0.323,0.866-0.475,1.302c-0.122,0.348-0.257,0.693-0.367,1.048 c-0.107,0.353-0.184,0.712-0.274,1.067c-0.117,0.45-0.242,0.896-0.331,1.354c-0.054,0.279-0.085,0.56-0.13,0.839 c-0.088,0.536-0.178,1.069-0.233,1.613c-0.024,0.238-0.024,0.479-0.041,0.719c-0.041,0.577-0.083,1.153-0.083,1.736 c-0.002,0.377,0.036,0.754,0.051,1.131c0.02,0.44,0.02,0.876,0.063,1.317c0.079,0.84,0.205,1.677,0.369,2.509 c0.002,0.007,0.002,0.015,0.003,0.024c0.02,0.1,0.052,0.191,0.074,0.291c0.15,0.719,0.323,1.434,0.538,2.139 c0.078,0.259,0.178,0.504,0.264,0.759c0.181,0.531,0.36,1.062,0.575,1.584c0.142,0.342,0.311,0.668,0.465,0.999 c0.191,0.414,0.377,0.83,0.593,1.234c0.215,0.402,0.458,0.785,0.693,1.173c0.191,0.316,0.37,0.639,0.577,0.947 c0.313,0.468,0.656,0.911,0.998,1.354c0.164,0.213,0.313,0.435,0.485,0.644c0.465,0.568,0.96,1.106,1.471,1.628 c0.073,0.074,0.134,0.156,0.208,0.23l0.037,0.037c0.024,0.024,0.046,0.046,0.069,0.069l105.541,105.543 c4.952,4.954,11.443,7.428,17.933,7.428s12.982-2.477,17.933-7.428c9.905-9.903,9.905-25.962,0-35.867l-65.662-65.664 c79.98,7.265,149.228,66.288,165.662,148.91c2.256,11.34,3.431,22.748,3.566,34.088c0.499,41.582-12.985,82.266-38.472,115.461 c-4.636,6.036-9.666,11.824-15.084,17.326c-9.829,9.981-9.702,26.038,0.277,35.867c4.941,4.864,11.369,7.289,17.792,7.289 c6.557,0,13.11-2.526,18.073-7.568c48.279-49.033,72.508-116,67.505-183.583C406.272,311.253,404.977,301.644,403.073,292.074z" />
          </svg>
        </StyledSvgContainer>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <StyledH1>{node.frontmatter.title}</StyledH1>
        ))}
      </StyledAboutContainer>
    </Layout>
  )
}

export default About

export const query = graphql`
  query {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            last_updated
          }
          html
        }
      }
    }
  }
`

【讨论】：

感谢您的回复！实际上，我之前将查询指定为查询，但它不起作用，所以试图将它混合起来。不幸的是，这并没有解决问题，数据仍然以未定义的形式返回。
我决定遵循官方 gatsby 教程，他们介绍了转换器备注，看看我是否可以让 allMarkDownRemark 查询在我的应用程序上运行。这一切都按预期工作，没有任何并发症，这意味着问题必须与组件本身有关。我发现问题实际上是 about 不再是 gatsby 页面，因为我将它导入 index.js

【解决方案2】：

我决定遵循官方 gatsby 教程，他们介绍了转换器备注 (https://www.gatsbyjs.org/tutorial/part-six/)，看看我是否可以让 allMarkDownRemark 查询在我的应用程序上运行。这一切都按预期工作，没有任何并发症，这意味着问题必须与组件本身有关。我发现问题实际上是 about 不再是 gatsby 页面，因为我将其导入 index.js

【讨论】：