Merge pull request #2089 from graphcommerce-org/fix/GCOM-1241

Use 'cache-first' fetch mode for getting 'total_quantity' data (GCOM-1241)

.changeset/lazy-seahorses-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cart': patch
+---
+
+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.

packages/magento-cart/components/CartFab/CartFab.graphql

@@ -1,5 +1,6 @@
 query CartFab($cartId: String!) {
   cart(cart_id: $cartId) {
+    __typename
     id
     ...CartTotalQuantity
   }

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-only',
-    nextFetchPolicy: 'cache-first',
-  })
+  const cartQuery = useCartQuery(CartFabDocument)
 
   return (
     <WaitForQueries waitFor={cartQuery} fallback={<CartFabContent {...props} total_quantity={0} />}>

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 = (