API Integration Differences with PWA Kit

While both PWA Kit and Storefront Next use SCAPI for commerce functionality, they take fundamentally different approaches to API client architecture.

AspectPWA KitStorefront Next
Package@salesforce/commerce-sdk-react@salesforce/storefront-next-runtime/scapi
Underlying Clientcommerce-sdk-isomorphicopenapi-fetch
PatternReact hooksDirect API calls
Type GenerationManual TypeScriptGenerated from OpenAPI specs
Bundle SizeLarger (includes React Query + SDK)Smaller (lightweight client)
AspectPWA KitStorefront Next
Reads (GET)Inside components via hooksIn route loaders
Writes (POST/PUT)Inside components via mutation hooksIn action routes
AuthenticationAutomatic via providerManual via middleware
AspectPWA KitStorefront Next
WhenOnce at app rootPer-request in loaders/actions
WhereCommerceApiProvidercreateApiClients() helper
AuthAutomatic token managementMiddleware injects tokens
AspectPWA KitStorefront Next
StrategyReact Query cacheReact Router revalidation
InvalidationAutomatic after mutationsManual or via shouldRevalidate
Stale TimeConfigurable (default 10s)No built-in stale time

Fetching a product:

Adding to Cart:

  • Both use SCAPI for commerce operations.
  • Both support SLAS authentication.
  • Both proxy API requests through the server.
  • Both provide TypeScript support.

When migrating from PWA Kit to Storefront Next:

  1. Move API calls to loaders: Replace useProduct, useCategory, and so on with loader fetches.
  2. Move mutations to actions: Replace useShopperBasketsMutation with action routes.
  3. Update parameter format: Change from { parameters: {} } to { params: { path: {}, query: {} } }.
  4. Handle auth manually: Create auth middleware instead of relying on provider.
  5. Remove React Query: No longer needed; caching handled by React Router.
  6. Update error handling: Use ApiError class instead of hook error states.