@graphcommerce/magento-customer 4.6.3 → 4.7.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 4.7.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), [`c756f42e5`](https://github.com/graphcommerce-org/graphcommerce/commit/c756f42e503761a497e4a5a7a02d02141df231c3)]:
+  - @graphcommerce/ecommerce-ui@1.1.0
+  - @graphcommerce/graphql@3.4.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
+
 ## 4.6.3
 
 ### Patch Changes

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -16,7 +16,7 @@ export type ApolloCustomerErrorFullPageProps = {
 
 export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPageProps) {
   const { error, icon, altButton, button, ...alertProps } = props
-  const [newError, unauthorized] = useAuthorizationErrorMasked()
+  const [newError, unauthorized] = useAuthorizationErrorMasked(error)
   const { token } = useCustomerSession()
 
   return (
@@ -28,7 +28,7 @@ export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPagePr
         unauthorized ? (
           <PageLink href='/account/signin' passHref>
             <Button variant='contained' color='primary' size='large'>
-              {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
+              {token ? <Trans id='Sign in' /> : <Trans id='Sign in or create an account!' />}
             </Button>
           </PageLink>
         ) : (

package/hooks/useCustomerQuery.ts

@@ -1,11 +1,36 @@
-import { useQuery, TypedDocumentNode, QueryHookOptions } from '@graphcommerce/graphql'
+import {
+  useQuery,
+  TypedDocumentNode,
+  QueryHookOptions,
+  QueryResult,
+  ApolloError,
+} from '@graphcommerce/graphql'
+import { GraphQLError } from 'graphql'
 import { useCustomerSession } from './useCustomerSession'
 
+const notLoggedInError = new ApolloError({
+  graphQLErrors: [
+    new GraphQLError('Not authorized', {
+      extensions: { category: 'graphql-authorization' },
+    }),
+  ],
+})
+
 /** Will only execute when the customer is signed in. */
 export function useCustomerQuery<Q, V>(
   document: TypedDocumentNode<Q, V>,
   queryOptions: QueryHookOptions<Q, V> = {},
-) {
-  const { loggedIn } = useCustomerSession()
-  return useQuery(document, { ...queryOptions, ssr: false, skip: !loggedIn })
+): QueryResult<Q, V> {
+  const { loggedIn, called } = useCustomerSession()
+
+  const result = useQuery(document, {
+    ...queryOptions,
+    ssr: false,
+    skip: !loggedIn,
+  })
+
+  return {
+    ...result,
+    error: called && !loggedIn ? notLoggedInError : result.error,
+  }
 }

package/hooks/useCustomerSession.ts

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

package/link/createCustomerTokenLink.ts

@@ -6,7 +6,7 @@ import {
   setContext,
 } from '@graphcommerce/graphql'
 import { CustomerTokenDocument } from '../hooks'
-import { onAuthenticationError } from './onAuthenticationError'
+import { onAuthorizationError } from './onAuthenticationError'
 
 export const addTokenHeader = setContext((_, context: ClientContext) => {
   if (!context.headers) context.headers = {}
@@ -22,7 +22,7 @@ export const addTokenHeader = setContext((_, context: ClientContext) => {
   }
 })
 
-export const customerTokenLink = ApolloLink.from([addTokenHeader, onAuthenticationError])
+export const customerTokenLink = ApolloLink.from([addTokenHeader, onAuthorizationError])
 
 /** Not really required anymore, you can use customerTokenLink directly */
 export const createCustomerTokenLink = (_: ApolloCache<NormalizedCacheObject>) => customerTokenLink

package/link/onAuthenticationError.ts

@@ -22,14 +22,14 @@ function invalidateToken(cache: InMemoryCache) {
   }
 }
 
-export const onAuthenticationError = onError(({ graphQLErrors, operation }) => {
+export const onAuthorizationError = onError(({ graphQLErrors, operation }) => {
   const { cache } = operation.getContext()
   if (graphQLErrors) {
     for (const err of graphQLErrors) {
       if (err.extensions?.category === 'graphql-authorization') {
         // Modify the operation context with a new token
         invalidateToken(cache as InMemoryCache)
-        break;
+        break
       }
     }
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.6.3",
+  "version": "4.7.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,14 +19,15 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.0.23",
-    "@graphcommerce/graphql": "3.3.0",
+    "@graphcommerce/ecommerce-ui": "1.1.0",
+    "@graphcommerce/framer-utils": "3.1.4",
+    "@graphcommerce/graphql": "3.4.0",
     "@graphcommerce/graphql-mesh": "4.1.4",
     "@graphcommerce/image": "3.1.7",
-    "@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-graphql": "3.1.0",
+    "@graphcommerce/magento-store": "4.2.15",
+    "@graphcommerce/next-ui": "4.12.0",
+    "@graphcommerce/react-hook-form": "3.3.0"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",
@@ -35,6 +36,7 @@
     "framer-motion": "^6.2.4",
     "next": "^12.1.2",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "graphql": "16.5.0"
   }
 }