Gatsby: [gatsby-image] "TypeError: Cannot read property 'edges' of undefined" error when trying to use a queried image from a markdown post

[AmirYalamov]

Description

I've been working on this issue for the past day and a half and after going through every single solution I have found online I still can't seem to fix this issue. I am writing a personal website and I want to query an image from a Markdown blog post field. I followed the instructions on the Gatsby site here: https://www.gatsbyjs.org/docs/working-with-images-in-markdown/ but it doesn't seem to work. I have included my code and screenshots of the problem below:

projects.js (this is where I want to use the queried image)

import React from "react";
import { graphql, Link } from 'gatsby';
import { Helmet } from "react-helmet"
import Nav from '../components/Nav';
import Tag from '../components/Tag';
import Img from "gatsby-image";

const Projects = ({data}) => {
  const { edges } = data.allMarkdownRemark;

  let post = data.markdownRemark
  let featuredImgFluid = post.edges.node.frontmatter.image.childImageSharp.fluid


  return (
    <section className="section" style={{"paddingTop": "1rem"}}>
      <Helmet>
        <meta charSet="utf-8" />
        <title>Projects</title>
      </Helmet>

      <div className="container">
        <div className="columns">
          <div className="column"> </div>
          <div className="column is-half">
            <Nav />

            <h1 className="title"> Projects </h1>
            <p>My project interests include back end development, system tools, and application of cool APIs. Here you can read a bit more about them and how they came about.</p>
            <p>
              <br />

              {edges.map(edge => {
                const {frontmatter} = edge.node;

                return (

                  <div className="box"

                    key={frontmatter.path} style={{color: "black", marginBottom: "1rem"}}>
                    <span style={{fontSize: "0.75rem"}}>
                    {frontmatter.date}
                    </span>
                    <br />
                    <Link to={frontmatter.path}>
                    <p>{frontmatter.title}</p>
                    </Link>

                    <p style={{fontSize: "0.85rem", marginBottom: "0.5rem", marginTop: "0.1rem"}}>{frontmatter.excerpt}</p>

                  </div>
                )
              })}
            </p>

          </div>
          <div className="column"></div>
        </div>
      </div>
    </section>
  )
};

export const query = graphql`
  query projectsQuery {
    allMarkdownRemark (
      sort: {order: DESC, fields: [frontmatter___date]}
      filter: {frontmatter: {tag: {eq: "project"}}}
    ) {
      edges {
        node {
          frontmatter {
            title
            excerpt
            path
            date
            tag
            image {
              childImageSharp {
                fluid(maxWidth: 800) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
`

export default Projects;

The error that is occurring is happening on one of the first few lines of code:

If relevant, here is my gatsby-config.js file:

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  siteMetadata: {
    title: 'Personal Website',
    description: "Amir Yalamov's Personal Website"
  },
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-transformer-sharp`
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
            },
          },
        ],
      },
    },
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              // Class prefix for <pre> tags containing syntax highlighting;
              // defaults to 'language-' (eg <pre class="language-js">).
              // If your site loads Prism into the browser at runtime,
              // (eg for use with libraries like react-live),
              // you may use this to prevent Prism from re-processing syntax.
              // This is an uncommon use-case though;
              // If you're unsure, it's best to use the default value.
              classPrefix: "language-",
              // This is used to allow setting a language for inline code
              // (i.e. single backticks) by creating a separator.
              // This separator is a string and will do no white-space
              // stripping.
              // A suggested value for English speakers is the non-ascii
              // character '›'.
              inlineCodeMarker: null,
              // This lets you set up language aliases.  For example,
              // setting this to '{ sh: "bash" }' will let you use
              // the language "sh" which will highlight using the
              // bash highlighter.
              aliases: {},
              // This toggles the display of line numbers globally alongside the code.
              // To use it, add the following line in gatsby-browser.js
              // right after importing the prism color scheme:
              //  require("prismjs/plugins/line-numbers/prism-line-numbers.css")
              // Defaults to false.
              // If you wish to only show line numbers on certain code blocks,
              // leave false and use the {numberLines: true} syntax below
              showLineNumbers: false,
              // If setting this to true, the parser won't handle and highlight inline
              // code used in markdown i.e. single backtick code like `this`.
              noInlineHighlight: false,
              // This adds a new language definition to Prism or extend an already
              // existing language definition. More details on this option can be
              // found under the header "Add new language definition or extend an
              // existing language" below.
              languageExtensions: [
                {
                  language: "superscript",
                  extend: "javascript",
                  definition: {
                    superscript_types: /(SuperType)/,
                  },
                  insertBefore: {
                    function: {
                      superscript_keywords: /(superif|superelse)/,
                    },
                  },
                },
              ],
              // Customize the prompt used in shell output
              // Values below are default
              prompt: {
                user: "root",
                host: "localhost",
                global: false,
              },
            }
          },
          {
            resolve: `gatsby-remark-katex`,
            options: {
              // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
              strict: `ignore`
            }
          }
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`
      }
    }
  ]
}

I know that I am querying properly since I can see I am querying an image in my GraphiQL page:

Expected result

My expected result is that I shouldn't get that error.

Actual result

I get a TypeError: Cannot read property 'edges' of undefined error and I'm not quite sure what it means or why it is happening.

Environment

System:
OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 10.20.1 - ~/.nvm/versions/node/v10.20.1/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v10.20.1/bin/npm
Languages:
Python: 2.7.17 - /usr/bin/python
Browsers:
Chrome: 81.0.4044.92
npmPackages:
gatsby: ^2.17.11 => 2.21.19
gatsby-image: ^2.4.3 => 2.4.3
gatsby-plugin-google-analytics: ^2.2.2 => 2.3.1
gatsby-plugin-mdx: ^1.0.71 => 1.2.6
gatsby-plugin-page-progress: ^2.0.14 => 2.0.16
gatsby-plugin-sass: ^2.1.23 => 2.3.1
gatsby-plugin-sharp: ^2.6.2 => 2.6.2
gatsby-remark-images: ^3.1.44 => 3.3.1
gatsby-remark-katex: ^3.1.17 => 3.3.1
gatsby-remark-prismjs: ^3.3.23 => 3.5.1
gatsby-source-filesystem: ^2.1.37 => 2.3.1
gatsby-transformer-remark: ^2.6.35 => 2.8.7
gatsby-transformer-sharp: ^2.5.2 => 2.5.2
npmGlobalPackages:
gatsby-cli: 2.12.13

I would appreciate any input! It's also my first time using Gatsby so I apologise in advance if I haven't done something properly or this is a dumb question but I've gone through at least 10 other Issue posts like this and none of them helped. Thank you :)

[wardpeet]

Hey @AmirYalamov,

Seems like projects.js is not entirely correct.

Try this

import React from "react";
import { graphql, Link } from 'gatsby';
import { Helmet } from "react-helmet"
import Nav from '../components/Nav';
import Tag from '../components/Tag';
import Img from "gatsby-image";

const Projects = ({data}) => {
  const { edges } = data.allMarkdownRemark;


  return (
    <section className="section" style={{"paddingTop": "1rem"}}>
      <Helmet>
        <meta charSet="utf-8" />
        <title>Projects</title>
      </Helmet>

      <div className="container">
        <div className="columns">
          <div className="column"> </div>
          <div className="column is-half">
            <Nav />

            <h1 className="title"> Projects </h1>
            <p>My project interests include back end development, system tools, and application of cool APIs. Here you can read a bit more about them and how they came about.</p>
            <p>
              <br />

              {edges.map(edge => {
                const {frontmatter} = edge.node;
                const featuredImgFluid = frontmatter.image.childImageSharp.fluid

                return (

                  <div className="box"

                    key={frontmatter.path} style={{color: "black", marginBottom: "1rem"}}>
                    <span style={{fontSize: "0.75rem"}}>
                    {frontmatter.date}
                    </span>
                    <br />
                    <Link to={frontmatter.path}>
                    <p>{frontmatter.title}</p>
                    </Link>

                    <p style={{fontSize: "0.85rem", marginBottom: "0.5rem", marginTop: "0.1rem"}}>{frontmatter.excerpt}</p>

                  </div>
                )
              })}
            </p>

          </div>
          <div className="column"></div>
        </div>
      </div>
    </section>
  )
};

export const query = graphql`
  query projectsQuery {
    allMarkdownRemark (
      sort: {order: DESC, fields: [frontmatter___date]}
      filter: {frontmatter: {tag: {eq: "project"}}}
    ) {
      edges {
        node {
          frontmatter {
            title
            excerpt
            path
            date
            tag
            image {
              childImageSharp {
                fluid(maxWidth: 800) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
`

export default Projects;

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜

[AmirYalamov]

Hey @wardpeet, thanks for answering! I really appreciate your help as your suggestion worked and allowed me to add a few extra features to my personal website that I really wanted to have :) I have nothing to discuss, the problem has been fixed, but just wanted to give credit where it's due. Just out of curiosity, do you know what I was doing wrong before or what the issue was? It would be good for me know to learn Gatsby and JS so I don't repeat the same mistake in the future. Thanks!

[wardpeet]

I think it's more about experience than really an easy way to figure out what the problem was. When I see something is "undefined" it means something in your chain edges.node.something isn't correct.