Query returning error "Cannot read properties of undefined (reading 'nodes')"

Question

I am trying to write a page query to return a line of text and an image in a GatsbyJS project. I am using Gatsby Image plugin along with 'gatsby-transformer-sharp' and 'gatsby-plugin-sharp' and I keep getting an error that the nodes returned from the query are undefined.

My query looks like this:

query ProjectsPage {
  allMarkdownRemark {
    nodes {
      frontmatter {
        featuredImg {
          childImageSharp {
            fluid{
              ...GatsbyImageSharpFluid
            }
          }
        }
        title
      }
    }
  }
}

The line of code giving me the error:

const projects = data.projects.nodes

And my gatsby-config.js file looks like this:

 module.exports = {
   /* Your site config here */
   plugins: [
     'gatsby-transformer-remark',
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `projects`,
         path: `${__dirname}/src/projects/`,
        },
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `images`,
          path: `${__dirname}/src/images/`,
         },
       },
   ],
   siteMetadata: {
     title: 'example',
     description: 'web dev portfolio',
     copyright: 'example text'
   },
 }

I would really appreciate any help on this!

Answer 1

The correct way to get the nodes from your query is:

const projects = data.allMarkdownRemark.nodes

If you want to filter your results by directory and only get nodes from within projects, you can follow one of the answers here and use something like:

query ProjectsPage {
 allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(/projects/)/"}}) {
    nodes {
      frontmatter {
        featuredImg {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        title
      }
    }
  }
}