Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

153
Vistas
Problem using google spreadsheet as source for a Next.JS website: changes won't update pages

I made this restaurant's website and uses Google Spreadsheet to feed content into the menu pages. The choice of such method was based on simplicity and client expertise.

I'm using google-spreadsheet package to fetch all the information I need from this document on Google Drive...

//** ../pages/api/cardapios/index.js
import { GoogleSpreadsheet } from "google-spreadsheet";

export default async function getCardapioFromSlug(indexNumber) {
  try {

    const doc = new GoogleSpreadsheet(<%GOOGLE_SPREADSHEET_ID%>)
    
    await doc.useServiceAccountAuth({
      client_email: process.env.GOOGLE_SHEETS_SERVICE_ACCOUNT_EMAIL,
      private_key: process.env.GOOGLE_SHEETS_PRIVATE_KEY,
    });
    
    await doc.loadInfo()
    
    const cardapio = doc.sheetsByIndex[indexNumber]
    
    const rows = await cardapio.getRows()
    
    if (rows.length) {
      return rows.map(({
        Código,
        Produto,
        Unidade,
        Descrição,
        Valor,
        Procedência,
        Categoria
      }) => {
        return {
          Código,
          Produto,
          Unidade,
          Descrição,
          Valor,
          Procedência,
          Categoria
        }
      })
    }
  } catch (err) {
    console.log(err)
  }

  return [];
}

...then feeding it into the page using getStaticProps() function. It worked like a charm once I've got all things setup properly.

// ../pages/unidades/[slug].js
export async function getStaticProps({ params }) {
  const sanityData = await getCardapio(params.slug)

  const indexNumber = sanityData[0].id
  // console.log("index number", indexNumber)
  const produtos = await getCardapioFromSlug(indexNumber)
  const produtosStringfied = JSON.stringify(produtos)
  const produtosArray = JSON.parse(produtosStringfied)
  return {
    props: {
      cardapio: {
        info: sanityData[0] || null,
        items: produtosArray || null
      }

    },
    revalidate: 1
  }
}

The problem is after we changed values for some cells in the source document, the content wasn't automatically updated in the site.

I've tried redeploying (with both build cache on and off) it so the build process would grab the content from the document one more time and update the site, but it didn't worked. One idea was to make a webhook that would be avaiable for the client to run a simple command on his machine and rebuild the page with the new info, but this approach seems to be useless.

I red some articles (this one for instance) on custom webhooks for Google Spreadsheets but I can't really understand how it would trigger something on my page. Don't really think it would actually work.

Now I'm kind of stuck on where should I go. Perhaps I should rewrite my getStaticProps()?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The issue has nothing to due with the code itself, but the misuse of the API. The id from the spreadsheet was wrong, still using a prototype which was used as base to the final one the client has. Changed the env var and everything went fine.

Had to force deploy ignoring build cache via vercel cli. Thanks to anyone that spent time commenting and wondering about this issue.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda