[gatsby-plugin-sharp] allImageSharp not getting all nodes

[jweinstein92]

Description

I am having difficulties making sure the images I am trying to use are generated. Essentially, I have a bunch of pages created using createPages in gatsby-node.js. Through this process, I pass in a Javascript regex into the context. In the template file, I want to use that regex to find all images that match that regex and then display those images on the page. I am able to use the regex, but the number of nodes I get is not the number of nodes I expect. Looking into it, I noticed that only the last image that matched the regex was added to the public/static folder.

Steps to reproduce

I have a directory src/img with a bunch of images in the form a_1.jpg, a_2.jpg, a_3.jpg, b_1.jpg, b_2.jpg etc.
In my gatsby-config.js file i have included gatsby-source-filesystem

  {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `img`,
        path: `${__dirname}/src/img`
      }
    },

In one of my templates (used with createPage) I have the following GraphQL query. $photo_regex is a defined Javascript RegExp

query PhotoPage($photo_regex: String!) {
    photos: allImageSharp(filter: { id: { regex: $photo_regex } }) {
      edges {
        node {
          sizes(maxWidth: 600,) {
            ...GatsbyImageSharpSizes
          }
        }
      }
    }
  }
`

I've used this kind of query before elsewhere on a single image and it works as expected.

Checking GraphiQL with the following query will show me the correct number of nodes

{
  allImageSharp(filter: { id: { regex: "/a/" } }) {
    edges {
      node {
        id
      }
    }
  }
}

Expected result

I would expect GraphQL to iterate over all of the images that match the regex and generate appropriate sizes for all images.

Actual result

Only the last image that matched the query generated images in the public/static directory.

Environment

• Gatsby version (npm list gatsby): 9.238
• gatsby-cli version (gatsby --version): 1.1.50
• Node.js version: 8.9.0
• Operating System: MacOS Sierra

File contents (if changed):

gatsby-config.js:

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `img`,
        path: `${__dirname}/src/img`
      }
    },

gatsby-node.js:

const path = require('path');

exports.createPages = ({ boundActionCreators, graphql }) => {
  const { createPage } = boundActionCreators;

  return new Promise((resolve, reject) => {
    const photoPageTemplate = path.resolve(`src/templates/photos-page.js`);
    // Query for markdown nodes to use in creating pages.
    resolve(
      graphql(
        `
          {
            allPlacesJson {
              edges {
                node {
                  name
                  photo_regex
                  has_pictures
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          reject(result.errors);
        }

        // Create pages for each markdown file.
        result.data.allPlacesJson.edges.forEach(({ node }) => {
          const path = 'photos/' + node.photo_regex;
          if (node.has_pictures) {
            const regex = new RegExp(node.photo_regex, "g");
            createPage({
              path,
              component: photoPageTemplate,
              context: {
                name: node.name,
                photo_regex: regex
              },
            });
          }
        });
      })
    );
  });
};

[jweinstein92]

To add some more info: it doesn't necessarily only generate the last image (I was only testing with two images). When I added more images, some of them were generated while some others were not. I've tried deleting the cache, node_modules, the public folder etc. I can sometimes get the images the generate if I move the files around or delete them and then readd, but its not consistent. Also, even if I do end up getting them to generate for all of the images, my graphql query only returns the ones that were initially generated and not the ones I randomly got working later. However, I see all expected nodes on GraphiQL. I've cleared my browser cache with no luck.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[iamstevedavis]

@jweinstein92 did you ever solve your problem? I am running into the exact same issue right now using the following query. I have main_1 -> 4 .jpg in the folder and it only return 2 and 4. If I mess around with the query it might return 1 and 4 or some other subset but it only ever seems to return 2 of the 4 images.

  allImageSharp(filter: {fluid: {originalName: {regex: "/^main_\\w+/gm"}}}) {
    edges {
      node {
        id
        fluid {
          originalName
          src
          srcSet
          base64
          aspectRatio
          originalImg
          sizes     
        }
      }
    }
  }
}