@graphcommerce/magento-customer 4.7.1 → 4.8.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Change Log
 
+## 4.8.1
+
+### Patch Changes
+
+- [#1557](https://github.com/graphcommerce-org/graphcommerce/pull/1557) [`84428ccab`](https://github.com/graphcommerce-org/graphcommerce/commit/84428ccab8d1d263893766197076651eae68759c) Thanks [@paales](https://github.com/paales)! - Use WaitForQuery component to handle the loading state
+
+- Updated dependencies [[`01f1588c9`](https://github.com/graphcommerce-org/graphcommerce/commit/01f1588c9200bb39dd61146e260bfa2b32060612), [`c0a7f9427`](https://github.com/graphcommerce-org/graphcommerce/commit/c0a7f9427466f0a3886b2c3ebf2f0aa5d79ee081)]:
+  - @graphcommerce/graphql-mesh@4.1.6
+  - @graphcommerce/graphql@3.4.3
+  - @graphcommerce/ecommerce-ui@1.1.4
+  - @graphcommerce/magento-store@4.2.19
+  - @graphcommerce/magento-graphql@3.1.3
+
+## 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
+
+- [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce) Thanks [@paales](https://github.com/paales)! - Updated to Next.js v12.2.2 and other packages and made compatible
+
+- 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)]:
+  - @graphcommerce/graphql@3.4.1
+  - @graphcommerce/graphql-mesh@4.1.5
+  - @graphcommerce/next-ui@4.13.1
+  - @graphcommerce/ecommerce-ui@1.1.2
+  - @graphcommerce/magento-graphql@3.1.1
+  - @graphcommerce/magento-store@4.2.17
+
 ## 4.7.1
 
 ### Patch Changes

package/components/CustomerMenuFabItem/CustomerMenuFabItem.tsx

@@ -1,3 +1,4 @@
+import { WaitForQueries } from '@graphcommerce/ecommerce-ui'
 import { MenuFabSecondaryItem, iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Badge, NoSsr, SxProps, Theme } from '@mui/material'
 import React from 'react'

package/components/SignOutForm/SignOutForm.tsx

@@ -5,7 +5,9 @@ import React from 'react'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { SignOutFormDocument } from './SignOutForm.gql'
 
-type SignOutFormProps = { button: (props: { formState: FormState<unknown> }) => React.ReactNode }
+type SignOutFormProps = {
+  button: (props: { formState: FormState<Record<string, unknown>> }) => React.ReactNode
+}
 
 export function SignOutForm(props: SignOutFormProps) {
   const { button } = props

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.1",
+  "version": "4.8.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,22 +12,22 @@
     }
   },
   "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",
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.1.1",
+    "@graphcommerce/ecommerce-ui": "1.1.4",
     "@graphcommerce/framer-utils": "3.1.4",
-    "@graphcommerce/graphql": "3.4.0",
-    "@graphcommerce/graphql-mesh": "4.1.4",
+    "@graphcommerce/graphql": "3.4.3",
+    "@graphcommerce/graphql-mesh": "4.1.6",
     "@graphcommerce/image": "3.1.7",
-    "@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-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",