[commerce-sdk-react] Consume parameter keys (@W-15676839@) (#1823)

* Try consuming parameter keys from isomorphic lib

* Update paramKeys.ts

* Revert "Update paramKeys.ts"

This reverts commit 5fde81c.

* Update paramKeys.ts

* Start deleting paramKeys.ts files

* Add a util method pickValidParams

* Some refactoring to use pickValidParams

* Test pickValidParams

* Further refactoring to use pickValidParams

* Remove todo

* Update version of the isomorphic lib

* Refactor ShopperContexts

* Simplify code a bit

* Refactor ShopperCustomers

* Refactor ShopperExperience

* Refactor ShopperGiftCertificates

* Refactor ShopperLogin

* Refactor ShopperOrders

* Refactor ShopperPromotions

* Refactor ShopperSearch

* Refactor ShopperSeo

* Refactor ShopperStores

packages/commerce-sdk-react/package.json

@@ -40,7 +40,7 @@
     "version": "node ./scripts/version.js"
   },
   "dependencies": {
-    "commerce-sdk-isomorphic": "^2.0.0",
+    "commerce-sdk-isomorphic": "^2.1.0-dev.0",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^4.0.0"
   },

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

@@ -8,9 +8,9 @@ import {UseQueryResult} from '@tanstack/react-query'
 import {ApiClients, ApiQueryOptions, Argument, DataType, NullableParameters} from '../types'
 import useCommerceApi from '../useCommerceApi'
 import {useQuery} from '../useQuery'
-import {getCustomKeys, mergeOptions, omitNullableParameters, pick} from '../utils'
+import {mergeOptions, omitNullableParameters, pickValidParams} from '../utils'
 import * as queryKeyHelpers from './queryKeyHelpers'
-import paramKeysMap from './paramKeys'
+import {ShopperBaskets} from 'commerce-sdk-isomorphic'
 
 type Client = ApiClients['shopperBaskets']
 
@@ -33,14 +33,12 @@ export const useBasket = (
     type Data = DataType<Client['getBasket']>
     const {shopperBaskets: client} = useCommerceApi()
     const methodName = 'getBasket'
-    const requiredParameters = ['organizationId', 'basketId', 'siteId'] as const
+    const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]
 
     // Parameters can be set in `apiOptions` or `client.clientConfig`;
     // we must merge them in order to generate the correct query key.
     const netOptions = omitNullableParameters(mergeOptions(client, apiOptions))
-    // get param keys for the api from netOptions
-    const paramKeys = [...paramKeysMap[methodName], ...getCustomKeys(netOptions.parameters)]
-    const parameters = pick(netOptions.parameters, paramKeys)
+    const parameters = pickValidParams(netOptions.parameters, ShopperBaskets.paramKeys[methodName])
     const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters)
     // We don't use `netOptions` here because we manipulate the options in `useQuery`.
     const method = async (options: Options) => await client[methodName](options)
@@ -72,14 +70,12 @@ export const usePaymentMethodsForBasket = (
     type Data = DataType<Client['getPaymentMethodsForBasket']>
     const {shopperBaskets: client} = useCommerceApi()
     const methodName = 'getPaymentMethodsForBasket'
-    const requiredParameters = ['organizationId', 'basketId', 'siteId'] as const
+    const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]
 
     // Parameters can be set in `apiOptions` or `client.clientConfig`;
     // we must merge them in order to generate the correct query key.
     const netOptions = omitNullableParameters(mergeOptions(client, apiOptions))
-    // get param keys for the api from netOptions
-    const paramKeys = [...paramKeysMap[methodName], ...getCustomKeys(netOptions.parameters)]
-    const parameters = pick(netOptions.parameters, paramKeys)
+    const parameters = pickValidParams(netOptions.parameters, ShopperBaskets.paramKeys[methodName])
     const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters)
     // We don't use `netOptions` here because we manipulate the options in `useQuery`.
     const method = async (options: Options) => await client[methodName](options)
@@ -111,14 +107,12 @@ export const usePriceBooksForBasket = (
     type Data = DataType<Client['getPriceBooksForBasket']>
     const {shopperBaskets: client} = useCommerceApi()
     const methodName = 'getPriceBooksForBasket'
-    const requiredParameters = ['organizationId', 'basketId', 'siteId'] as const
+    const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]
 
     // Parameters can be set in `apiOptions` or `client.clientConfig`;
     // we must merge them in order to generate the correct query key.
     const netOptions = omitNullableParameters(mergeOptions(client, apiOptions))
-    // get param keys for the api from netOptions
-    const paramKeys = [...paramKeysMap[methodName], ...getCustomKeys(netOptions.parameters)]
-    const parameters = pick(netOptions.parameters, paramKeys)
+    const parameters = pickValidParams(netOptions.parameters, ShopperBaskets.paramKeys[methodName])
     const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters)
     // We don't use `netOptions` here because we manipulate the options in `useQuery`.
     const method = async (options: Options) => await client[methodName](options)
@@ -150,14 +144,12 @@ export const useShippingMethodsForShipment = (
     type Data = DataType<Client['getShippingMethodsForShipment']>
     const {shopperBaskets: client} = useCommerceApi()
     const methodName = 'getShippingMethodsForShipment'
-    const requiredParameters = ['organizationId', 'basketId', 'shipmentId', 'siteId'] as const
+    const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]
 
     // Parameters can be set in `apiOptions` or `client.clientConfig`;
     // we must merge them in order to generate the correct query key.
     const netOptions = omitNullableParameters(mergeOptions(client, apiOptions))
-    // get param keys for the api from netOptions
-    const paramKeys = [...paramKeysMap[methodName], ...getCustomKeys(netOptions.parameters)]
-    const parameters = pick(netOptions.parameters, paramKeys)
+    const parameters = pickValidParams(netOptions.parameters, ShopperBaskets.paramKeys[methodName])
     const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters)
     // We don't use `netOptions` here because we manipulate the options in `useQuery`.
     const method = async (options: Options) => await client[methodName](options)
@@ -189,14 +181,12 @@ export const useTaxesFromBasket = (
     type Data = DataType<Client['getTaxesFromBasket']>
     const {shopperBaskets: client} = useCommerceApi()
     const methodName = 'getTaxesFromBasket'
-    const requiredParameters = ['organizationId', 'basketId', 'siteId'] as const
+    const requiredParameters = ShopperBaskets.paramKeys[`${methodName}Required`]
 
     // Parameters can be set in `apiOptions` or `client.clientConfig`;
     // we must merge them in order to generate the correct query key.
     const netOptions = omitNullableParameters(mergeOptions(client, apiOptions))
-    // get param keys for the api from netOptions
-    const paramKeys = [...paramKeysMap[methodName], ...getCustomKeys(netOptions.parameters)]
-    const parameters = pick(netOptions.parameters, paramKeys)
+    const parameters = pickValidParams(netOptions.parameters, ShopperBaskets.paramKeys[methodName])
     const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters)
     // We don't use `netOptions` here because we manipulate the options in `useQuery`.
     const method = async (options: Options) => await client[methodName](options)

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

@@ -4,10 +4,9 @@
  * 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 type {ShopperBaskets} from 'commerce-sdk-isomorphic'
+import {ShopperBaskets} from 'commerce-sdk-isomorphic'
 import {Argument, ExcludeTail} from '../types'
-import {getCustomKeys, pick} from '../utils'
-import paramKeysMap from '../ShopperBaskets/paramKeys'
+import {pickValidParams} from '../utils'
 
 // We must use a client with no parameters in order to have required/optional match the API spec
 type Client = ShopperBaskets<{shortCode: string}>
@@ -79,8 +78,10 @@ export const getBasket: QueryKeyHelper<'getBasket'> = {
         params.basketId
     ],
     queryKey: (params: Params<'getBasket'>) => {
-        const paramKeys = [...paramKeysMap['getBasket'], ...getCustomKeys(params)]
-        return [...getBasket.path(params), pick(params, paramKeys)]
+        return [
+            ...getBasket.path(params),
+            pickValidParams(params, ShopperBaskets.paramKeys.getBasket)
+        ]
     }
 }
 
@@ -94,8 +95,10 @@ export const getPaymentMethodsForBasket: QueryKeyHelper<'getPaymentMethodsForBas
         '/payment-methods'
     ],
     queryKey: (params: Params<'getPaymentMethodsForBasket'>) => {
-        const paramKeys = [...paramKeysMap['getPaymentMethodsForBasket'], ...getCustomKeys(params)]
-        return [...getPaymentMethodsForBasket.path(params), pick(params, paramKeys)]
+        return [
+            ...getPaymentMethodsForBasket.path(params),
+            pickValidParams(params, ShopperBaskets.paramKeys.getPaymentMethodsForBasket)
+        ]
     }
 }
 
@@ -109,9 +112,10 @@ export const getPriceBooksForBasket: QueryKeyHelper<'getPriceBooksForBasket'> =
         '/price-books'
     ],
     queryKey: (params: Params<'getPriceBooksForBasket'>) => {
-        const paramKeys = [...paramKeysMap['getPriceBooksForBasket'], ...getCustomKeys(params)]
-
-        return [...getPriceBooksForBasket.path(params), pick(params, paramKeys)]
+        return [
+            ...getPriceBooksForBasket.path(params),
+            pickValidParams(params, ShopperBaskets.paramKeys.getPriceBooksForBasket)
+        ]
     }
 }
 
@@ -127,12 +131,10 @@ export const getShippingMethodsForShipment: QueryKeyHelper<'getShippingMethodsFo
         '/shipping-methods'
     ],
     queryKey: (params: Params<'getShippingMethodsForShipment'>) => {
-        const paramKeys = [
-            ...paramKeysMap['getShippingMethodsForShipment'],
-            ...getCustomKeys(params)
+        return [
+            ...getShippingMethodsForShipment.path(params),
+            pickValidParams(params, ShopperBaskets.paramKeys.getShippingMethodsForShipment)
         ]
-
-        return [...getShippingMethodsForShipment.path(params), pick(params, paramKeys)]
     }
 }
 
@@ -146,7 +148,9 @@ export const getTaxesFromBasket: QueryKeyHelper<'getTaxesFromBasket'> = {
         '/taxes'
     ],
     queryKey: (params: Params<'getTaxesFromBasket'>) => {
-        const paramKeys = [...paramKeysMap['getTaxesFromBasket'], ...getCustomKeys(params)]
-        return [...getTaxesFromBasket.path(params), pick(params, paramKeys)]
+        return [
+            ...getTaxesFromBasket.path(params),
+            pickValidParams(params, ShopperBaskets.paramKeys.getTaxesFromBasket)
+        ]
     }
 }

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

@@ -8,9 +8,9 @@ import {UseQueryResult} from '@tanstack/react-query'
 import {ApiClients, ApiQueryOptions, Argument, DataType, NullableParameters} from '../types'
 import useCommerceApi from '../useCommerceApi'
 import {useQuery} from '../useQuery'
-import {getCustomKeys, mergeOptions, omitNullableParameters, pick} from '../utils'
+import {mergeOptions, omitNullableParameters, pickValidParams} from '../utils'
 import * as queryKeyHelpers from './queryKeyHelpers'
-import paramKeysMap from './paramKeys'
+import {ShopperContexts} from 'commerce-sdk-isomorphic'
 
 type Client = ApiClients['shopperContexts']
 
@@ -33,15 +33,13 @@ export const useShopperContext = (
     type Data = DataType<Client['getShopperContext']>
     const {shopperContexts: client} = useCommerceApi()
     const methodName = 'getShopperContext'
-    const requiredParameters = ['organizationId', 'usid'] as const
+    const requiredParameters = ShopperContexts.paramKeys[`${methodName}Required`]
 
     // Parameters can be set in `apiOptions` or `client.clientConfig`;
     // we must merge them in order to generate the correct query key.
     const netOptions = omitNullableParameters(mergeOptions(client, apiOptions))
 
-    // get param keys for the api from netOptions
-    const paramKeys = [...paramKeysMap[methodName], ...getCustomKeys(netOptions.parameters)]
-    const parameters = pick(netOptions.parameters, paramKeys)
+    const parameters = pickValidParams(netOptions.parameters, ShopperContexts.paramKeys[methodName])
     const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters)
     // We don't use `netOptions` here because we manipulate the options in `useQuery`.
     const method = async (options: Options) => await client[methodName](options)

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

@@ -4,10 +4,9 @@
  * 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 type {ShopperContexts} from 'commerce-sdk-isomorphic'
+import {ShopperContexts} from 'commerce-sdk-isomorphic'
 import {Argument, ExcludeTail} from '../types'
-import {getCustomKeys, pick} from '../utils'
-import paramKeysMap from './paramKeys'
+import {pickValidParams} from '../utils'
 // We must use a client with no parameters in order to have required/optional match the API spec
 type Client = ShopperContexts<{shortCode: string}>
 type Params<T extends keyof QueryKeys> = Partial<Argument<Client[T]>['parameters']>
@@ -40,7 +39,9 @@ export const getShopperContext: QueryKeyHelper<'getShopperContext'> = {
         params.usid
     ],
     queryKey: (params: Params<'getShopperContext'>) => {
-        const paramKeys = [...paramKeysMap['getShopperContext'], ...getCustomKeys(params)]
-        return [...getShopperContext.path(params), pick(params, paramKeys)]
+        return [
+            ...getShopperContext.path(params),
+            pickValidParams(params, ShopperContexts.paramKeys.getShopperContext)
+        ]
     }
 }