1

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!

j08691
  • 204,283
  • 31
  • 260
  • 272
Clarke Roche
  • 13
  • 2
  • What is `data`? Probably not what you expect, since `data.project` is `undefined`. – CherryDT Dec 15 '21 at 21:38
  • Good call, I don't need ```data``` it's leftover from something else I got rid of but even after removing it I still get the same error – Clarke Roche Dec 15 '21 at 23:32

1 Answers1

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
      }
    }
  }
}
benwhipp
  • 26
  • 3