Shopify Webhook Premature Trigger Leads to Stale Data on Revalidation

[NotInTime]

Description

We've encountered an issue with the Next.js Commerce template 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.

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

1. Update a product in Shopify.
2. Shopify sends a webhook notification.
3. Next.js receives the webhook and revalidates the data.
4. 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!

---

[KrDimitrov]

The Shopify documentation also says that a Webhook call is not guaranteed and that you should also periodically refresh data

https://shopify.dev/docs/apps/webhooks#limitations

[AGI-CEO]

The Shopify documentation also says that a Webhook call is not guaranteed and that you should also periodically refresh data

https://shopify.dev/docs/apps/webhooks#limitations

What's the best way to do this?
Set up a cron job to fetch new data?

[AGI-CEO]

I've found personally the easy way is to purge the cache after each time an update is saved in shopify. I'll be looking how to automate this on shopify update or maybe scheduled runs in the middle of the night 🤷‍♂️

[AGI-CEO]

Description

We've encountered an issue with the Next.js Commerce template 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.

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

1. Update a product in Shopify.
2. Shopify sends a webhook notification.
3. Next.js receives the webhook and revalidates the data.
4. 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!

Have you found a solution to this?
I feel like a barbarian having to delete the data cache every once in a while 🤷‍♂️

[NotInTime]

Description

We've encountered an issue with the Next.js Commerce template 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.

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

1. Update a product in Shopify.
2. Shopify sends a webhook notification.
3. Next.js receives the webhook and revalidates the data.
4. 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!

Have you found a solution to this? I feel like a barbarian having to delete the data cache every once in a while 🤷‍♂️

Unfortunately, I haven't been able to find a solution yet. It would be really helpful to get some insights from someone with more experience, or even better, someone from Vercel, to tackle this issue we're facing. It's seriously affecting the performance of our shop - the constant data pulling is making the pages load slowly, and our customers are left waiting too long for the page to be displayed.