gatsby staticquery in a react component not returing any data

Question

Just seem to have no luck what so ever with the static query within a react component. Seem to work fine on Pages but not working from components. Basically {data} is always coming as undefined. Tried allMarkdownRemark & markdownRemark with different Graphql code snippets. The query is returning correct data when querying directly via a graphql client but not through the react component.



    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.

Ferran Buireu Ferran Buireu · Accepted Answer · 2020-12-02T20:26:32

You have a typo in your nested query object, you are using allMarkdownRemarks (note the last S) instead of allMarkdownRemark replace it by:

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

gatsby staticquery in a react component not returing any data

1 Answers