Syncing contentful changes to localhost gatsby build without re-running `gatsby-develop`

Question

I am playing around with the gatsby contentful starter. I have everything set up so that I can make content changes in contentful and the webhook posts those to a remote Netlify site, and all I have to do is refresh the netlify site to see latest CMS changes. Locally, however, in order to see the CMS changes, I have to ctrl-c from yarn develop, and restart the packager. Is there a way to keep that in sync as well, so that all I have to do is refresh the page? (or even better, HMR).

Answer 1

You are looking for environment variables. Gatsby has a bunch of them reserved to do what you need (and more).

Gatsby exposes a /__refresh webhook that is able to receive POST requests to refresh the sourced content. This exposed webhook can be triggered whenever remote data changes, which means you can update your data without re-launching the development server.

First of all, you need to allow Gatsby to use environment variables by adding this snippet in your gatsby-config.js (above module exportation):

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

Then, you need to set to true the reserved environment variable that I've mentioned before (ENABLE_GATSBY_REFRESH_ENDPOINT) by adding in your develop command, in your package.json,

      "scripts": {
        "develop": "ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop",
      }

Now, you have your changes synced by using /__refresh. According to their docs:

You can trigger this endpoint locally, for example, on Unix-based operating systems (like Ubuntu and MacOS) using curl -X POST http://localhost:8000/__refresh.

You can check for further information in their docs.