Gatsby: Gatsby Source Filesystem not reading all files?

[danboyle8637]

I separate my images by page in the images folder provided by Gatsby.

Here's my gatsby-config.js (at least the filesystem setup):

{
   resolve: `gatsby-source-filesystem`,
   options: {
     name: `homeimages`,
     path: path.join(__dirname, "src", "images", "home"),
   },
},

I require path at the top of the file.

Currently I have four images in my home directory.

When I run this query in Graphiql:

query {
  allFile(filter: {
    sourceInstanceName: {eq: "homeimages"}
  }) {
    nodes {
      name
    }
  }
}

I get this as my data:

{
  "data": {
    "allFile": {
      "nodes": [
        {
          "name": "tablet-834x1112"
        },
        {
          "name": "mobile-600x1300"
        }
      ]
    }
  }
}

But there are two other images in the folder.

Not sure if this is a bug or if I'm making an obvious mistake and just not seeing it.

my gatsby-source-filesystem version is 2.0.38

When I query for one of the images that's not listed in my allFile query, it does show up.

Here is my single file query:

query {
  file(name: {eq: "desktop-1440x800"}) {
    name
  }
}

My data object:

{
  "data": {
    "file": {
      "name": "desktop-1440x800"
    }
  }
}

[superhawk610]

Hey @danboyle8637, can you post a link to your project so we can get a better idea of the issue you're facing? If you need help, check out this link for setting up a reproducible repo.

[danboyle8637]

@superhawk610 sure... https://github.com/danboyle8637/fww

Thanks.

[anesask]

I'm facing this problem whole day? Hope there is fix.

[superhawk610]

@danboyle8637 I cloned your repo locally and when running your query I can see all 4 images in the home directory as well as the icon image:

// query
query MyQuery {
  allFile {
    nodes {
      relativePath
    }
  }
}

// result
{
  "data": {
    "allFile": {
      "nodes": [
        {
          "relativePath": "gatsby-icon.png"
        },
        {
          "relativePath": "home/kindal-600x1375.jpg"
        },
        {
          "relativePath": "home/desktop-1440x800.jpg"
        },
        {
          "relativePath": "home/mobile-600x1300.jpg"
        },
        {
          "relativePath": "home/tablet-834x1112.jpg"
        }
      ]
    }
  }
}

I was unable to successfully build until I renamed src/images/Home to src/images/home (lowercase) which I believe may be the cause of your problem - you specified home in your config but the directory is actually named Home.

You must be building on a Windows machine (which uses a case-insensitive filesystem). Mixing cases leads to non-deterministic behavior, so make sure you use consistent casing and you should be good to go!

EDIT: Just saw your profile, go Tigers! :tiger:

[danboyle8637]

@superhawk610 Thanks for looking at this. It's really strange because in my vscode the directory is spelled with a lowercase... but when I checked my repo after reading your message, it is indeed with an uppercase.

No idea what's going on there. I'll just create a new directory all together and see what happens.

I'm on a Mac. Maybe it's a vscode thing.

Heck yeah. Go Tigers!!!

[danboyle8637]

Just incase anybody else has a similar issue.

In my gatsby-config file, I had a filesystem setup pointing to my images directory.

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

After this, I had my other filesource setups pointing to directories inside the images folder. Once I removed the code above... the one pointing to the main images directory...

everything started working.

I'm not sure why, but give it a try.