@graphcommerce/magento-cart 4.6.0 → 4.6.3

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Change Log
 
+## 4.6.3
+
+### Patch Changes
+
+- [#1570](https://github.com/graphcommerce-org/graphcommerce/pull/1570) [`d92780d5c`](https://github.com/graphcommerce-org/graphcommerce/commit/d92780d5c3bb80b5a1519c087338548303e4cc2f) Thanks [@paales](https://github.com/paales)! - Always skip hydration phase by default when running useCurrentCartId / useCustomerSession
+
+- Updated dependencies [[`a88f166f0`](https://github.com/graphcommerce-org/graphcommerce/commit/a88f166f0115c58254fe47171da51a5850658a32), [`d92780d5c`](https://github.com/graphcommerce-org/graphcommerce/commit/d92780d5c3bb80b5a1519c087338548303e4cc2f)]:
+  - @graphcommerce/next-ui@4.15.1
+  - @graphcommerce/magento-customer@4.8.3
+  - @graphcommerce/ecommerce-ui@1.1.6
+  - @graphcommerce/framer-scroller@2.1.26
+  - @graphcommerce/magento-store@4.2.21
+
+## 4.6.2
+
+### Patch Changes
+
+- Updated dependencies [[`e167992df`](https://github.com/graphcommerce-org/graphcommerce/commit/e167992dfdc6964a392af719667f8a188626ab1b), [`9c2504b4e`](https://github.com/graphcommerce-org/graphcommerce/commit/9c2504b4ed75f41d3003c4d3339814010e85e37e)]:
+  - @graphcommerce/next-ui@4.15.0
+  - @graphcommerce/ecommerce-ui@1.1.5
+  - @graphcommerce/framer-scroller@2.1.25
+  - @graphcommerce/magento-customer@4.8.2
+  - @graphcommerce/magento-store@4.2.20
+
+## 4.6.1
+
+### Patch Changes
+
+- [#1557](https://github.com/graphcommerce-org/graphcommerce/pull/1557) [`2ce406727`](https://github.com/graphcommerce-org/graphcommerce/commit/2ce406727c01a3367cea26c331d8455748592ce9) Thanks [@paales](https://github.com/paales)! - Solves hydration warning for the CartFab when products are in the cart
+
+- Updated dependencies [[`01f1588c9`](https://github.com/graphcommerce-org/graphcommerce/commit/01f1588c9200bb39dd61146e260bfa2b32060612), [`84428ccab`](https://github.com/graphcommerce-org/graphcommerce/commit/84428ccab8d1d263893766197076651eae68759c), [`c0a7f9427`](https://github.com/graphcommerce-org/graphcommerce/commit/c0a7f9427466f0a3886b2c3ebf2f0aa5d79ee081)]:
+  - @graphcommerce/graphql@3.4.3
+  - @graphcommerce/magento-customer@4.8.1
+  - @graphcommerce/ecommerce-ui@1.1.4
+  - @graphcommerce/magento-store@4.2.19
+  - @graphcommerce/magento-graphql@3.1.3
+
 ## 4.6.0
 
 ### Minor Changes

package/components/CartFab/CartFab.tsx

@@ -1,3 +1,4 @@
+import { WaitForQueries } from '@graphcommerce/ecommerce-ui'
 import {
   extendableComponent,
   iconShoppingBag,
@@ -69,13 +70,14 @@ function CartFabContent(props: CartFabContentProps) {
           })}
           {...fabProps}
         >
-          {total_quantity > 0 ? (
-            <DesktopHeaderBadge color='primary' variant='dot' overlap='circular'>
-              {cartIcon}
-            </DesktopHeaderBadge>
-          ) : (
-            cartIcon
-          )}
+          <DesktopHeaderBadge
+            color='primary'
+            variant='dot'
+            overlap='circular'
+            badgeContent={total_quantity}
+          >
+            {cartIcon}
+          </DesktopHeaderBadge>
         </MotionFab>
       </PageLink>
       <MotionDiv
@@ -109,15 +111,14 @@ function CartFabContent(props: CartFabContentProps) {
  * product to the cart. This would mean that it would immediately start executing this query.
  */
 export function CartFab(props: CartFabProps) {
-  const { data, loading, called } = useCartQuery(CartFabDocument, {
+  const cartQuery = useCartQuery(CartFabDocument, {
     fetchPolicy: 'cache-only',
     nextFetchPolicy: 'cache-first',
   })
-  const qty = data?.cart?.total_quantity ?? 0
 
-  if (loading || !called) {
-    return <CartFabContent {...props} total_quantity={0} />
-  }
-
-  return <CartFabContent total_quantity={qty} {...props} />
+  return (
+    <WaitForQueries waitFor={cartQuery} fallback={<CartFabContent {...props} total_quantity={0} />}>
+      <CartFabContent total_quantity={cartQuery.data?.cart?.total_quantity ?? 0} {...props} />
+    </WaitForQueries>
+  )
 }

package/hooks/useCurrentCartId.ts

@@ -1,6 +1,6 @@
 import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { QueryHookOptions, useQuery } from '@graphcommerce/graphql'
-import { useState } from 'react'
+import { startTransition, useState } from 'react'
 import { CurrentCartIdDocument, CurrentCartIdQuery } from './CurrentCartId.gql'
 import {} from 'react-dom'
 
@@ -10,9 +10,9 @@ type UseCurrentCartIdOptions<Q, V> = QueryHookOptions<
 > & { hydration?: boolean }
 
 export function useCurrentCartId<Q, V>(options: UseCurrentCartIdOptions<Q, V> = {}) {
-  const { hydration = true, ...queryOptions } = options
+  const { hydration = false, ...queryOptions } = options
   const [hydrating, setHydrating] = useState(!hydration)
-  useIsomorphicLayoutEffect(() => setHydrating(false), [])
+  useIsomorphicLayoutEffect(() => startTransition(() => setHydrating(false)), [])
   const skip = options.skip !== undefined ? options.skip : hydrating
 
   const { data, ...queryResults } = useQuery(CurrentCartIdDocument, { ...queryOptions, skip })

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.6.0",
+  "version": "4.6.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,16 +18,16 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.1.3",
+    "@graphcommerce/ecommerce-ui": "1.1.6",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/framer-next-pages": "3.2.4",
-    "@graphcommerce/framer-scroller": "2.1.24",
-    "@graphcommerce/graphql": "3.4.2",
+    "@graphcommerce/framer-scroller": "2.1.26",
+    "@graphcommerce/graphql": "3.4.3",
     "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-customer": "4.8.0",
-    "@graphcommerce/magento-graphql": "3.1.2",
-    "@graphcommerce/magento-store": "4.2.18",
-    "@graphcommerce/next-ui": "4.14.0",
+    "@graphcommerce/magento-customer": "4.8.3",
+    "@graphcommerce/magento-graphql": "3.1.3",
+    "@graphcommerce/magento-store": "4.2.21",
+    "@graphcommerce/next-ui": "4.15.1",
     "@graphcommerce/react-hook-form": "3.3.1"
   },
   "peerDependencies": {