I've encountered an issue with the Next.js Commerce template (https://github.com/vercel/commerce) when integrating Shopify webhooks. Specifically, when a product update occurs, Shopify sends the webhook notification immediately, but the change is not yet reflected in their GraphQL Storefront API. This results in Next.js revalidating and caching the outdated data. I also dont have a lot of experience with caching overall.

Expected behavior
After receiving a webhook notification, the data fetched by Next.js should reflect the latest changes made in the Shopify store.

Actual behavior
Next.js revalidates and caches the data as soon as the webhook is received, leading to a situation where the "old" data is cached, causing inconsistencies.

Steps to reproduce
Update a product in Shopify.
Shopify sends a webhook notification.
Next.js receives the webhook and revalidates the data.
The data revalidated by Next.js is the stale data, not the updated one.
Proposed solution
Implement a re-validation strategy that includes a delay or interval check to ensure that the data fetched post-webhook is indeed the most recent data from Shopify.

Additional context
This issue is critical for real-time data accuracy and affects the user experience as the displayed data may not match the current offerings.

Looking forward to a solution or guidance on this matter. Thank you!