反应组件中的盖茨比静态查询不返回任何数据

Posted 2023-03-08

【中文标题】反应组件中的盖茨比静态查询不返回任何数据

【英文标题】：gatsby staticquery in a react component not returing any data

【发布时间】：2021-03-14 19:38:03

【问题描述】：

似乎对反应组件中的静态查询没有任何运气。似乎可以在 Pages 上正常工作，但不能从组件上工作。基本上 data 总是未定义。使用不同的 Graphql 代码 sn-ps 尝试了 allMarkdownRemark 和 markdownRemark。直接通过 graphql 客户端而不是通过 react 组件进行查询时，查询返回了正确的数据。

    import React from "react";
    import  StaticQuery, graphql  from "gatsby";
    import  Link  from "gatsby";
    import logo from "../../assets/images/logo.png";
    import footerMap from "../../assets/images/footer-map.png";

    export default () =>        
      return (
        <StaticQuery
          query=graphql`query FooterData 
      allMarkdownRemark(filter: frontmatter: componentKey: eq: "Footer") 
        edges 
          node 
            frontmatter 
              explore 
                footerlinks1
                footerlinks1Url
              
              headoffice 
                Address
                HOAddress
                HONumber
              
              services 
                footerlinks2
                footerlinks2Url
              
            
          
        
      
    
    `
     render=(data) => (
            <footer className="footer-area bg-color">
              <div className="container">
                <div className="row">
                  <div className="col-lg-4 col-sm-6">
                   <h3>Explore</h3>

                      <ul className="footer-links-list">
                      
                        data.allMarkdownRemarks.edges[0].node.frontmatter.explore.map(link => (
                        <li>
                            <Link to=link.footerlinks1Url>link.footerlinks1</Link>          
                        </li>
                        ))
                        </ul>
                   </div>
               </div>
             </div>
           </footer>
       )
       />
    );
                  




Error I am getting is below.
===========================
TypeError: Cannot read property 'edges' of undefined
render
C:/Users/HP/source/XXX/src/components/App/Footer.js:102
   99 | <div className="single-footer-widget pl-5">
  100 |   <h3>Explore</h3>
  101 | 
> 102 |   <ul className="footer-links-list">
  103 |   
  104 |     data.allMarkdownRemarks.edges[0].node.frontmatter.explore.map(link => (
  105 |     <li>
View compiled
StaticQueryDataRenderer
C:/Users/HP/source/XXX/.cache/gatsby-browser-entry.js:37
  34 |   : combinedStaticQueryData[query] && combinedStaticQueryData[query].data
  35 | 
  36 | return (
> 37 |   <React.Fragment>
  38 |     finalData && render(finalData)
  39 |     !finalData && <div>Loading (StaticQuery)</div>
  40 |   </React.Fragment>
View compiled
▶ 19 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

【参考方案1】：

您的嵌套查询对象中有错字，您使用的是allMarkdownRemarks（注意最后一个S）而不是allMarkdownRemark，将其替换为：

data.allMarkdownRemark.edges[0].node.frontmatter.explore.map(link => (
  <li>
       <Link to=link.footerlinks1Url>link.footerlinks1</Link>          
  </li>
))

【讨论】：

是的，当我复制代码并在此处减小帖子的大小时发生了错字。但是原始代码没有（s）。查询返回 null 并带有 allMarkdownRemark

并且完全在您的localhost:8000/___graphql 中工作？

感谢@ferran，这解决了问题?