GATSBY: TypeError: Cannot read property 'includes' of undefined

Question

I'm having some trouble filtering out images in my portfolio site laid out in this post…

This is the error I keep getting: "TypeError: Cannot read property 'includes' of undefined"

Anyone know why this might be?

Images query:

query {
  images: allFile (
    filter: { ext: { eq: ".jpg" } },
    sort: { order: ASC, fields: [relativePath] }
  )
  {
        edges {
        node {
        fields {
            imgslug
        }
        relativeDirectory
        id
        childImageSharp {
          fixed(width: 100) {
            src
          }
        }
        }
    } 
  }
}

Image display script:

{data.images.edges.filter((node) => node.relativeDirectory.includes(data.images.edges.node.fields.imgslug)).map(image => {
   return (
      <Img key={image.id} fixed={image.childImageSharp.fixed}/>
   )
})}

Answer 1

includes loop returns a boolean, true or false depending on the condition. You may want to use something like:

{data.images.edges.map((node) => {
   if(node.relativeDirectory.includes(data.images.edges.node.fields.imgslug){
     return <Img key={image.id} fixed={image.childImageSharp.fixed}/>
   }
})}