部署在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是一个静态站点生成器，这意味着在构建/开发时，它收集来自内容管理系统、markdown、JSON或其他数据源的所有数据，并在/public文件夹中创建公共HTML输出。或多或少遵循这个简化的模式：

​

​

通常，一旦构建了站点，您就需要重新部署它来更新、创建或删除内容，因为站点不会使用这些CMS新更改进行更新。

您正在尝试实现的目标称为webhook。网络挂钩是应用程序在新事件已实时发生时通知另一应用程序的一种方式，所述新事件例如是来自源的内容的创建、删除或修改。

在Gatsby中，一些源代码(如DatoCMS)公开了一个webhook，但这只在开发模式下有效。任何内容管理系统的改变都会触发一个gatsby develop命令来刷新内容。当然，不推荐仅仅为了实现自动刷新而在gatsby develop模式下实时上传站点。

在构建模式下，想法非常相似，但您需要触发gatsby build + deploy，而不是运行gatsby develop命令。如果您正在使用任何连续部署工具(CD)，例如Netlify，您可以很容易地实现这一点。如果您正在使用持续集成(CI)工具，例如Jenkins，则需要配置一个管道来实现它。

实现所需内容的另一种方法是创建对外部JavaScript或数据源的异步API请求，该请求用内容填充您的应用程序。这将在任何环境下工作，但您将失去所有的搜索引擎优化潜力(和其他)，由Gatsby带来。