CODEWITHSUNDEEP
reactjsgraphqlgatsby
Tom Hanks
Tom Hanks

Reputation: 614

Graphql / Gatsby trying to filter by relative directory

I'm trying to sort images by their parent directory for separate galleries. My directory looks like /images/gallery-one. I think I'm close, but for whatever reason I can't get it to filter by relativePath.

Any help would be greatly appreciated, even just sending me in the right direction.

import React from 'react'
import { graphql, useStaticQuery } from "gatsby"
import Img from 'gatsby-image'


const ImageGallery = () => {


const data = useStaticQuery(graphql`
query {
  images: allFile(filter: { sourceInstanceName: {eq: "images" }}) {
    edges {
      node {
        relativePath
        childImageSharp {
          id
          fluid {
            originalImg
          }
        }
      }
    }
  }
}
`)

const galleryImages = data.images.edges.node.filter(img => {
 

})

console.log(data)


    return (
        <div>
            <h1>Gallery One</h1>
        </div>
    )
}


export default ImageGallery

Upvotes: 0

Views: 673

Answers (1)

ehrencrona
ehrencrona

Reputation: 6982

That should work. Using your GraphQL query and the following filter statement you get the gallery-one images like this:

    data.images.edges.filter(edge =>
      edge.node.relativePath.startsWith("gallery-one")
    )

(Keep in mind that edges is a list where each item contains a node and that relativePath will be e.g. gallery-one/b.png)

Here's my image directory structure:

image directory structure

Upvotes: 2

Related Questions