Hi there, it's Arisa, a freelance Full-Stack & Frontend Developer living in Germany.
When you use Gatsby, sometimes you face the situation like, your edited GraphQl data query is not changing although you saved your code file, reloaded GraphQl playground and deleted the browser cache.
I also got this trap once.
But the solution was super easy✨
You also can use this solution if your images are not reloading.
Let's get started!
There is even an official doc from Gatsby says, set up a cache clean script.
Let say, I wanted to add tags in my blog articles.
(I shortcut here because this article is focused on the solution for cache issue, not the process to create a field in Contentful. Also, I guess many of you reached here because you already finished to set a field in CMS like Contentful or just stayed in a Markdown system without CMS and got the cache issue.)
In GraphQl playground, no matter how I tried to delete cache from the browser, it's not changing and no tag field appears from the option in DOCS from right hand side.
If you write in a playground, it returns me an error so I only have a choice to stay without a tag data query which must be in there... (I use GparhQl IDE playground if you wonder why my playground looks different from yours).
What to do?
Then set up this script!💡
It only takes 30 seconds!
First thing first, just open up your `package.json` file and add this script.
"clean": "rm -rf .cache" with your other scripts in `package.json` file.
All you need to do for now is, hit the script you just set up in above,
$ npm run clean in your terminal/PowerShell.
Check it out in your GraphQl playground.
Of course, it appears in the browser too if you already wrote a code in your Gatsby project.
This also works for image cache issue in gastby project.
Hope this article helps you!