Aiki x Developer

gatsby

Gatsby: GraphQl data query is not changing...! Set up a cache clean script

June 8th, 2019

gatsby-logo

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!

Set up a cache clean script in your package.json

There is even an official doc from Gatsby says, set up a cache clean script.

https://www.gatsbyjs.org/docs/debugging-cache-issues/

Let say, I wanted to add tags in my blog articles.

I use Contentful as a CMS to publish my articles and I set up a new tag field in Contentful dashboard.

(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).

data-query-not-updated

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.

cache-clean-script

Just add "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.

clean-cache-command

That's it!✨

Check it out in your GraphQl playground.

tag-added-data-query

Great 🎉!

Of course, it appears in the browser too if you already wrote a code in your Gatsby project.

Easy, right?

This also works for image cache issue in gastby project.

Hope this article helps you!

Ciao!