Merge pull request #2539 from SalesforceCommerceCloud/feature/handle-missing-sdk-clients

@W-18568190@ - Handle missing SDK Clients in CommerceApiProviders

Author: shethj

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,6 +1,6 @@
 ## v3.4.0-dev.0 (May 23, 2025)
 - Now compatible with either React 17 and 18 [#2506](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2506)
-
+- Gracefully handle missing SDK Clients in CommerceApiProvider [#2539](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2539)
 - Refactor commerce-sdk-react to allow injecting ApiClients [#2519](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2519)
 
 ## v3.3.0 (May 22, 2025)

packages/commerce-sdk-react/src/components/ShopperExperience/types.ts

@@ -5,11 +5,13 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
+import {CLIENT_KEYS} from '../../constant'
 import {ApiClients, DataType} from '../../hooks/types' // TODO: Should we be moving these types to a more global place.
 
 type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType[number]
 
-type Client = ApiClients['shopperExperience']
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_EXPERIENCE
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
 
 export type Page = DataType<Client['getPage']>
 

packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.test.tsx

@@ -117,9 +117,9 @@ describe('Storefront Preview Component', function () {
         const parameters = {basketId: '123'}
         const MockedComponent = ({enableStorefrontPreview}: {enableStorefrontPreview: boolean}) => {
             const apiClients = useCommerceApi()
-            getBasketSpy = jest.spyOn(apiClients.shopperBaskets, 'getBasket')
+            getBasketSpy = jest.spyOn(apiClients.shopperBaskets!, 'getBasket')
             useEffect(() => {
-                void apiClients.shopperBaskets.getBasket({parameters})
+                void apiClients.shopperBaskets!.getBasket({parameters})
             }, [])
             return (
                 <StorefrontPreview enabled={enableStorefrontPreview} getToken={() => 'my-token'} />

packages/commerce-sdk-react/src/components/StorefrontPreview/utils.test.ts

@@ -101,7 +101,7 @@ describe('Storefront Preview utils', () => {
         test('proxy handlers applied to all client methods', async () => {
             const {result} = renderHookWithProviders(() => useCommerceApi())
             const clients = result.current
-            const shopperBaskets = clients.shopperBaskets
+            const shopperBaskets = clients.shopperBaskets!
             const handlers = {apply: jest.fn()}
 
             proxyRequests(clients, handlers)

packages/commerce-sdk-react/src/constant.ts

@@ -49,3 +49,18 @@ export const EXCLUDE_COOKIE_SUFFIX = [DWSID_COOKIE_NAME, DNT_COOKIE_NAME]
  * Use the header key below to send dwsid value with SCAPI/OCAPI requests.
  */
 export const SERVER_AFFINITY_HEADER_KEY = 'sfdc_dwsid'
+
+export const CLIENT_KEYS = {
+    SHOPPER_BASKETS: 'shopperBaskets',
+    SHOPPER_CONTEXTS: 'shopperContexts',
+    SHOPPER_CUSTOMERS: 'shopperCustomers',
+    SHOPPER_EXPERIENCE: 'shopperExperience',
+    SHOPPER_GIFT_CERTIFICATES: 'shopperGiftCertificates',
+    SHOPPER_LOGIN: 'shopperLogin',
+    SHOPPER_ORDERS: 'shopperOrders',
+    SHOPPER_PRODUCTS: 'shopperProducts',
+    SHOPPER_PROMOTIONS: 'shopperPromotions',
+    SHOPPER_SEARCH: 'shopperSearch',
+    SHOPPER_SEO: 'shopperSeo',
+    SHOPPER_STORES: 'shopperStores'
+} as const

packages/commerce-sdk-react/src/hooks/ShopperBaskets/cache.ts

@@ -21,8 +21,10 @@ import {
     getTaxesFromBasket
 } from './queryKeyHelpers'
 import {getCustomerBaskets} from '../ShopperCustomers/queryKeyHelpers'
+import {CLIENT_KEYS} from '../../constant'
 
-type Client = ApiClients['shopperBaskets']
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_BASKETS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
 /** Data returned by every Shopper Baskets endpoint (except `deleteBasket`) */
 type Basket = ShopperBasketsTypes.Basket
 /** Data returned by `getCustomerBaskets` */

packages/commerce-sdk-react/src/hooks/ShopperBaskets/helpers.ts

@@ -9,7 +9,10 @@ import {useCustomerId, useShopperBasketsMutation} from '../index'
 import {useCustomerBaskets} from '../ShopperCustomers'
 import {ApiClients, Argument} from '../types'
 import {ShopperBasketsTypes} from 'commerce-sdk-isomorphic'
-type Client = ApiClients['shopperBaskets']
+import {CLIENT_KEYS} from '../../constant'
+
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_BASKETS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
 type Basket = ShopperBasketsTypes.Basket
 
 /**

packages/commerce-sdk-react/src/hooks/ShopperBaskets/mutation.test.ts

@@ -22,14 +22,16 @@ import {useCustomerBaskets} from '../ShopperCustomers'
 import {ApiClients, Argument} from '../types'
 import {ShopperBasketsMutation, useShopperBasketsMutation} from './mutation'
 import * as queries from './query'
+import {CLIENT_KEYS} from '../../constant'
 
 jest.mock('../../auth/index.ts', () => {
     const {default: mockAuth} = jest.requireActual('../../auth/index.ts')
     mockAuth.prototype.ready = jest.fn().mockResolvedValue({access_token: 'access_token'})
     return mockAuth
 })
 
-type Client = ApiClients['shopperBaskets']
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_BASKETS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
 type Basket = ShopperBasketsTypes.Basket
 type BasketsResult = ShopperCustomersTypes.BasketsResult
 
@@ -52,8 +54,9 @@ const newBasket: Basket = {basketId: BASKET_ID, mockData: 'new basket'}
 // --- getCustomerBaskets constants --- //
 const customersEndpoint = '/customer/shopper-customers/'
 const CUSTOMER_ID = 'customer_id'
-// Can't use `makeOptions()` here because it's Shopper Customers, not Shopper Baskets
-const getCustomerBasketsOptions: Argument<ApiClients['shopperCustomers']['getCustomerBaskets']> = {
+const getCustomerBasketsOptions: Argument<
+    NonNullable<ApiClients['shopperCustomers']>['getCustomerBaskets']
+> = {
     parameters: {
         customerId: CUSTOMER_ID
     }

packages/commerce-sdk-react/src/hooks/ShopperBaskets/mutation.ts

@@ -7,10 +7,12 @@
 import {ApiClients, ApiMethod, Argument, CacheUpdateGetter, DataType, MergedOptions} from '../types'
 import {useMutation} from '../useMutation'
 import {UseMutationResult} from '@tanstack/react-query'
-import useCommerceApi from '../useCommerceApi'
 import {cacheUpdateMatrix} from './cache'
+import {CLIENT_KEYS} from '../../constant'
+import useCommerceApi from '../useCommerceApi'
 
-type Client = ApiClients['shopperBaskets']
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_BASKETS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
 
 /**
  * Mutations available for Shopper Baskets.
@@ -185,7 +187,7 @@ export function useShopperBasketsMutation<Mutation extends ShopperBasketsMutatio
     // I'm not sure if there's a way to avoid the type assertions in here for the methods that
     // use them. However, I'm fairly confident that they are safe to do, as they seem to be simply
     // re-asserting what we already have.
-    const {shopperBaskets: client} = useCommerceApi()
+    const client = useCommerceApi(CLIENT_KEY)
     type Options = Argument<Client[Mutation]>
     type Data = DataType<Client[Mutation]>
     return useMutation({

packages/commerce-sdk-react/src/hooks/ShopperBaskets/query.ts

@@ -6,13 +6,15 @@
  */
 import {UseQueryResult} from '@tanstack/react-query'
 import {ApiClients, ApiQueryOptions, Argument, DataType, NullableParameters} from '../types'
-import useCommerceApi from '../useCommerceApi'
 import {useQuery} from '../useQuery'
 import {mergeOptions, omitNullableParameters, pickValidParams} from '../utils'
 import * as queryKeyHelpers from './queryKeyHelpers'
 import {ShopperBaskets} from 'commerce-sdk-isomorphic'
+import {CLIENT_KEYS} from '../../constant'
+import useCommerceApi from '../useCommerceApi'
 
-type Client = ApiClients['shopperBaskets']
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_BASKETS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
 
 /**
  * Gets a basket.
@@ -31,7 +33,7 @@ export const useBasket = (
 ): UseQueryResult<DataType<Client['getBasket']>> => {
     type Options = Argument<Client['getBasket']>
     type Data = DataType<Client['getBasket']>
-    const {shopperBaskets: client} = useCommerceApi()
+    const client = useCommerceApi(CLIENT_KEY)
     const methodName = 'getBasket'
     const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]
 
@@ -73,7 +75,7 @@ export const usePaymentMethodsForBasket = (
 ): UseQueryResult<DataType<Client['getPaymentMethodsForBasket']>> => {
     type Options = Argument<Client['getPaymentMethodsForBasket']>
     type Data = DataType<Client['getPaymentMethodsForBasket']>
-    const {shopperBaskets: client} = useCommerceApi()
+    const client = useCommerceApi(CLIENT_KEY)
     const methodName = 'getPaymentMethodsForBasket'
     const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]
 
@@ -115,7 +117,7 @@ export const usePriceBooksForBasket = (
 ): UseQueryResult<DataType<Client['getPriceBooksForBasket']>> => {
     type Options = Argument<Client['getPriceBooksForBasket']>
     type Data = DataType<Client['getPriceBooksForBasket']>
-    const {shopperBaskets: client} = useCommerceApi()
+    const client = useCommerceApi(CLIENT_KEY)
     const methodName = 'getPriceBooksForBasket'
     const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]
 
@@ -157,7 +159,7 @@ export const useShippingMethodsForShipment = (
 ): UseQueryResult<DataType<Client['getShippingMethodsForShipment']>> => {
     type Options = Argument<Client['getShippingMethodsForShipment']>
     type Data = DataType<Client['getShippingMethodsForShipment']>
-    const {shopperBaskets: client} = useCommerceApi()
+    const client = useCommerceApi(CLIENT_KEY)
     const methodName = 'getShippingMethodsForShipment'
     const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]
 
@@ -199,7 +201,7 @@ export const useTaxesFromBasket = (
 ): UseQueryResult<DataType<Client['getTaxesFromBasket']>> => {
     type Options = Argument<Client['getTaxesFromBasket']>
     type Data = DataType<Client['getTaxesFromBasket']>
-    const {shopperBaskets: client} = useCommerceApi()
+    const client = useCommerceApi(CLIENT_KEY)
     const methodName = 'getTaxesFromBasket'
     const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]