Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

154
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!