Implement Cache Logic for Shopper APIs (Contexts/Customers/Login/Orders)

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

@@ -4,17 +4,33 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
+import {ShopperContextsTypes} from 'commerce-sdk-isomorphic'
 import {ApiClients, CacheUpdateMatrix} from '../types'
+import {getShopperContext} from './queryKeyHelpers'
 
 type Client = ApiClients['shopperContexts']
 
-/** Logs a warning to console (on startup) and returns nothing (method is unimplemented). */
-const TODO = (method: keyof Client) => {
-    console.warn(`Cache logic for '${method}' is not yet implemented.`)
-    return undefined
-}
 export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
-    updateShopperContext: TODO('updateShopperContext'),
-    createShopperContext: TODO('createShopperContext'),
-    deleteShopperContext: TODO('deleteShopperContext')
+    createShopperContext(customerId, {parameters}) {
+        return {
+            invalidate: [{queryKey: getShopperContext.queryKey(parameters)}]
+        }
+    },
+    updateShopperContext(_customerId, {parameters}, response) {
+        return {
+            update: [
+                {
+                    queryKey: getShopperContext.queryKey(parameters),
+                    updater: (): ShopperContextsTypes.ShopperContext | undefined => ({...response})
+                }
+            ]
+        }
+    },
+    deleteShopperContext(_customerId, {parameters}) {
+        return {
+            remove: [{
+                queryKey: getShopperContext.queryKey(parameters)
+            }]
+        }
+    }
 }

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

@@ -84,7 +84,13 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
             remove: [{queryKey: getCustomerPaymentInstrument.queryKey(parameters)}]
         }
     },
-    deleteCustomerProductList: TODO('deleteCustomerProductList'),
+    deleteCustomerProductList(customerId, {parameters}) {
+        return {
+            // TODO: Rather than invalidate, can we selectively update?
+            invalidate: [{queryKey: getCustomerProductLists.queryKey(parameters)}],
+            remove: [{queryKey: getCustomerProductList.queryKey(parameters)}]
+        }
+    },
     deleteCustomerProductListItem(customerId, {parameters}) {
         return {
             // TODO: Rather than invalidate, can we selectively update?
@@ -96,7 +102,6 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
         }
     },
     getResetPasswordToken: noop,
-    invalidateCustomerAuth: TODO('invalidateCustomerAuth'),
     // TODO: Should this update the `getCustomer` cache?
     registerCustomer: noop,
     // TODO: Implement when the endpoint exits closed beta.
@@ -133,7 +138,13 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
         }
     },
     updateCustomerPassword: noop,
-    updateCustomerProductList: TODO('updateCustomerProductList'),
+    updateCustomerProductList(customerId, {parameters}) {
+        return {
+            update: [{queryKey: getCustomerProductList.queryKey(parameters)}],
+            // TODO: Rather than invalidate, can we selectively update?
+            invalidate: [{queryKey: getCustomerProductLists.queryKey(parameters)}]
+        }
+    },
     updateCustomerProductListItem(customerId, {parameters}) {
         return {
             update: [{queryKey: getCustomerProductListItem.queryKey(parameters)}],

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

@@ -19,7 +19,11 @@ const TODO = (method: string): undefined => {
 
 export const cacheUpdateMatrix: CacheUpdateMatrix<ApiClients['shopperLogin']> = {
     authorizePasswordlessCustomer: noop,
-    logoutCustomer: TODO('logoutCustomer'),
+    logoutCustomer: () => {
+        return {
+            clear: true
+        }
+    },
     getAccessToken: noop,
     getSessionBridgeAccessToken: noop,
     getTrustedSystemAccessToken: noop,

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

@@ -5,16 +5,16 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import {getCustomerBaskets} from '../ShopperCustomers/queryKeyHelpers'
-import {ApiClients, CacheUpdateMatrix, CacheUpdateUpdate, CacheUpdateInvalidate} from '../types'
+import {ApiClients, Argument, CacheUpdateMatrix, CacheUpdate, CacheUpdateUpdate, CacheUpdateInvalidate, MergedOptions} from '../types'
 import {getOrder} from './queryKeyHelpers'
 
 type Client = ApiClients['shopperOrders']
+/** Parameters that get passed around, includes client config and possible parameters from other endpoints */
+type GetOrderOptions = MergedOptions<Client, Argument<Client['getOrder']>>
 
-/** Logs a warning to console (on startup) and returns nothing (method is unimplemented). */
-const TODO = (method: keyof Client) => {
-    console.warn(`Cache logic for '${method}' is not yet implemented.`)
-    return undefined
-}
+const invalidateOrderQuery = (customerId: string | null, {parameters}: GetOrderOptions): CacheUpdate => ({
+    invalidate: [{queryKey: getOrder.queryKey(parameters)}]
+})
 
 export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
     createOrder(customerId, {parameters}, response) {
@@ -31,7 +31,7 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
             : [{queryKey: getCustomerBaskets.queryKey({...parameters, customerId})}]
         return {update, invalidate}
     },
-    createPaymentInstrumentForOrder: TODO('createPaymentInstrumentForOrder'),
-    removePaymentInstrumentFromOrder: TODO('removePaymentInstrumentFromOrder'),
-    updatePaymentInstrumentForOrder: TODO('updatePaymentInstrumentForOrder')
+    createPaymentInstrumentForOrder: invalidateOrderQuery,
+    removePaymentInstrumentFromOrder: invalidateOrderQuery,
+    updatePaymentInstrumentForOrder: invalidateOrderQuery
 }

packages/commerce-sdk-react/src/hooks/types.ts

@@ -192,6 +192,7 @@ export type CacheUpdate = {
     update?: CacheUpdateUpdate<unknown>[]
     invalidate?: CacheUpdateInvalidate[]
     remove?: CacheUpdateRemove[]
+    clear?: boolean
 }
 
 /** Generates a collection of cache updates to make for a given request. */

packages/commerce-sdk-react/src/hooks/useAuthHelper.ts

@@ -4,19 +4,29 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import {MutationFunction, useMutation, UseMutationResult} from '@tanstack/react-query'
+import {MutationFunction, useMutation, UseMutationResult, useQueryClient} from '@tanstack/react-query'
 import useAuthContext from './useAuthContext'
 import Auth from '../auth'
+import {Argument, CacheUpdate} from './types'
+import {updateCache} from './utils'
 
 export const AuthHelpers = {
     LoginGuestUser: 'loginGuestUser',
     LoginRegisteredUserB2C: 'loginRegisteredUserB2C',
-    Logout: 'logout',
-    Register: 'register'
+    Logout: 'logout'
 } as const
 
 export type AuthHelper = (typeof AuthHelpers)[keyof typeof AuthHelpers]
 
+const noop = () => ({})
+
+type CacheUpdateMatrix = {
+    [Method in AuthHelper]?: (
+        options: Argument<Auth[Method]> | void,
+        response: ReturnType<Auth[Method]> extends Promise<infer D> ? D : never
+    ) => CacheUpdate
+}
+
 /**
  * A hook for Public Client OAuth helpers.
  * The hook calls the SLAS helpers imported from commerce-sdk-isomorphic.
@@ -40,13 +50,32 @@ export function useAuthHelper<Mutation extends AuthHelper>(
 > {
     const auth = useAuthContext()
     if (!auth[mutation]) throw new Error(`Unknown login helper mutation: ${mutation}`)
-
+    const queryClient = useQueryClient()
     // I'm not sure if there's a way to avoid this type assertion, but, I'm fairly confident that
     // it is safe to do, as it seems to be simply re-asserting what we already know.
     type Method = Auth[Mutation]
     type PromisedData = ReturnType<Method>
     type Data = PromisedData extends Promise<infer D> ? D : never
     type Variables = [] extends Parameters<Method> ? void : Parameters<Method>[0]
     const method = auth[mutation].bind(auth) as MutationFunction<Data, Variables>
-    return useMutation(auth.whenReady(method))
+    return useMutation(auth.whenReady(method), {
+        onSuccess(data, options) {
+            const getCacheUpdates = cacheUpdateMatrix[mutation]
+
+            if (getCacheUpdates) {
+                const cacheUpdates = getCacheUpdates(options, data)
+                updateCache(queryClient, cacheUpdates, data)
+            }
+        }
+    })
 }
+
+const cacheUpdateMatrix: CacheUpdateMatrix = {
+    loginRegisteredUserB2C: noop,
+    loginGuestUser: noop,
+    logout() {
+        return {
+            clear: true
+        }
+    }
+}

packages/commerce-sdk-react/src/hooks/utils.ts

@@ -31,6 +31,10 @@ export const updateCache = (queryClient: QueryClient, cacheUpdates: CacheUpdate,
         // If an updater isn't given, fall back to just setting the data
         queryClient.setQueryData(queryKey, updater ?? data)
     )
+
+    if (cacheUpdates.clear) {
+        queryClient.clear()
+    }
 }
 
 /** Error thrown when a method is not implemented. */

packages/test-commerce-sdk-react/app/components/Json.tsx

@@ -4,13 +4,42 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import React from 'react'
+import React, {useState} from 'react'
 
-const Json = React.memo(({data}: {data: any}) => (
-    <div>
-        <pre>{JSON.stringify(data, null, 2)}</pre>
-    </div>
-))
+const Json = ({data}: {data: any}) => {
+    const [expanded, setExpanded] = useState(false)
+
+    const style = {
+        body: {
+            position: 'relative',
+            height: expanded ? 'inherit' : '100px',
+            overflow: 'hidden'
+        },
+        button: {
+            position: 'absolute',
+            right: 0,
+            paddingRight: 10
+        },
+        shadow: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            width: '100%',
+            height: 10,
+            background:
+                'linear-gradient(to bottom, rgba(137,255,241,0) 0%,rgba(255,255,255,1) 100%)'
+        }
+    }
+    return (
+        <div style={style.body}>
+            <a style={style.button} onClick={() => setExpanded(!expanded)}>
+                {expanded ? '[-]' : '[+]'}
+            </a>
+            <pre>{JSON.stringify(data, null, 2)}</pre>
+            {!expanded && <div style={style.shadow} />}
+        </div>
+    )
+}
 
 Json.displayName = 'Json'
 

packages/test-commerce-sdk-react/app/pages/home.tsx

@@ -54,6 +54,9 @@ const Home = () => {
                 <li>
                     <Link to="/orders">useShopperOrders & useShopperOrdersMutation</Link>
                 </li>
+                <li>
+                    <Link to="/context">useShopperContext & useShopperContextsMutation</Link>
+                </li>
             </ul>
 
             <h2>Miscellaneous</h2>