[V3][Hooks Integration 🪝] Manually update cache for ShopperCustomer #1113

bendvc · 2023-04-05T23:42:29Z

Description

In this PR we leverage the ability to proactively update cache without having to invalidate and refetch what we already have. For example, when we create and post a new customer address, we are returned the customer object with the new address assigned to it. Instead of invalidating the current cache for the customer, which would in turn cause a fetch to get new data, we can take the updated customer and update the cache client side.

We do this throughout the ShopperCustomer endpoints, below is a list of when we manually update cache:

Create/Update/Delete CustomerAddresses
Create/Update/Delete ProductLists
Create/Update/Delete ProductListItems
Create/Update/Delete CustomerPaymentInstruments
Update Customer

NOTES

I added a new lib called clone as to not mutate the values passed to updater methods. They might have observers attached to them.
Right now I am bailing when there is no cache item to be updated, for example if you add an address to a known customer and you have no previously loaded said customer the "oldData" value for the customer updater would be undefined. Since the response has the full customer, we can proactively update the cache with the its first value. I'm working on this.
~~I'm working on DRY-ing up the code, right there is a lot of duplication.~~

Clone 3PP ✅

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

Update cache matrix for shopper customer
Update and add missing tests

How to Test-Drive This PR

Run tests in commerce-sdk-react

Checklists

General

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

…SalesforceCommerceCloud/pwa-kit into shopper-customers-cache-updates

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

bendvc · 2023-04-06T22:09:51Z

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

+ * @param update 
+ * @returns 
+ */
+const createUpdateFunction =


Open to feedback on these types and this function generator @wjhsf

wjhsf

There's a lot of repeated patterns, so most of my comments apply to multiple places. But I've only left them once.

wjhsf · 2023-04-06T16:03:31Z

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

-            {queryKey: getCustomerProductLists.queryKey(parameters)}
-        ]
-        // We can only update cache for this product list item if we have the ID
+        // QUESTION: Why would we get a response that doesn't have an ID?


The RAML spec does not guarantee that it will be present. You'll have to ask the API team about that.

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

…SalesforceCommerceCloud/pwa-kit into shopper-customers-cache-updates

packages/commerce-sdk-react/package-lock.json

wjhsf · 2023-04-10T20:12:47Z

packages/commerce-sdk-react/tsconfig.json

@@ -12,7 +12,7 @@

        /* Language and Environment */
        "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-        // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+        "lib": ["dom", "es2019"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */


If we have target: es2016, should we also use the es2016 lib, so that we only use available features? Or are we fine with the compiler inserting things that we need?

From what I read there is a kind of chaining that would be happening es2019 uses es2018 and it goes down the line. Anyway. I needed to add this to get the deep clone implementation working using the entries method. In general I'm not 100% sure if the solution is 100% correct. But it works as is, so maybe revisit it as needed.

I'm fairly confident that this is fine from a "code that compiles and runs" standpoint. The thing I'm not sure about is how the es2019 code gets changed to es2016 code, particularly the impact on bundle size. Might be worth investigating as a separate ticket. (Outcome would probably either be "this is fine" or "don't use modern code so we don't add polyfill bloat".)

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

wjhsf · 2023-04-11T16:14:21Z

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

        const itemId = response.id
-        if (!itemId) return {invalidate}
+
        return {
-            invalidate,
-            update: [{queryKey: getCustomerProductListItem.queryKey({...parameters, itemId})}]
+            update: [
+                {
+                    queryKey: getCustomerProductListItem.queryKey({...parameters, itemId})


According to the RAML spec, we could get a response with no id, meaning this update could potentially be storing data in the cache that we never actually retrieve (itemId: undefined).

In practice, though, I don't know when we'd ever not receive an id.

* v3: [Spike]Replace watch with nodemon (#1146) Fix Page Designer ImageWithText Link component (#1092) (#1148) Upgrade deprecated dependencies (#1124) Restart login flow if refresh_token is invalid (#1135) Move some util to site-utils to avoid circular imports (#1133) Restore old file name. (#1140) Update eslint configuration (#1129) CI: clarify the environment variables (#1127) Remove react-query-devtools from production build (#1121) Update lerna.json (#1118) Parallelize lighthouse ci (#1126) Increase test timeouts only on CI env (#1123) Remove unused `request` deprecated dependency. (#1125) Upgrade msw to latest (#1100) Add mergeBasket hook (#1114) [V3][Hooks Integration 🪝] Manually update cache for ShopperCustomer (#1113) dont use callback on mutateAsync (#1119) 2-spaces not 4-spaces (#1117) # Conflicts: # packages/internal-lib-build/package-lock.json # packages/pwa-kit-create-app/package-lock.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-dev/package.json # packages/pwa-kit-dev/src/configs/webpack/config.js # packages/pwa-kit-dev/src/ssr/server/build-dev-server.js # packages/pwa-kit-react-sdk/package-lock.json # packages/pwa-kit-runtime/package-lock.json # packages/template-express-minimal/package-lock.json # packages/template-mrt-reference-app/package-lock.json # packages/template-retail-react-app/package-lock.json # packages/template-typescript-minimal/package-lock.json # packages/test-commerce-sdk-react/package-lock.json

…-rehaul * feature/template-extensibility: [Spike]Replace watch with nodemon (#1146) Fix Page Designer ImageWithText Link component (#1092) (#1148) Upgrade deprecated dependencies (#1124) Restart login flow if refresh_token is invalid (#1135) Move some util to site-utils to avoid circular imports (#1133) Restore old file name. (#1140) Update eslint configuration (#1129) CI: clarify the environment variables (#1127) Remove react-query-devtools from production build (#1121) Update lerna.json (#1118) Parallelize lighthouse ci (#1126) Increase test timeouts only on CI env (#1123) Remove unused `request` deprecated dependency. (#1125) Upgrade msw to latest (#1100) Add mergeBasket hook (#1114) [V3][Hooks Integration 🪝] Manually update cache for ShopperCustomer (#1113) dont use callback on mutateAsync (#1119) 2-spaces not 4-spaces (#1117) # Conflicts: # packages/internal-lib-build/package-lock.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-react-sdk/package-lock.json # packages/pwa-kit-runtime/package-lock.json # packages/pwa-kit-runtime/package.json

bendvc and others added 9 commits April 3, 2023 14:58

Add manual cache updates for customer addresses

15436c7

Cache updates for ProductListItems calls

cc1ff1e

Rest of cache implementations

261af72

Update and add missing test

7f0d951

Merge branch 'v3' into shopper-customers-cache-updates

65dbd9a

Dry up the code

7ca7498

Merge branch 'shopper-customers-cache-updates' of https://github.com/…

b0740b0

…SalesforceCommerceCloud/pwa-kit into shopper-customers-cache-updates

Merge branch 'v3' into shopper-customers-cache-updates

a2ab75f

Relock package-lock.json

53e2959

bendvc marked this pull request as ready for review April 6, 2023 22:07

bendvc requested a review from a team as a code owner April 6, 2023 22:07

bendvc commented Apr 6, 2023

View reviewed changes

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts Show resolved Hide resolved

bendvc commented Apr 6, 2023

View reviewed changes

bendvc requested review from kevinxh and wjhsf April 6, 2023 22:10

Lint

99fc644

wjhsf reviewed Apr 7, 2023

View reviewed changes

bendvc and others added 9 commits April 10, 2023 09:19

Update packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

dac7077

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

Update packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

9d2cbf1

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

PR feedback

5d0bd2e

Update packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

85c15f9

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

Update packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

4d3177d

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

Merge branch 'shopper-customers-cache-updates' of https://github.com/…

20835e9

…SalesforceCommerceCloud/pwa-kit into shopper-customers-cache-updates

PR feedback

1df1116

PR feedback

5a1e942

Re-create lock file

16ed880

wjhsf reviewed Apr 10, 2023

View reviewed changes

bendvc and others added 2 commits April 10, 2023 14:47

PR feedback

2bad67a

Update packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

25cf92e

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

kevinxh reviewed Apr 10, 2023

View reviewed changes

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts Outdated Show resolved Hide resolved

kevinxh reviewed Apr 10, 2023

View reviewed changes

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts Outdated Show resolved Hide resolved

Fix optional chaining on known defined objects.

a05ffe2

kevinxh previously approved these changes Apr 10, 2023

View reviewed changes

Consistency on type checking

a4266e8

bendvc dismissed kevinxh’s stale review via a4266e8 April 10, 2023 22:32

bendvc and others added 2 commits April 10, 2023 16:23

Update cache.ts

9847b2e

Merge branch 'v3' into shopper-customers-cache-updates

6ee07fe

kevinxh approved these changes Apr 11, 2023

View reviewed changes

wjhsf approved these changes Apr 11, 2023

View reviewed changes

bendvc merged commit 056b669 into v3 Apr 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[V3][Hooks Integration 🪝] Manually update cache for ShopperCustomer #1113

[V3][Hooks Integration 🪝] Manually update cache for ShopperCustomer #1113

bendvc commented Apr 5, 2023 •

edited

Loading

bendvc Apr 6, 2023

wjhsf left a comment

wjhsf Apr 6, 2023

wjhsf Apr 10, 2023

bendvc Apr 10, 2023 •

edited

Loading

wjhsf Apr 10, 2023

wjhsf Apr 11, 2023

[V3][Hooks Integration 🪝] Manually update cache for ShopperCustomer #1113

[V3][Hooks Integration 🪝] Manually update cache for ShopperCustomer #1113

Conversation

bendvc commented Apr 5, 2023 • edited Loading

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

bendvc Apr 6, 2023

Choose a reason for hiding this comment

wjhsf left a comment

Choose a reason for hiding this comment

wjhsf Apr 6, 2023

Choose a reason for hiding this comment

wjhsf Apr 10, 2023

Choose a reason for hiding this comment

bendvc Apr 10, 2023 • edited Loading

Choose a reason for hiding this comment

wjhsf Apr 10, 2023

Choose a reason for hiding this comment

wjhsf Apr 11, 2023

Choose a reason for hiding this comment

bendvc commented Apr 5, 2023 •

edited

Loading

bendvc Apr 10, 2023 •

edited

Loading