React Query default config and Query Key factory

packages/commerce-sdk-react/src/config/query-client.config.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2022, Salesforce, Inc.
+ * All rights reserved.
+ * 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 {DefaultOptions, QueryClientConfig} from '@tanstack/react-query'
+
+const defaultOptions: DefaultOptions = {
+    queries: {
+        retry: 2,
+        refetchOnMount: 'always',
+        refetchOnWindowFocus: 'always',
+        refetchOnReconnect: 'always',
+        cacheTime: Infinity, //30 seconds
+        refetchInterval: 1000 * 30, //30 seconds
+        refetchIntervalInBackground: false,
+        suspense: false,
+        staleTime: 1000 * 30
+    },
+    mutations: {
+        retry: 2
+    }
+}
+
+const defaultQueryClientConfig: QueryClientConfig = {defaultOptions}
+
+export {defaultQueryClientConfig}

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

@@ -11,6 +11,26 @@ import {UseQueryResult} from '@tanstack/react-query'
 
 type Client = ApiClients['shopperBaskets']
 
+const basketKeys = {
+    all: [{entity: 'basket'}],
+    useBasket: (arg: Record<string, unknown>) => [{...basketKeys.all[0], ...arg}],
+    usePaymentMethodsForBasket: (arg: Record<string, unknown>) => [{...basketKeys.all[0], ...arg}],
+}
+// const paymentMethodKeys = {
+//     all: [{entity: ['basket', 'paymentMethod']}],
+//     usePaymentMethodsForBasket: (arg: Record<string, unknown>) => [
+//         {...paymentMethodKeys.all[0], ...arg},
+//     ],
+// }
+
+// const queryA = ['A']
+// const queryB = ['A', 'B']
+
+// // does this work??? we need to test this
+// const queryA = [entity: ['A']]
+// const queryB = [entity: ['A', 'B']]
+// invalidate(queryA)
+
 /**
  * A hook for `ShopperBaskets#getBasket`.
  * Gets a basket.

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

@@ -11,6 +11,24 @@ import {UseQueryOptions, UseQueryResult} from '@tanstack/react-query'
 
 type Client = ApiClients['shopperProducts']
 
+const productKeys = {
+    all: [{entity: ['product']}],
+    useProducts: (arg: Record<string, unknown>) => [{...productKeys.all[0], scope: 'list', ...arg}],
+    useProduct: (arg: Record<string, unknown>) => [
+        {...productKeys.all[0], scope: 'detail', ...arg},
+    ],
+}
+
+const categoryKeys = {
+    all: [{entity: ['category']}],
+    useCategories: (arg: Record<string, unknown>) => [
+        {...categoryKeys.all[0], scope: 'list', ...arg},
+    ],
+    useCategory: (arg: Record<string, unknown>) => [
+        {...categoryKeys.all[0], scope: 'detail', ...arg},
+    ],
+}
+
 type UseProductsParameters = NonNullable<Argument<Client['getProducts']>>['parameters']
 type UseProductsHeaders = NonNullable<Argument<Client['getProducts']>>['headers']
 type UseProductsArg = {headers?: UseProductsHeaders; rawResponse?: boolean} & UseProductsParameters
@@ -39,7 +57,10 @@ function useProducts(
     const {shopperProducts: client} = useCommerceApi()
     const {headers, rawResponse, ...parameters} = arg
     return useAsync(
-        ['products', arg],
+        // Query Key needs to match "options"
+        // ['products', {headers, rawResponse, ...parameters}],
+        productKeys.useProducts(arg),
+        // Don't send "options" different from the queryKey
         () => client.getProducts({parameters, headers}, rawResponse),
         options
     )
@@ -73,7 +94,7 @@ function useProduct(
     const {headers, rawResponse, ...parameters} = arg
     const {shopperProducts: client} = useCommerceApi()
     return useAsync(
-        ['product', arg],
+        productKeys.useProduct(arg),
         () => client.getProduct({parameters, headers}, rawResponse),
         options
     )
@@ -111,7 +132,7 @@ function useCategories(
 
     const {shopperProducts: client} = useCommerceApi()
     return useAsync(
-        ['categories', arg],
+        categoryKeys.useCategories(arg),
         () => client.getCategories({parameters, headers}, rawResponse),
         options
     )
@@ -148,7 +169,7 @@ function useCategory(
 
     const {shopperProducts: client} = useCommerceApi()
     return useAsync(
-        ['category', arg],
+        categoryKeys.useCategory(arg),
         () => client.getCategory({parameters, headers}, rawResponse),
         options
     )

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

@@ -13,7 +13,9 @@ export const useAsync = <T>(
     fn: () => Promise<T>,
     queryOptions?: UseQueryOptions<T, Error>
 ) => {
-    // add more logic in here
+    // React Query uses QueryFunctionContext object to inject information about
+    // the query to the queryFn.
+    // fn will receive {queryKey} as a parameter
     return useQuery<T, Error>(queryKey, fn, queryOptions)
 }
 

packages/commerce-sdk-react/src/provider.tsx

@@ -20,6 +20,7 @@ import {
 
 import {ApiClientConfigParams, ApiClients} from './hooks/types'
 import {QueryClient, QueryClientConfig, QueryClientProvider} from '@tanstack/react-query'
+import {defaultQueryClientConfig} from './config/query-client.config'
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
 
 export interface CommerceApiProviderProps extends ApiClientConfigParams {
@@ -42,7 +43,15 @@ export const CommerceApiContext = React.createContext({} as ApiClients)
  * @returns Provider to wrap your app with
  */
 const CommerceApiProvider = (props: CommerceApiProviderProps): ReactElement => {
-    const {children, clientId, organizationId, shortCode, siteId, proxy, queryClientConfig} = props
+    const {
+        children,
+        clientId,
+        organizationId,
+        shortCode,
+        siteId,
+        proxy,
+        queryClientConfig = defaultQueryClientConfig
+    } = props
 
     // DEBUG: copy access token from browser
     const headers = {