Gatsby site deployed on Netlify not updating data from graphcms

Question

I am a beginner with using Gatsby and graphcms. Fetching data from cms with gatsby development environment is fine, everything good. I have deployed my website on Netlify, when add some new content via cms content is not updating, not fetching.

Component which need content from cms:

import React from "react"
import { StaticQuery, graphql } from "gatsby"

import ServicesMobileProduct from "./ServicesMobileProduct"

const ProductsMobile = () => (
  <StaticQuery
    query={graphql`
      {
        product {
          products {
            id
            productName
            description
            price
            amount
          }
        }
      }
    `}
    render={({ product: { products } }) => (
      <>
        {products.map(({ productName, description, price, amount, id }) => (
          <ServicesMobileProduct
            key={id}
            productName={productName}
            description={description}
            price={price}
            amount={amount}
          />
        ))}
      </>
    )}
  />
)

export default ProductsMobile

Answer 1

Gatsby is a static site generator, this means that in the build/develop time it gathers all data from CMS, markdown, JSON, or other data sources and creates the public HTML output in /public folder. More or less following this simplified schema:

Generally, once the site is built, you need to redeploy it to update, create, or delete content because the site is not updated with these CMS new changes.

What you are trying to achieve is called webhook. A webhook is a way for an application to notify another application when a new event has occurred in real-time such us a creation, deletion, or modification of the content from a source.

In Gatsby, some sources (like DatoCMS) exposes a webhook, but this only works under development mode. Any CMS change will trigger a gatsby develop command to refresh the content. Of course, it's extremely not recommended to upload a site live in gatsby develop mode only to achieve an automated refresh.

In build mode, the idea is quite similar but instead of running a gatsby develop command, you will need to trigger a gatsby build + deploy. If you are using any continuous deployment tool (CD), such as Netlify, you can easily achieve this. If you are using a continuous integration (CI) tool, such as Jenkins, you need to configure a pipeline to achieve it.

Another way to achieve what you want is to create an asynchronous JavaScript request to an external API or data source that populates your application with the content. This will work in any environment but you will lose all the SEO potential (and other) that Gatsby brings.