部署在 Netlify 上的 Gatsby 站点未从 graphcms 更新数据

Question

我是使用 Gatsby 和 graphcms 的初学者。用gatsby开发环境从cms中取数据没问题，万事大吉。我已经在 Netlify 上部署了我的网站，当通过 cms 添加一些新内容时，内容没有更新，也没有获取。

需要来自 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 是一个静态站点生成器，这意味着它在 build/develop 时间内从 CMS、markdown、JSON 或其他数据源收集所有数据并创建 public HTML 输出到 /public 文件夹。或多或少遵循这个简化的模式：

一般来说，一旦网站建成，您需要重新部署它以更新、创建或删除内容，因为网站没有使用这些 CMS 新更改进行更新。

您要实现的目标称为 webhook。 Webhook 是应用程序在 real-time 中发生新事件时通知另一个应用程序的一种方式，例如从源创建、删除或修改内容。

在 Gatsby 中，一些资源（如 DatoCMS）公开了一个 webhook，但这只适用于开发模式。任何 CMS 更改都会触发 gatsby develop 命令来刷新内容。当然，极不推荐为了实现自动刷新而在gatsby develop模式下直播上传站点。

在构建模式下，想法非常相似，但您需要触发 gatsby build + 部署，而不是运行 gatsby develop 命令。如果您使用任何持续部署工具 (CD)，例如 Netlify，您可以轻松实现这一点。如果你使用的是持续集成（CI）工具，比如Jenkins，你需要配置一个pipeline来实现。

另一种实现您想要的方法是创建一个异步 JavaScript 请求到外部 API 或数据源，用内容填充您的应用程序。这适用于任何环境，但您将失去 Gatsby 带来的所有 SEO 潜力（和其他潜力）。

部署在 Netlify 上的 Gatsby 站点未从 graphcms 更新数据

Gatsby site deployed on Netlify not updating data from graphcms

graphql

gatsby

netlify