How to display newly added image file with gatsby-image?

Question

In my Gatsby app user is able to upload an image which is being saved locally and ideally displayed but gatsby-image doesn't see new image this is how my Image.js file looks like.

I'm thinking that the graphql data needs to be somehow refreshed because the new image doesn't even show if I do console.log(data.images) but how can I do that?

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

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 1200) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      console.log(data.images)
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename)
      })
      if (!image) {
        return null
      }
      return (
        <Img
          alt={props.alt}
          fluid={image.node.childImageSharp.fluid}
          style={props.customStyle}
        />
      )
    }}
  />
)

export default Image

Also gatsby recognizes that new file is added and prints this in terminal after file is added

info added file at D:\WebsitesProjects\Portfolio\Ecommerce\images\daf27e67-01e5-4ba1-a25b-2348f4340eae.jpg
info changed file at D:\WebsitesProjects\Portfolio\Ecommerce\images\daf27e67-01e5-4ba1-a25b-2348f4340eae.jpg
success building schema - 0.421s
info Total nodes: 82, SitePage nodes: 14 (use --verbose for breakdown)
success createPages - 0.001s
success Checking for changed pages - 0.000s
success update schema - 0.026s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.758s
success write out requires - 0.006s
success run static queries - 0.176s - 2/2 11.33/s
success Generating image thumbnails - 0.162s - 3/3 18.54/s

I tried using gatsby-plugin-node-reload but it doesn't seem to work. Here are my gatsby-config.js plugins

plugins: [
    `gatsby-plugin-material-ui`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `../images`),
      },
    },
    "gatsby-plugin-node-reload",
  ],

also everything works perfectly if I restart app after saving new image

Answer 1

Of course, you need to refresh/rebuild the application to update the system with your image. Gatsby, compiles, bundles and processes all the assets in the build/develop time so if you add a fresh image, you will need to rebuild your application to allow Gatsby to create a schema and a node for that image.

Given your scenario, you have a few options:

• Use a native img tag and recreate the benefits of gatsby-image using others third-party dependencies (lazyloading, etc).

• Create a webhook to trigger a rebuild when an image is uploaded. A webhook is a way for an application to notify another application when a new event has occurred in real-time. I wouldn't recommend this approach since it will cause a breakdown in your application while it's being deployed.

• Use some other SSR framework rather than Gatsby.