How to remove cache in Gatsbyjs?

When building a Gatsbyjs project, many different assets are requested. Whether that be from your CMS, your local files, or other data storing methods. Gatsby will compile all this data into static assets.

Gatsbyjs tends to cache its retrieved assets in order to speed up subsequent builds. This caching technique is very beneficial as applications with large sets of data will see future build time reduced significantly.

Downloading and generating images on every build would be quite time consuming without caching. However, bugs can happen and when publishing new content on your CMS there is a chance that gatsby might not initially see it because of its cached contents.

So, how can you remove the cache in Gatbyjs?

Thankfully, this made relatively straightforward using the following command:

gatsby clean

This command will clear your .cache folder located in the root of your project. Additionally, this also removes contents from the public folder in the root as well.

If the gatsby clean command doesn’t remove those folders you can also remove them manually.

To save time in the future you can add the cache cleaning to your gatsby develop and gatsby build commands.

"scripts": {
    "cdev": "gatsby clean && gatsby develop",
    "cbuild": "gatsby clean && gatsby build",
  },

If this is doesn’t solve your issue than the caching could be related to Node.js

To solve you can try the command:

npm run clean

If you are still having trouble with your caching, as a last resort you can try removing your node_modules folder.

You can manually delete it or use the command:

rm -rf node_modules/

Afterward, install your modules once again:

npm i

Try gatsby clean once again:

gatsby clean

Hopefully, this solved your caching problem.