Блог

Похоже, мне просто не повезло со статическим запросом в компоненте react. Похоже, он отлично работает на страницах, но не работает с компонентами. В основном {data} всегда поступает как неопределенный. Пробовал allMarkdownRemark amp; markdownRemark с разными фрагментами кода Graphql. Запрос возвращает правильные данные при запросе непосредственно через клиент 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>
       )}
       />
    )};
                  
 Run code snippetHide resultsExpand snippet



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] amp;amp; combinedStaticQueryData[query].data
  35 | 
  36 | return (
> 37 |   <React.Fragment>
  38 |     {finalData amp;amp; render(finalData)}
  39 |     {!finalData amp;amp; <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.
 

У вас есть опечатка в вашем вложенном объекте запроса, вы используете allMarkdownRemarks (обратите внимание на последнее S ) вместо allMarkdownRemark замены его на:

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