@graphcommerce/magento-cart 4.4.8 → 4.5.2

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Change Log
 
+## 4.5.2
+
+### Patch Changes
+
+- Updated dependencies [[`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce), [`c5c539c44`](https://github.com/graphcommerce-org/graphcommerce/commit/c5c539c44eeac524cd62ce649e132d2e00333794), [`6f69bc54c`](https://github.com/graphcommerce-org/graphcommerce/commit/6f69bc54c6e0224452817c532ae58d9c332b61ea), [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43), [`b4936e961`](https://github.com/graphcommerce-org/graphcommerce/commit/b4936e96175fe80717895822e245274db05638bd)]:
+  - @graphcommerce/framer-next-pages@3.2.4
+  - @graphcommerce/graphql@3.4.1
+  - @graphcommerce/magento-customer@4.7.2
+  - @graphcommerce/next-ui@4.13.1
+  - @graphcommerce/framer-scroller@2.1.23
+  - @graphcommerce/ecommerce-ui@1.1.2
+  - @graphcommerce/magento-graphql@3.1.1
+  - @graphcommerce/magento-store@4.2.17
+
+## 4.5.1
+
+### Patch Changes
+
+- Updated dependencies [[`8d8fda262`](https://github.com/graphcommerce-org/graphcommerce/commit/8d8fda2623e561cb43441110c67ffa34b692668a), [`d41cff721`](https://github.com/graphcommerce-org/graphcommerce/commit/d41cff7211230561ceeb7786cf75790efd6377cd), [`cefa7b365`](https://github.com/graphcommerce-org/graphcommerce/commit/cefa7b3652b55108d2178927e3c5d98a111cf373), [`584b683a2`](https://github.com/graphcommerce-org/graphcommerce/commit/584b683a2aedcdf5067644c8dcc0e63a5b9e894c)]:
+  - @graphcommerce/next-ui@4.13.0
+  - @graphcommerce/magento-store@4.2.16
+  - @graphcommerce/framer-scroller@2.1.22
+  - @graphcommerce/ecommerce-ui@1.1.1
+  - @graphcommerce/magento-customer@4.7.1
+
+## 4.5.0
+
+### Minor Changes
+
+- [#1544](https://github.com/graphcommerce-org/graphcommerce/pull/1544) [`5f927ebdc`](https://github.com/graphcommerce-org/graphcommerce/commit/5f927ebdc6f0331833e02b96e4f169bfe475ac6b) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Fixed hydration errors on account, cart and wishlist
+
+### Patch Changes
+
+- [#1545](https://github.com/graphcommerce-org/graphcommerce/pull/1545) [`c87a28e7d`](https://github.com/graphcommerce-org/graphcommerce/commit/c87a28e7dad87bffd0bd125ad5fdca65aaa389cc) Thanks [@paales](https://github.com/paales)! - Faster hydration with useLayoutEffect
+
+- Updated dependencies [[`5f927ebdc`](https://github.com/graphcommerce-org/graphcommerce/commit/5f927ebdc6f0331833e02b96e4f169bfe475ac6b), [`c87a28e7d`](https://github.com/graphcommerce-org/graphcommerce/commit/c87a28e7dad87bffd0bd125ad5fdca65aaa389cc), [`c756f42e5`](https://github.com/graphcommerce-org/graphcommerce/commit/c756f42e503761a497e4a5a7a02d02141df231c3)]:
+  - @graphcommerce/ecommerce-ui@1.1.0
+  - @graphcommerce/graphql@3.4.0
+  - @graphcommerce/magento-customer@4.7.0
+  - @graphcommerce/magento-graphql@3.1.0
+  - @graphcommerce/react-hook-form@3.3.0
+  - @graphcommerce/next-ui@4.12.0
+  - @graphcommerce/magento-store@4.2.15
+  - @graphcommerce/framer-scroller@2.1.21
+
 ## 4.4.8
 
 ### Patch Changes

package/components/CartFab/CartFab.tsx

@@ -109,15 +109,15 @@ 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 } = useCartQuery(CartFabDocument, {
+  const { data, loading, called } = useCartQuery(CartFabDocument, {
     fetchPolicy: 'cache-only',
     nextFetchPolicy: 'cache-first',
   })
   const qty = data?.cart?.total_quantity ?? 0
 
-  return (
-    <NoSsr fallback={<CartFabContent {...props} total_quantity={0} />}>
-      <CartFabContent total_quantity={qty} {...props} />
-    </NoSsr>
-  )
+  if (loading || !called) {
+    return <CartFabContent {...props} total_quantity={0} />
+  }
+
+  return <CartFabContent total_quantity={qty} {...props} />
 }

package/hooks/useCartIdCreate.ts

@@ -5,12 +5,12 @@ import { useAssignCurrentCartId } from './useAssignCurrentCartId'
 import { useCurrentCartId } from './useCurrentCartId'
 
 export function useCartIdCreate() {
-  const cartId = useCurrentCartId()
+  const { currentCartId } = useCurrentCartId()
   const [create] = useMutation(CreateEmptyCartDocument)
   const assignCurrentCartId = useAssignCurrentCartId()
 
   return async (): Promise<string> => {
-    if (cartId) return cartId
+    if (currentCartId) return currentCartId
 
     const { data } = await create()
     if (!data?.createEmptyCart) throw Error(i18n._(/* i18n */ 'Could not create an empty cart'))

package/hooks/useCartQuery.ts

@@ -1,5 +1,6 @@
 import { useQuery, TypedDocumentNode, QueryHookOptions } from '@graphcommerce/graphql'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 import { useCurrentCartId } from './useCurrentCartId'
 
 /**
@@ -17,12 +18,10 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
   options: QueryHookOptions<Q, Omit<V, 'cartId'>> & { allowUrl?: boolean } = {},
 ) {
   const { allowUrl = true, ...queryOptions } = options
-
   const router = useRouter()
-  const currentCartId = useCurrentCartId()
+  const { currentCartId } = useCurrentCartId()
   const urlCartId = router.query.cart_id
   const usingUrl = allowUrl && typeof urlCartId === 'string'
-
   const cartId = usingUrl ? urlCartId : currentCartId
 
   if (usingUrl && typeof queryOptions.fetchPolicy === 'undefined')

package/hooks/useCurrentCartId.ts

@@ -1,6 +1,23 @@
-import { useQuery } from '@graphcommerce/graphql'
-import { CurrentCartIdDocument } from './CurrentCartId.gql'
+import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
+import { QueryHookOptions, useQuery } from '@graphcommerce/graphql'
+import { useState } from 'react'
+import { CurrentCartIdDocument, CurrentCartIdQuery } from './CurrentCartId.gql'
 
-export function useCurrentCartId() {
-  return useQuery(CurrentCartIdDocument, { ssr: false }).data?.currentCartId?.id ?? undefined
+export function useCurrentCartId<Q, V>(
+  options: QueryHookOptions<Q & Pick<CurrentCartIdQuery, 'currentCartId'>, Omit<V, 'skip'>> = {},
+) {
+  const [skip, setSkip] = useState(true)
+  const { data, ...queryResults } = useQuery(CurrentCartIdDocument, {
+    ...options,
+    skip,
+  })
+
+  useIsomorphicLayoutEffect(() => {
+    if (skip) setSkip(false)
+  }, [skip])
+
+  return {
+    currentCartId: data?.currentCartId?.id || '',
+    ...queryResults,
+  }
 }

package/hooks/useMergeCustomerCart.ts

@@ -13,7 +13,7 @@ import { useCurrentCartId } from './useCurrentCartId'
  * @todo: Implement the assignCustomerToGuestCart when available: https://github.com/magento/magento2/pull/33106
  */
 export function useMergeCustomerCart() {
-  const sourceCartId = useCurrentCartId()
+  const { currentCartId } = useCurrentCartId()
   const assignCurrentCartId = useAssignCurrentCartId()
   const [merge] = useMutation(UseMergeCustomerCartDocument, { errorPolicy: 'all' })
 
@@ -27,21 +27,21 @@ export function useMergeCustomerCart() {
     if (!destinationCartId) return
 
     // If the vistor cart is the same as the customer cart, we're done
-    if (sourceCartId === destinationCartId) return
+    if (currentCartId === destinationCartId) return
 
     // If there is no visitor cart, assign the customer cart as the current cart
-    if (!sourceCartId) {
+    if (!currentCartId) {
       assignCurrentCartId(destinationCartId)
       return
     }
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
-      const result = await merge({ variables: { sourceCartId, destinationCartId } })
+      const result = await merge({ variables: { sourceCartId: currentCartId, destinationCartId } })
 
       if (!result.data?.mergeCarts.id) return
 
       assignCurrentCartId(result.data?.mergeCarts.id)
     })()
-  }, [assignCurrentCartId, sourceCartId, destinationCartId, merge])
+  }, [assignCurrentCartId, destinationCartId, merge, currentCartId])
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.4.8",
+  "version": "4.5.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,22 +12,23 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/eslint-config-pwa": "^4.1.9",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.3",
+    "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.0.23",
-    "@graphcommerce/framer-next-pages": "3.2.3",
-    "@graphcommerce/framer-scroller": "2.1.20",
-    "@graphcommerce/graphql": "3.3.0",
+    "@graphcommerce/ecommerce-ui": "1.1.2",
+    "@graphcommerce/framer-utils": "3.1.4",
+    "@graphcommerce/framer-next-pages": "3.2.4",
+    "@graphcommerce/framer-scroller": "2.1.23",
+    "@graphcommerce/graphql": "3.4.1",
     "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-customer": "4.6.3",
-    "@graphcommerce/magento-graphql": "3.0.15",
-    "@graphcommerce/magento-store": "4.2.14",
-    "@graphcommerce/next-ui": "4.11.2",
-    "@graphcommerce/react-hook-form": "3.2.2"
+    "@graphcommerce/magento-customer": "4.7.2",
+    "@graphcommerce/magento-graphql": "3.1.1",
+    "@graphcommerce/magento-store": "4.2.17",
+    "@graphcommerce/next-ui": "4.13.1",
+    "@graphcommerce/react-hook-form": "3.3.0"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",