Upgrade to Shopper Baskets V2

Upgrade to the Shopper Baskets V2 API for basket imports for all customized template files to prevent cache inconsistencies and keep your basket data synchronized for shoppers. Shopper Baskets V2 is now the default API for imports. Shopper Baskets V1 remains the default API for all basket exports.

To use the Shopper Baskets V2 aliased hooks, make sure that your B2C Commerce instance supports the Shopper Baskets V2 API, and then update your imports from @salesforce/commerce-sdk-react.

Example:

The Shopper Basket V1 API remains the default for all basket exports. If you want to continue using the Shopper Basket V1 API for imports, you can import useShopperBasketsMutation, useBasket, and so on as usual. These imports still resolve to V1. To use the Shopper Basket V2 API, you can opt in by importing the V2 suffixed names.

All default Retail React App template files now import V2 hooks. If your B2C Commerce instance supports the Shopper Baskets V2 API and you pull in a new template version, you’ll automatically use V2 baskets.

If you’ve overridden a template file, the template will use the V1 basket for imports. This setup can cause issues. Default templates will use V2 hooks backed by the shopperBaskets V2 client and key shopperBaskets V2. Customized templates will use V1 hooks backed by the shopperBaskets client and cache key shopperBaskets.

V1 and V2 use separate React Query cache keys. For example, a mutation done through V2, such as adding an item to the basket, won’t invalidate V1 query caches. This can lead to stale basket data in the user interface.

See the impacted template files.

If you’ve customized any template files, update the overrides to use V2 imports.

Example: