Allow query hook parameters to be null.

[wjhsf]

When the app is initializing, some values (e.g. customerId) can be unset. React doesn't allow conditionally calling hooks. Therefore, we must support an explicit "unset" value for parameters. As it is not otherwise used by the Commerce API or isomorphic SDK, null is a natural choice for the fallback value.

Description

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

• Use a hook. Pass null as a value. Observe that TypeScript does not complain, and the hook is not executed.

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)

[wjhsf]

Don't you love when you have a couple of changed lines, and then you repeat that 50x over in 20 different files?

[wjhsf]

React query allows undefined as a query key, but converts it to null when comparing query hashes (essentially converting the query key to a JSON string). I don't think that this matters, I think it's an internal implementation detail, and we can use undefined just fine, but maybe I'm wrong.

[kevinxh]

Don't you love when you have a couple of changed lines, and then you repeat that 50x over in 20 different files?

we might need to start thinking about the fancy code generator from commerce-sdk-isomorphic...

[kevinxh]

Does it make sense to have a test case query is disabled when required parameters are null?

[wjhsf]

Don't you love when you have a couple of changed lines, and then you repeat that 50x over in 20 different files?

we might need to start thinking about the fancy code generator from commerce-sdk-isomorphic...

Something like this? I've been using it all along!

[wjhsf]

Does it make sense to have a test case query is disabled when required parameters are null?

Probably. There's a lot more testing that should be added around endpoint hook edge cases, useQuery, useMutation, and just about all the utils.

[kevinxh]

Great job!

[yunakim714]

Hey @wjhsf , just for my own learning, can you explain what -? means?

[wjhsf]

It marks each property as required.

type Identity<T> = { [K in keyof T]: T[K] } // preserves required/optional on each property
type Required<T> = { [K in keyof T]-?: T[K] } // all properties are required
type Optional<T> = { [K in keyof T]?: T[K] } // all properties are optional
//   ^^^ The built-in type that does this is Partial<T>, rather than Optional<T> ¯\_(ツ)_/¯

More info: TypeScript docs for mapping modifiers in mapped types.