Hola,
I’m building a headless Shopify shop using Gatsby and likely hosting it on Netlify. One big mystery to me is in regards to best practices when it comes to updating static pages.
I know I’d want to trigger a rebuild when…
-
New images are added to the shop
-
New content is added to the 3rd party CMS
-
When product information is modified in the Shopify Admin
-
When metafield values are changed
-
Probably a more events that I’m not aware of yet…
Here’s an example: I have a badge on a product card in the collection page that says “unavailable”, and this badge is based on the GraphQL (availableForSale) query which is currently run at build time on the server, not per page load. However, rebuilding the site when a product qty reaches zero doesn’t seem very efficient.
One idea would be, when looping through the static GraphQL product loop, to run a query across all products in a useEffect function per page load, checking for availability and rendering the component based on that.
The ideal scenario would be if there’s a webhook that would disable the product during an active shopper session as the qty reaches zero and becomes unavailable, not even requiring a reload.
Long story short, this has got me thinking about the different scenarios in which a static headless Shopify shop should store data statically, query data per load, and when Netlify would need to trigger a rebuild.
So I’m wondering if anyone would be willing to share some best practices in that area.
Thanks in advance!