Headless Shopify store using Gatsby. How would you approach static data, dynamic data, and rebuilds?

Shopify Partner
61 0 10



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!