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()?
