NetlifyにデプロイされたGatsbyサイトがgraphcmsからのデータを更新しない

Aug 25 2020

私は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

回答

1 FerranBuireu Aug 26 2020 at 15:47

Gatsbyは静的サイトジェネレーターです。つまり、ビルド/開発時に、CMS、マークダウン、JSON、またはその他のデータソースからすべてのデータを収集し、/publicフォルダーにパブリックHTML出力を作成します。この単純化されたスキーマに多かれ少なかれ従います：

通常、サイトが構築されたら、コンテンツを更新、作成、または削除するためにサイトを再デプロイする必要があります。これは、サイトがこれらのCMSの新しい変更で更新されていないためです。

あなたが達成しようとしていることはwebhookと呼ばれています。Webhookは、ソースからのコンテンツの作成、削除、変更など、新しいイベントがリアルタイムで発生したときに、アプリケーションが別のアプリケーションに通知する方法です。

Gatsbyでは、一部のソース（DatoCMSなど）がWebhookを公開していますが、これは開発モードでのみ機能します。CMSを変更するとgatsby develop、コンテンツを更新するコマンドがトリガーされます。もちろん、gatsby develop自動更新を実現するためだけにサイトをライブモードでアップロードすることは強くお勧めしません。

ビルドモードでは、考え方は非常に似ていgatsby developますが、コマンドを実行する代わりに、gatsby build+デプロイをトリガーする必要があります。Netlifyなどの継続的デプロイツール（CD）を使用している場合は、これを簡単に実現できます。Jenkinsなどの継続的インテグレーション（CI）ツールを使用している場合は、それを実現するためにパイプラインを構成する必要があります。

目的を達成するもう1つの方法は、アプリケーションにコンテンツを取り込む外部APIまたはデータソースへの非同期JavaScriptリクエストを作成することです。これはどのような環境でも機能しますが、ギャツビーがもたらすSEOの可能性（およびその他）はすべて失われます。