bigcommerce / checkout-sdk-js

BigCommerce Checkout JavaScript SDK
MIT License
132 stars 215 forks source link

CHECKOUT-8300: Fix config and form field cache by ensuring input parameters are correctly compared #2615

Closed davidchin closed 3 weeks ago

davidchin commented 3 weeks ago

What?

Fix the client-side cache for the /api/storefront/checkout-settings and /api/storefront/form-fields endpoints so that the cache is used when the CheckoutService#loadCheckout or CheckoutService#loadDefaultCheckout method is called multiple times.

Why?

The client-side cache isn't working properly because the input parameter for ConfigActionCreator and FormFieldActionCreator includes the params field, which may contain a nested object (i.e.: { params: { checkoutId: id } } and { params: { include: ['categoryNames'] } }). The nested object breaks the caching as @cacheableAction decorator only works on shallow objects. As a result, when ExtensionCommandType.ReloadCheckout command is issued by an extension, we end up making repeated calls to these endpoints instead of re-using the local cache.

Testing / Proof

Before

This video shows that local cache is not used when ReloadCheckout is called repeatedly.

https://github.com/user-attachments/assets/a12f7ea9-a474-4a76-9942-1a5e6b244698

After

This video shows that local cache is used as expected when ReloadCheckout is called repeatedly.

https://github.com/user-attachments/assets/b9d716d8-9cc6-4275-adca-9d62f253dcba