React Query default config and Query Key factory

[adamraya]

Description

The PR implements the initial React Query cache state optimizations in commerce-sdk-react:

• Adjust default queryClient configuration values.
• Define the Query Key pattern to use in all queries using the Query Key factory pattern. Introducing the usage of the 'entity' and 'scope: list | detail' concepts inside the Query Key.
• Optimistic updates by seeding future scope: 'detail' queries when executing scope: 'list' queries.
• TODO: Invalidate queries in the cache after executing mutation queries.

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

• (step1)

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)

[vmarta]

What's the reason for having the query key to be structured as an array of 1 item (which is an object)?

According to the official doc, it's possible to mix and match the array's content. For example, it can be like:
['product', 'list', {...arg}]

[vmarta]

If we use a multiple-items array as the query key, we can easily invalidate the queries granularly like this:

queryClient.invalidateQueries(['product']) // will invalidate both `useProduct` and `useProducts`
queryClient.invalidateQueries(['product', 'list']) // will invalidate only `useProducts`

[adamraya]

The reason comes from a TkDodo's blog post: https://tkdodo.eu/blog/leveraging-the-query-function-context#object-query-keys

The author proposes to define all keys as an array with exactly one object.

The object inside the key contains the query data returned and some high-level strings we use to define the 'entity' and 'scope' ideas.

Using an object we don't need o to worry about the specific position of a particular key in the array. Instead, we can obtain the value of a particular key by using the object name destructuring.

And we can still use fuzzy matching query keys when we need to invalidate related queries during mutations.

[vmarta]

Perhaps we can make a factory function that allows us to easily generate productKeys and categoryKeys. And calling it would be like this:

const categoryKeys = createQueryKeys('category', {useCategories: 'list', useCategory: 'detail'})
const productKeys = createQueryKeys('product', {useProducts: 'list', useProduct: 'detail'})

[adamraya]

I think this is the idea of the new NPM package @lukemorales/query-key-factory recently linked from the React Query docs: https://tanstack.com/query/v4/docs/guides/query-keys

I've been testing the package, but so far I see the package is not compatible with the idea mentioned in the previous comment of defining all keys as an array with exactly one object.