@graphcommerce/magento-customer 4.7.2 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 4.8.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
+
+- Updated dependencies [[`1afc6a547`](https://github.com/graphcommerce-org/graphcommerce/commit/1afc6a5473d6e31f47b5d0188801803b31865290), [`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/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
+
 ## 4.7.2
 
 ### Patch Changes

package/hooks/useCustomerQuery.ts

@@ -19,9 +19,10 @@ const notLoggedInError = new ApolloError({
 /** Will only execute when the customer is signed in. */
 export function useCustomerQuery<Q, V>(
   document: TypedDocumentNode<Q, V>,
-  queryOptions: QueryHookOptions<Q, V> = {},
+  options: QueryHookOptions<Q, V> & { hydration?: boolean } = {},
 ): QueryResult<Q, V> {
-  const { loggedIn, called } = useCustomerSession()
+  const { hydration, ...queryOptions } = options
+  const { loggedIn, called } = useCustomerSession({ hydration })
 
   const result = useQuery(document, {
     ...queryOptions,

package/hooks/useCustomerSession.ts

@@ -3,28 +3,27 @@ import { useQuery } from '@graphcommerce/graphql'
 import { useState } from 'react'
 import { CustomerTokenDocument, CustomerTokenQuery } from './CustomerToken.gql'
 
-type TokenResponse = Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'> & {
-  called: boolean
-}
+export type UseCustomerSessionOptions = { hydration?: boolean }
 
 export type UseCustomerSessionReturn =
-  | Partial<TokenResponse> & { loggedIn: boolean; requireAuth: boolean }
-
-export function useCustomerSession(): UseCustomerSessionReturn {
-  const [skip, setSkip] = useState(true)
-
-  const { called, data } = useQuery(CustomerTokenDocument, {
-    ssr: false,
-    fetchPolicy: 'cache-only',
-    skip,
-  })
+  | Partial<
+      Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'> & {
+        called: boolean
+      }
+    > & { loggedIn: boolean; requireAuth: boolean }
+
+export function useCustomerSession(
+  options: UseCustomerSessionOptions = {},
+): UseCustomerSessionReturn {
+  const { hydration = true } = options
+  const [hydrating, setHydrating] = useState(!hydration)
+  useIsomorphicLayoutEffect(() => setHydrating(false), [])
+  const skip = hydrating
+
+  const { called, data } = useQuery(CustomerTokenDocument, { skip })
 
   const token = data?.customerToken
 
-  useIsomorphicLayoutEffect(() => {
-    if (skip) setSkip(false)
-  }, [skip])
-
   if (!token) return { called, loggedIn: false, requireAuth: true }
 
   return {

package/hooks/useFormIsEmailAvailable.tsx

@@ -1,4 +1,4 @@
-import { useFormAutoSubmit, useFormGqlQuery, useFormPersist } from '@graphcommerce/react-hook-form'
+import { useFormAutoSubmit, useFormGqlQuery } from '@graphcommerce/react-hook-form'
 import { useEffect, useState } from 'react'
 import { CustomerDocument } from './Customer.gql'
 import { IsEmailAvailableDocument } from './IsEmailAvailable.gql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.7.2",
+  "version": "4.8.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,15 +19,15 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.1.2",
+    "@graphcommerce/ecommerce-ui": "1.1.3",
     "@graphcommerce/framer-utils": "3.1.4",
-    "@graphcommerce/graphql": "3.4.1",
+    "@graphcommerce/graphql": "3.4.2",
     "@graphcommerce/graphql-mesh": "4.1.5",
     "@graphcommerce/image": "3.1.7",
-    "@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"
+    "@graphcommerce/magento-graphql": "3.1.2",
+    "@graphcommerce/magento-store": "4.2.18",
+    "@graphcommerce/next-ui": "4.14.0",
+    "@graphcommerce/react-hook-form": "3.3.1"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",