@graphcommerce/magento-cart 4.5.1 → 4.6.1

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Change Log
 
+## 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
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`03d01c06c`](https://github.com/graphcommerce-org/graphcommerce/commit/03d01c06c6dc13df8d38ab5b40bd100c567a9e8d) Thanks [@NickdeK](https://github.com/NickdeK)! - Added a `{ hydrate: boolean }` option to `useCartQuery`, `useCurrentCartId`, `useCustomerQuery` and `useCustomerSession` to allow for data during the hydration phase. This can cause hydration warnings, but prevents an additional rerender.
+
+### Patch Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`d03f0860b`](https://github.com/graphcommerce-org/graphcommerce/commit/d03f0860b882db4f280d9467aef9d66e56c1c030) Thanks [@NickdeK](https://github.com/NickdeK)! - Checkout address would incorrectly be null instead of an actual address
+
+* [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`b68d0b44a`](https://github.com/graphcommerce-org/graphcommerce/commit/b68d0b44a87688c80fb0aa4a5c840f262ce48d2f) Thanks [@NickdeK](https://github.com/NickdeK)! - Simplify `useCartIdCreate` hook to reduce a potential rerender when not nessesary
+
+* Updated dependencies [[`1afc6a547`](https://github.com/graphcommerce-org/graphcommerce/commit/1afc6a5473d6e31f47b5d0188801803b31865290), [`03d01c06c`](https://github.com/graphcommerce-org/graphcommerce/commit/03d01c06c6dc13df8d38ab5b40bd100c567a9e8d), [`4a4579bb2`](https://github.com/graphcommerce-org/graphcommerce/commit/4a4579bb2f7da378f3fcc504405caf2560dc10f6), [`afcd8e4bf`](https://github.com/graphcommerce-org/graphcommerce/commit/afcd8e4bfb7010da4d5faeed85b61991ed7975f4), [`02e1988e5`](https://github.com/graphcommerce-org/graphcommerce/commit/02e1988e5f361c6f66ae30d3bbee38ef2ac062df), [`323fdee4b`](https://github.com/graphcommerce-org/graphcommerce/commit/323fdee4b15ae23e0e84dd0588cb2c6446dcfd50)]:
+  - @graphcommerce/graphql@3.4.2
+  - @graphcommerce/magento-customer@4.8.0
+  - @graphcommerce/react-hook-form@3.3.1
+  - @graphcommerce/next-ui@4.14.0
+  - @graphcommerce/ecommerce-ui@1.1.3
+  - @graphcommerce/magento-graphql@3.1.2
+  - @graphcommerce/magento-store@4.2.18
+  - @graphcommerce/framer-scroller@2.1.24
+
+## 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

package/components/ApolloCartError/ApolloCartErrorFullPage.tsx

@@ -3,23 +3,39 @@ import {
   ApolloCustomerErrorFullPageProps,
 } from '@graphcommerce/magento-customer'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { iconSadFace, IconSvg } from '@graphcommerce/next-ui'
+import { iconShoppingBag, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
+import { useCurrentCartId } from '../../hooks'
 import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'
+import { EmptyCart } from '../EmptyCart/EmptyCart'
 
 export type ApolloCartErrorFullPageProps = Omit<ApolloCustomerErrorFullPageProps, 'icon'>
 
 export function ApolloCartErrorFullPage(props: ApolloCartErrorFullPageProps) {
   const { error, button } = props
   const clear = useClearCurrentCartId()
+  const { currentCartId } = useCurrentCartId()
 
   const [, noSuchEntity] = graphqlErrorByCategory({ category: 'graphql-no-such-entity', error })
 
+  if (noSuchEntity)
+    return (
+      <EmptyCart
+        button={
+          currentCartId ? (
+            <Button onClick={clear}>
+              <Trans id='Reset Cart' />
+            </Button>
+          ) : undefined
+        }
+      />
+    )
+
   return (
     <ApolloCustomerErrorFullPage
       {...props}
-      icon={<IconSvg src={iconSadFace} size='xxl' />}
+      icon={<IconSvg src={iconShoppingBag} size='xxl' />}
       button={
         noSuchEntity ? (
           <Button onClick={clear}>

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/components/EmptyCart/EmptyCart.tsx

@@ -1,23 +1,30 @@
-import { FullPageMessage, IconSvg, iconShoppingBag } from '@graphcommerce/next-ui'
+import {
+  FullPageMessage,
+  IconSvg,
+  iconShoppingBag,
+  FullPageMessageProps,
+} from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import Link from 'next/link'
 import React from 'react'
 
-type EmptyCartProps = { children?: React.ReactNode }
+type EmptyCartProps = { children?: React.ReactNode } & Pick<FullPageMessageProps, 'button'>
 export function EmptyCart(props: EmptyCartProps) {
-  const { children } = props
+  const { children, button } = props
 
   return (
     <FullPageMessage
       title={<Trans id='Your cart is empty' />}
       icon={<IconSvg src={iconShoppingBag} size='xxl' />}
       button={
-        <Link href='/' passHref>
-          <Button variant='pill' color='secondary' size='large'>
-            <Trans id='Continue shopping' />
-          </Button>
-        </Link>
+        button || (
+          <Link href='/' passHref>
+            <Button variant='pill' color='secondary' size='large'>
+              <Trans id='Continue shopping' />
+            </Button>
+          </Link>
+        )
       }
     >
       {children ?? <Trans id='Discover our collection and add items to your cart!' />}

package/hooks/useAssignCurrentCartId.ts

@@ -1,17 +1,25 @@
-import { useApolloClient } from '@graphcommerce/graphql'
+import { ApolloCache, useApolloClient } from '@graphcommerce/graphql'
+import { cookie } from '@graphcommerce/next-ui'
 import { useCallback } from 'react'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'
 
+export const CART_ID_COOKIE = 'cart'
+
+export function writeCartId(cache: ApolloCache<object>, id: string | null = null) {
+  cache.writeQuery({
+    query: CurrentCartIdDocument,
+    data: { currentCartId: { __typename: 'CurrentCartId', id } },
+    broadcast: true,
+  })
+}
+
 export function useAssignCurrentCartId() {
   const { cache } = useApolloClient()
 
   return useCallback(
     (id: string) => {
-      cache.writeQuery({
-        query: CurrentCartIdDocument,
-        data: { currentCartId: { __typename: 'CurrentCartId', id } },
-        broadcast: true,
-      })
+      writeCartId(cache, id)
+      cookie(CART_ID_COOKIE, id)
     },
     [cache],
   )

package/hooks/useCartIdCreate.ts

@@ -1,18 +1,20 @@
-import { useMutation } from '@graphcommerce/graphql'
+import { useApolloClient } from '@graphcommerce/graphql'
 import { i18n } from '@lingui/core'
 import { CreateEmptyCartDocument } from './CreateEmptyCart.gql'
+import { CurrentCartIdDocument } from './CurrentCartId.gql'
 import { useAssignCurrentCartId } from './useAssignCurrentCartId'
-import { useCurrentCartId } from './useCurrentCartId'
 
 export function useCartIdCreate() {
-  const { currentCartId } = useCurrentCartId()
-  const [create] = useMutation(CreateEmptyCartDocument)
+  const client = useApolloClient()
   const assignCurrentCartId = useAssignCurrentCartId()
 
   return async (): Promise<string> => {
+    const currentCartId = client.cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId
+      ?.id
+
     if (currentCartId) return currentCartId
 
-    const { data } = await create()
+    const { data } = await client.mutate({ mutation: CreateEmptyCartDocument })
     if (!data?.createEmptyCart) throw Error(i18n._(/* i18n */ 'Could not create an empty cart'))
 
     // We store the cartId that is returned as the currentCartId result

package/hooks/useCartQuery.ts

@@ -1,8 +1,16 @@
-import { useQuery, TypedDocumentNode, QueryHookOptions } from '@graphcommerce/graphql'
+import { useQuery, TypedDocumentNode, QueryHookOptions, ApolloError } from '@graphcommerce/graphql'
+import { GraphQLError } from 'graphql'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
 import { useCurrentCartId } from './useCurrentCartId'
 
+const noCartError = new ApolloError({
+  graphQLErrors: [
+    new GraphQLError('No cart found', {
+      extensions: { category: 'graphql-no-such-entity' },
+    }),
+  ],
+})
+
 /**
  * Requires the query to have a `$cartId: String!` argument. It will automatically inject the
  * currently active cart_id.
@@ -15,11 +23,15 @@ import { useCurrentCartId } from './useCurrentCartId'
  */
 export function useCartQuery<Q, V extends { cartId: string; [index: string]: unknown }>(
   document: TypedDocumentNode<Q, V>,
-  options: QueryHookOptions<Q, Omit<V, 'cartId'>> & { allowUrl?: boolean } = {},
+  options: QueryHookOptions<Q, Omit<V, 'cartId'>> & {
+    allowUrl?: boolean
+    hydration?: boolean
+  } = {},
 ) {
-  const { allowUrl = true, ...queryOptions } = options
+  const { allowUrl = true, hydration, ...queryOptions } = options
   const router = useRouter()
-  const { currentCartId } = useCurrentCartId()
+  const { currentCartId, called } = useCurrentCartId({ hydration })
+
   const urlCartId = router.query.cart_id
   const usingUrl = allowUrl && typeof urlCartId === 'string'
   const cartId = usingUrl ? urlCartId : currentCartId
@@ -32,7 +44,13 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
 
   queryOptions.variables = { cartId, ...options?.variables } as V
   queryOptions.skip = queryOptions?.skip || !cartId
-  queryOptions.ssr = false
+  queryOptions.ssr = !!hydration
+
+  const result = useQuery(document, queryOptions)
 
-  return useQuery(document, queryOptions)
+  return {
+    ...useQuery(document, queryOptions),
+    ...result,
+    error: called && !currentCartId ? noCartError : result.error,
+  }
 }

package/hooks/useClearCurrentCartId.ts

@@ -1,5 +1,7 @@
 import { useApolloClient } from '@graphcommerce/graphql'
+import { cookie } from '@graphcommerce/next-ui'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'
+import { CART_ID_COOKIE } from './useAssignCurrentCartId'
 
 export function useClearCurrentCartId() {
   const { cache } = useApolloClient()
@@ -13,5 +15,6 @@ export function useClearCurrentCartId() {
       data: { currentCartId: { __typename: 'CurrentCartId', id: null } },
       broadcast: true,
     })
+    cookie(CART_ID_COOKIE, null)
   }
 }

package/hooks/useCurrentCartId.ts

@@ -2,22 +2,24 @@ import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { QueryHookOptions, useQuery } from '@graphcommerce/graphql'
 import { useState } from 'react'
 import { CurrentCartIdDocument, CurrentCartIdQuery } from './CurrentCartId.gql'
+import {} from 'react-dom'
 
-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,
-  })
+type UseCurrentCartIdOptions<Q, V> = QueryHookOptions<
+  Q & Pick<CurrentCartIdQuery, 'currentCartId'>,
+  V
+> & { hydration?: boolean }
 
-  useIsomorphicLayoutEffect(() => {
-    if (skip) setSkip(false)
-  }, [skip])
+export function useCurrentCartId<Q, V>(options: UseCurrentCartIdOptions<Q, V> = {}) {
+  const { hydration = true, ...queryOptions } = options
+  const [hydrating, setHydrating] = useState(!hydration)
+  useIsomorphicLayoutEffect(() => setHydrating(false), [])
+  const skip = options.skip !== undefined ? options.skip : hydrating
+
+  const { data, ...queryResults } = useQuery(CurrentCartIdDocument, { ...queryOptions, skip })
 
   return {
     currentCartId: data?.currentCartId?.id || '',
+    data,
     ...queryResults,
   }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.5.1",
+  "version": "4.6.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,23 +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.1.1",
+    "@graphcommerce/ecommerce-ui": "1.1.4",
     "@graphcommerce/framer-utils": "3.1.4",
-    "@graphcommerce/framer-next-pages": "3.2.3",
-    "@graphcommerce/framer-scroller": "2.1.22",
-    "@graphcommerce/graphql": "3.4.0",
+    "@graphcommerce/framer-next-pages": "3.2.4",
+    "@graphcommerce/framer-scroller": "2.1.24",
+    "@graphcommerce/graphql": "3.4.3",
     "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-customer": "4.7.1",
-    "@graphcommerce/magento-graphql": "3.1.0",
-    "@graphcommerce/magento-store": "4.2.16",
-    "@graphcommerce/next-ui": "4.13.0",
-    "@graphcommerce/react-hook-form": "3.3.0"
+    "@graphcommerce/magento-customer": "4.8.1",
+    "@graphcommerce/magento-graphql": "3.1.3",
+    "@graphcommerce/magento-store": "4.2.19",
+    "@graphcommerce/next-ui": "4.14.0",
+    "@graphcommerce/react-hook-form": "3.3.1"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/typePolicies.ts

@@ -16,7 +16,10 @@ export const cartTypePolicies: StrictTypedTypePolicies = {
           existing: ShippingCartAddress[] | undefined,
           incoming: ShippingCartAddress[],
           options,
-        ) => [options.mergeObjects(existing?.[0] ?? {}, incoming[0])],
+        ) => {
+          const merged = options.mergeObjects(existing?.[0] ?? {}, incoming[0])
+          return merged ? [merged] : []
+        },
       },
       prices: {
         merge: (existing: CartPrices[] | undefined, incoming: CartPrices[], options) =>