Gatsby GraphQL Regex Query Multiple Images

Question

I have images that I want to query for in Gatsby from multiple blog posts. The file naming for each is composed of the following manner.

• blog-post1-preview.jpg
• blog-post2-preview.jpg
• blog-post3-preview.jpg
• blog-post1.jpg

I want to select only the image that contain-preview.jpg in their name, but I want to select all of them and loop through at a later point. Currently I have a graphql query that selects only one of them using regex.

query MyQuery {
  file(absolutePath: {regex: "/preview.jpg$/"}) {
    childrenImageSharp {
      fluid {
        originalName
      }
    }
  }
}

However, this only returns one of the images that contain preview.jpg in their name. In the example above, it would return blog-post3-preview.jpg but not 1 or 2. How can I have all 3 be returned?

Answer 1

I've found the solution, my original regex worked fine. However, I needed to use a different query path other than file() as this only returns one node in the file system it seems.

Here's the query that worked for me.

query MyQuery {
  allImageSharp(filter: {fluid: {originalName: {regex: "/preview.jpg$/"}}}) {
    edges {
      node {
        fluid {
          originalName
          originalImg
        }
      }
    }
  }
}

I found the solution here at How do I query multiple images with gatsby-image?