"gatsby develop" can't run After adjusting image data

I'm very new Gatsbyjs user. Currently I use this template

https://www.gatsbyjs.com/starters/netlify-templates/gatsby-starter-netlify-cms

My nodejs version is v16.13.2

I could "gatsby develop" but I think when I'm adjusting photo data in "page-data.json" which stored public\page-data\index I "gatsby develop" won't start

I'm not sure what is cause but I'm sure when I add some image data into public\img and changed lines "coffee.png" in "page-data.json" this happened...

Here is error message. Could someone teach me what part should I fix please ?

warn Plugin gatsby-plugin-netlify is not compatible with your gatsby version 4.3.0 - It requires gatsby@^3.0.0
⠋ open and validate gatsby-configs, load plugins
C:\Users\myname\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
        throw ex;
        ^

Error: read ECONNRESET
    at TCP.onStreamRead (node:internal/stream_base_commons:220:20)
Emitted 'error' event on Socket instance at:
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -4077,
  code: 'ECONNRESET',
  syscall: 'read'
}

Solution

I could "gatsby develop" but I think when I'm adjusting photo data in "page-data.json" which stored public\page-data\index I "gatsby develop" won't start

You should never edit manually the content or the code inside the /public folder directly. Keep in mind how Gatsby works: when you run gatsby develop or gatsby build, webpack compiles and bundles everything under /src folder to create the /public one: this is autogenerated and it is rebuilt when you change anything on your /src folder. If you change anything inside the public folder manually without changing the source, it will be lost in the next compilation because the source doesn't includes the changes. So, all changes must be done in the /src folder.

In this case, the error is rising because you changed the public folder directly so the references of the assets page-data.json have changed.

To change the coffee.png image, you need to change the static folder. The static folder is a "special" folder that is cloned inside the public folder keeping the exact internal structure. As the name suggests, is very useful to use for static assets (the ones that rarely change).

Once you change the coffe.png image for your desired one, you just need to change the references of coffee.png to the new one (unless they are called the same).

That said, this kind of static change may force you to reload the gatsby develop (stop and rerun) process to see the changes. If the image still without changing, clean the cache by running gatsby clean before rerunning the gatsby develop command.