Il sito Gatsby distribuito su Netlify non aggiorna i dati da graphcms

Aug 25 2020

Sono un principiante con l'utilizzo di Gatsby e graphcms. Il recupero dei dati da cms con l'ambiente di sviluppo gatsby va bene, tutto bene. Ho distribuito il mio sito Web su Netlify, quando aggiungo nuovi contenuti tramite cms il contenuto non si aggiorna, non viene recuperato.

Componente che necessita di contenuto da 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

Risposte

1 FerranBuireu Aug 26 2020 at 15:47

Gatsby è un generatore di siti statici, ciò significa che nel tempo di compilazione/sviluppo raccoglie tutti i dati da CMS, markdown, JSON o altre fonti di dati e crea l'output HTML pubblico nella /publiccartella. Più o meno seguendo questo schema semplificato:

In genere, una volta creato il sito, è necessario ridistribuirlo per aggiornare, creare o eliminare il contenuto perché il sito non viene aggiornato con queste nuove modifiche al CMS.

Quello che stai cercando di ottenere si chiama webhook . Un webhook è un modo per un'applicazione di notificare a un'altra applicazione quando si è verificato un nuovo evento in tempo reale, ad esempio una creazione, eliminazione o modifica del contenuto da una fonte.

In Gatsby, alcune fonti (come DatoCMS) espongono un webhook, ma questo funziona solo in modalità sviluppo. Qualsiasi modifica al CMS attiverà un gatsby developcomando per aggiornare il contenuto. Ovviamente, è estremamente sconsigliato caricare un sito in gatsby developmodalità live solo per ottenere un aggiornamento automatico.

In modalità build, l'idea è abbastanza simile ma invece di eseguire un gatsby developcomando, dovrai attivare un gatsby build+ deploy. Se stai utilizzando uno strumento di distribuzione continua (CD), come Netlify, puoi farlo facilmente. Se utilizzi uno strumento di integrazione continua (CI), come Jenkins, devi configurare una pipeline per ottenerlo.

Un altro modo per ottenere ciò che desideri è creare una richiesta JavaScript asincrona a un'API esterna o un'origine dati che popola la tua applicazione con il contenuto. Funzionerà in qualsiasi ambiente ma perderai tutto il potenziale SEO (e altro) che Gatsby offre.