反应组件中的 gatsby staticquery 不返回任何数据

Question

React 组件中的静态查询似乎运气不佳。似乎在页面上运行良好，但在组件上运行不佳。基本上 {data} 总是以未定义的形式出现。使用不同的 Graphql 代码片段尝试了 allMarkdownRemark 和 markdownRemark。当直接通过 graphql 客户端而不是通过反应组件查询时，查询返回正确的数据。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>    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>
       )}
       />
    )};
                  

Answer 1

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

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