From 42a835c3b86b1aaa96aaf3df74bc1e5a8dd62a14 Mon Sep 17 00:00:00 2001 From: Carlo Carels Date: Thu, 12 Oct 2023 11:02:08 +0200 Subject: [PATCH 1/4] =?UTF-8?q?Use=20'cache-first=E2=80=99=20fetch=20mode?= =?UTF-8?q?=20for=20getting=20'total=5Fquantity'=20data=20(GCOM-1241)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We need to create a cache entry to read it on the next reload. This change helps us store the 'total_quantity' data in cache, so we can read it again when needed. Now, when a guest adds products to their cart and refreshes the page, the cart will still show what's in it. It won't be empty. --- packages/magento-cart/components/CartFab/CartFab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/magento-cart/components/CartFab/CartFab.tsx b/packages/magento-cart/components/CartFab/CartFab.tsx index 72066c41cb..ad84126030 100644 --- a/packages/magento-cart/components/CartFab/CartFab.tsx +++ b/packages/magento-cart/components/CartFab/CartFab.tsx @@ -111,7 +111,7 @@ function CartFabContent(props: CartFabContentProps) { */ export function CartFab(props: CartFabProps) { const cartQuery = useCartQuery(CartFabDocument, { - fetchPolicy: 'cache-only', + fetchPolicy: 'cache-first', nextFetchPolicy: 'cache-first', }) From 4b6bbf06572c71e266cc2407e4533833712898e2 Mon Sep 17 00:00:00 2001 From: Carlo Carels Date: Thu, 12 Oct 2023 11:04:32 +0200 Subject: [PATCH 2/4] chore: add changeset --- .changeset/lazy-seahorses-rhyme.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lazy-seahorses-rhyme.md diff --git a/.changeset/lazy-seahorses-rhyme.md b/.changeset/lazy-seahorses-rhyme.md new file mode 100644 index 0000000000..bb3b849879 --- /dev/null +++ b/.changeset/lazy-seahorses-rhyme.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/magento-cart': patch +--- + +Use 'cache-first' fetch mode for getting 'total_quantity' data. From 42c4c180285d195b55fc7ddc5f8dbde31347116c Mon Sep 17 00:00:00 2001 From: Carlo Carels Date: Tue, 24 Oct 2023 14:35:17 +0200 Subject: [PATCH 3/4] When a new cart is created also write the CartFabDocument query with an empty value so that the local storage is correctly populated --- .../components/CartFab/CartFab.graphql | 1 + .../magento-cart/components/CartFab/CartFab.tsx | 15 +-------------- packages/magento-cart/typePolicies.ts | 15 +++++++++++++++ 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/magento-cart/components/CartFab/CartFab.graphql b/packages/magento-cart/components/CartFab/CartFab.graphql index 8047946b2d..af9a17806c 100644 --- a/packages/magento-cart/components/CartFab/CartFab.graphql +++ b/packages/magento-cart/components/CartFab/CartFab.graphql @@ -1,5 +1,6 @@ query CartFab($cartId: String!) { cart(cart_id: $cartId) { + __typename id ...CartTotalQuantity } diff --git a/packages/magento-cart/components/CartFab/CartFab.tsx b/packages/magento-cart/components/CartFab/CartFab.tsx index ad84126030..8cb5ded72f 100644 --- a/packages/magento-cart/components/CartFab/CartFab.tsx +++ b/packages/magento-cart/components/CartFab/CartFab.tsx @@ -99,21 +99,8 @@ function CartFabContent(props: CartFabContentProps) { ) } -/** - * We give CartFab a bit of special handling. We don't want to make requests for this component - * whilly nilly. We've imposed some limitations: - * - * We use useCartQuery that means that this will only execute when there is a cartId. - * - * We use fetchPolicy 'cache-only' so that when the cart comes into existence it will not - * immediately start fetching. Why? There is a time between creating a cart and adding the first - * product to the cart. This would mean that it would immediately start executing this query. - */ export function CartFab(props: CartFabProps) { - const cartQuery = useCartQuery(CartFabDocument, { - fetchPolicy: 'cache-first', - nextFetchPolicy: 'cache-first', - }) + const cartQuery = useCartQuery(CartFabDocument) return ( }> diff --git a/packages/magento-cart/typePolicies.ts b/packages/magento-cart/typePolicies.ts index c2f62aff46..67e108f9fd 100644 --- a/packages/magento-cart/typePolicies.ts +++ b/packages/magento-cart/typePolicies.ts @@ -35,6 +35,21 @@ export const cartTypePolicies: StrictTypedTypePolicies = { toReference({ __typename: 'Cart', id: (args as QuerycartArgs)?.cart_id }), }, }, + + Mutation: { + fields: { + createEmptyCart: { + merge: (_, incoming: string, options) => { + options.cache.writeQuery({ + query: CartFabDocument, + variables: { cartId: incoming }, + data: { cart: { __typename: 'Cart', id: incoming, total_quantity: 0 } }, + }) + return incoming + }, + }, + }, + }, } export const migrateCart = ( From d4aee37654099c091648fa77395c4f77f0d36503 Mon Sep 17 00:00:00 2001 From: Carlo Carels Date: Tue, 24 Oct 2023 14:36:44 +0200 Subject: [PATCH 4/4] Changeset: The CartFab wouldn't reflect that there are items in the cart when a customer refreshes the page after adding a product to the cart, without viewing the cart. --- .changeset/lazy-seahorses-rhyme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/lazy-seahorses-rhyme.md b/.changeset/lazy-seahorses-rhyme.md index bb3b849879..6e862d10d5 100644 --- a/.changeset/lazy-seahorses-rhyme.md +++ b/.changeset/lazy-seahorses-rhyme.md @@ -2,4 +2,4 @@ '@graphcommerce/magento-cart': patch --- -Use 'cache-first' fetch mode for getting 'total_quantity' data. +The CartFab wouldn't reflect that there are items in the cart when a customer refreshes the page after adding a product to the cart, without viewing the cart.