W-14867867 Fix invalid query params warnings and allow custom query

[alexvuong]

Description

With the change from isomorphic that allow passing custom query (c_${string}). We'd want the commerce-react-sdk also adopt the changes. Commerce-react-sdk hooks will automatically accept any custom query key since we reuse type from isomorphic. However, we need to adjust our hooks to allow custom query key in react-query

This PR

1. Fixes invalid params warnings seen on the retail react app. This is partially because commerce-react-sdk passes in invalid params from client config into isomorphic funcs
2. Allow custom query key to be present in query key in react query cache

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• (change1)

How to Test-Drive This PR

• Check out code
• npm ci
• Run retail app
• Observe there is not more invalid params warning in the console from any page
• add custom query in any hook calls. E.g product-detail page

const {
        data: product,
        isLoading: isProductLoading,
        isError: isProductError,
        error: productError
    } = useProduct(
        {
            parameters: {
                id: urlParams.get('pid') || productId,
                allImages: true,
                c_customQuery: [true, false] => add it here
            }
        },
        {
            // When shoppers select a different variant (and the app fetches the new data),
            // the old data is still rendered (and not the skeletons).
            keepPreviousData: true
        }
    )

• Check the api calls, and see that custom query is present in payload. e.g

• Check that custom query params is also present in react query cache. e.g
  

• Add an custom query that does not start with c_. You should see a warning in the console. E.g

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[johnboxall]

What happens if an API we call into adds support for a new query param?

For example, in 24.3, Product Search will add support for perPricebook, allImages and allVariationProperties. Will we need to modify commerce-sdk-react to allow folks to pass these params?

[alexvuong]

What happens if an API we call into adds support for a new query param?

For example, in 24.3, Product Search will add support for perPricebook, allImages and allVariationProperties. Will we need to modify commerce-sdk-react to allow folks to pass these params?

API call-wise, new query param will get passed into the API call if isomorphic accepts those params since comemrce-react-sdk just passed those params into isomorphic functions for SCAPI calls.

However, for caching mechanism, we still need to adjust the queryKey to have new query param since we are manually passing in the params for each hook like what is being done in this PR for c_xx query See here

[joeluong-sfcc]

Confirmed manually that Invalid Parameter warnings no longer appear and that passing a custom query parameter like c_param in a SCAPI call in template-retail-react-app can be seen as part of the SCAPI request using dev tools

Also, once you get this merged in, please close #1453 🙏

[bendvc]

For the most part everything looks good. But I think there is one thing to change to make this just right. See the comment here.