The change of image often doesn't get reflected on the page when using Gatsby in development

Question

I've been experiencing this weird behaviour of images in Gatsby. a lot times when I change the image from one file to another file(usually by renaming the local files I have) but the change of image doesn't get reflected on the page. I'm in development so I haven't hosted anywhere yet outside of http://localhost:8000 from gatsby develop. I thought it was because of the cache but after I cleared the browser cache the problem was still there, i.e. the image didn't get updated. but somehow it disappears like after several hours, meaning the image on the page will update as expected.

The relevant code snippet is,

I have an index.md somewhere and it has this entry avatar: './me.jpg', under the same folder I have an image file called me.jpg. And how the page "reads" the image is through the graphql query.

   export const pageQuery = graphql`
  {
    hero: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/hero/" } }) {
      edges {
        node {
          frontmatter {
            title
            name
            subtitle
            contactText
            avatar {
              childImageSharp {
                fluid(maxWidth: 6000, quality: 100) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
          html
        }
      }
    }

When I want to change the image, I will copy a new image file to the folder, and rename it to me.jpg(of course after I renamed the original me.jpg). Then I go back to the page I would expect the image gets updated. But weirdly the image on the page often doesn't get updated, instead it remains the same.

I also tried to shut down the local server and re-start it by gatsby develop however it didn't fix the problem

Answer 1

The reason is that your GraphQL query runs once when you startup gatsby develop. Changes in the image are not reflected because the query does not refresh while develop is still running.

Another reason is that your bundler most likely compares the filename and sees that it is the same file name. It does not reload the file when starting gatsby develop again. The old file is still in your .chache or public folder even after restarting. You have to run gatsby clean before running gatsby develop again.