Error: Cannot read property 'frontmatter' of undefined

[lilyntalmers]

After writing this const postImage = data.allMarkdownRemark.edges.node.frontmatter.image || data.site.siteMetadata.image getting this error Cannot read property 'frontmatter' of undefined

blog-list.js

import React from "react"
import { graphql, Link } from "gatsby"
import { kebabCase } from "lodash"
import Layout from "../components/layout"
import Seo from "../components/seo"

const BlogList  = ( data ) => {
  const posts = data.allMarkdownRemark.edges



 const postImage =  data.allMarkdownRemark.edges.node.frontmatter.image || data.site.siteMetadata.image




  return (
    <Layout>
    <Seo title={`Blog Page: ${currentPage}`}/>
      <div className="Page_Container">
        <h1>All Post</h1>
        <p>{`Page: ${currentPage}`}</p>
        {posts.map(({ node }) => {
          const title = node.frontmatter.title || node.fields.slug
          
          const tags = node.frontmatter.tags
          return(
            <div key={node.fields.slug}>
              <div className="Post_Card">
                <Link className="Post_Card__Title" to={`/${node.fields.slug}/`}>{title}</Link>
                
                <div className="Post_Card__Container">
                  <img
                    src={postImage}
                    className="Post_Card__Image"
                    alt="#"
                  />
                  <p>{node.frontmatter.description || node.excerpt}</p>
                  <div style={{justifyContent:"space-between"}} className="Flex_Container">
                    <div>
                      {tags.map(tag => (
                        <Link key={tag} style={{marginLeft:"0px"}} className="Custom_Badge" to={`/tag/${kebabCase(tag)}/`}>{tag}</Link>
                      ))}
                    </div>
                    <button>
                      <Link className="Custom_Button" to={`/${node.fields.slug}/`}>READ MORE</Link>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ) 
        })}
        
      </div>
    </Layout>
  )
}

export const blogListQuery = graphql`
  query blogListQuery($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        image
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          excerpt(pruneLength: 160)
          fields {
            slug
          }
          frontmatter {
            title
            description
            tags
            image
          }
        }
      }
    }
  }
`

export default BlogList

[Js-Brecht]

Looks like your code fences got mixed up in your post.

---

I can see an issue on this line:

const postImage = data.allMarkdownRemark.edges.node.frontmatter.image || data.site.siteMetadata.image

edges is going to be an array, so edges.node is trying to access Array.node, which doesn't exist.

[lilyntalmers]

Hey @Js-Brecht ,

I have already kinda solved this problem by myself.😅

import React from "react"
import { graphql, Link } from "gatsby"
import { kebabCase } from "lodash"
import Layout from "../components/layout"
import Seo from "../components/seo"

const BlogList  = ({ data, pageContext }) => {
  const posts = data.allMarkdownRemark.edges
  const defaultImage = data.site.siteMetadata.image
  const { currentPage, numPages } = pageContext
  return (
    <Layout>
    <Seo title={`Blog Page: ${currentPage}`}/>
      <div className="Page_Container">
        <h1>All Post</h1>
        <p>{`Page: ${currentPage}`}</p>
        <div className="Flex_Container">
          {posts.map(({ node }) => {
            const title = node.frontmatter.title || node.fields.slug
            const tags = node.frontmatter.tags
            const image = node.frontmatter.image || defaultImage
            return(
              <div style={{maxWidth:"700px", margin:"10px"}} key={node.fields.slug}>
                <div className="Post_Card">
                  <div className="Post_Card__Header">
                    <img
                      src={image}
                      className="Post_Card__Image"
                      alt="#"
                      data-pin-no-hover="true" //This is for Pinterest
                      style={{maxWidth:"340px"}}
                    />
                    <div className="Post_Card__Title"><Link to={`/${node.fields.slug}/`}>{title}</Link></div>
                  </div>
                  <div className="Post_Card__Container">
                    <em className="Post_Card__Info">Published On: {node.frontmatter.date}</em>
                    <p>{node.frontmatter.description || node.excerpt}</p>
                  </div>
                  <div style={{justifyContent:"space-between"}} className="Post_Card__Footer">
                    <div>
                      {tags.map(tag => (
                        <Link key={tag} style={{marginLeft:"0px"}} className="Custom_Badge" to={`/tag/${kebabCase(tag)}-page-1`}>{tag}</Link>
                      ))}
                    </div>
                    <button>
                      <Link className="Custom_Button" to={`/${node.fields.slug}/`}>READ MORE</Link>
                    </button>
                  </div>
                </div>
              </div>
            ) 
          })}
        </div>
        <span className="Panigation_Card">
          {currentPage > 1 ? (
            <Link
              className="Panigation_Card__Link"
              title="Go to previous page"
              to={`/blog-page-${currentPage - 1}`}
            >
              ← Prev
            </Link>
          ) : <span />}
          &nbsp;Page {currentPage} of {numPages}&nbsp;
          {currentPage < numPages ? (
            <Link
              className="Panigation_Card__Link"
              title="Go to next page"
              to={`/blog-page-${currentPage + 1}`}
            >
              Next →
            </Link>
          ) : <span />}
        </span>
      </div>
    </Layout>
  )
}

export const blogListQuery = graphql`
  query blogListQuery($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        image
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          excerpt(pruneLength: 160)
          fields {
            slug
          }
          frontmatter {
            title
            date
            description
            image
            tags
          }
        }
      }
    }
  }
`

export default BlogList