@graphcommerce/magento-customer 10.0.0-canary.67 → 10.0.0-canary.72

package/components/SignUpForm/SignUpFormInline.tsx

@@ -68,7 +68,9 @@ export function SignUpFormInline(props: SignUpFormInlineProps) {
   ) {
     return (
       <Alert>
-        <Trans>Registration successful. Please check your inbox to confirm your email address ({email})</Trans>
+        <Trans>
+          Registration successful. Please check your inbox to confirm your email address ({email})
+        </Trans>
       </Alert>
     )
   }

package/components/TrackingLink/TrackingLink.tsx

@@ -1,4 +1,4 @@
-import { iconLocation, IconSvg } from '@graphcommerce/next-ui'
+import { iconLocation, IconSvg, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link, Typography } from '@mui/material'
@@ -14,14 +14,14 @@ export function TrackingLink(props: TrackingLinkProps) {
   return (
     <Box
       className='TrackingLink-root'
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'flex',
           alignItems: 'center',
-          color: theme.palette.primary.main,
+          color: theme.vars.palette.primary.main,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {number && validUrl && (
         <Link

package/hooks/useCustomerQuery.ts

@@ -1,17 +1,18 @@
-import type {
-  OperationVariables,
-  QueryHookOptions,
-  QueryResult,
-  TypedDocumentNode,
-} from '@graphcommerce/graphql'
+import type { OperationVariables, TypedDocumentNode } from '@graphcommerce/graphql'
 import { useQuery } from '@graphcommerce/graphql'
+import type { useQuery as useQueryType } from '@apollo/client/react'
 import { useCustomerSession } from './useCustomerSession'
 
 /** Will only execute when the customer is signed in. */
 export function useCustomerQuery<Q, V extends OperationVariables>(
   document: TypedDocumentNode<Q, V>,
-  options: QueryHookOptions<Q, V> = {},
-): QueryResult<Q, V> {
+  options?: Omit<useQueryType.Options<Q, V>, 'query'>,
+) {
   const { loggedIn } = useCustomerSession()
-  return useQuery(document, { ...options, ssr: false, skip: options.skip || !loggedIn })
+  return useQuery(document, {
+    ...options,
+    ssr: false,
+    returnPartialData: false,
+    skip: options?.skip || !loggedIn,
+  } as useQueryType.Options<Q, V>)
 }

package/hooks/useCustomerSession.ts

@@ -1,4 +1,3 @@
-import type { QueryResult } from '@graphcommerce/graphql'
 import { useQuery } from '@graphcommerce/graphql'
 import type { CustomerTokenQuery, CustomerTokenQueryVariables } from './CustomerToken.gql'
 import { CustomerTokenDocument } from './CustomerToken.gql'
@@ -7,7 +6,7 @@ export type UseCustomerSessionOptions = Record<string, unknown>
 
 export type UseCustomerSessionReturn = {
   loggedIn: boolean
-  query: QueryResult<CustomerTokenQuery, CustomerTokenQueryVariables>
+  query: useQuery.Result<CustomerTokenQuery, CustomerTokenQueryVariables>
 } & Partial<Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'>>
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/hooks/useGuestQuery.ts

@@ -1,16 +1,17 @@
-import type {
-  OperationVariables,
-  QueryHookOptions,
-  TypedDocumentNode,
-} from '@graphcommerce/graphql'
+import type { OperationVariables, TypedDocumentNode } from '@graphcommerce/graphql'
 import { useQuery } from '@graphcommerce/graphql'
+import type { useQuery as useQueryType } from '@apollo/client/react'
 import { useCustomerSession } from './useCustomerSession'
 
 /** Will only execute when the customer is not signed in. */
 export function useGuestQuery<Q, V extends OperationVariables>(
   document: TypedDocumentNode<Q, V>,
-  queryOptions: QueryHookOptions<Q, V> = {},
+  queryOptions?: Omit<useQueryType.Options<Q, V>, 'query'>,
 ) {
   const { token } = useCustomerSession()
-  return useQuery(document, { ...queryOptions, ssr: false, skip: queryOptions.skip || !!token })
+  return useQuery(document, {
+    ...queryOptions,
+    ssr: false,
+    skip: queryOptions?.skip || !!token,
+  } as useQueryType.Options<Q, V>)
 }

package/link/customerLink.ts

@@ -1,6 +1,12 @@
 import { globalApolloClient } from '@graphcommerce/graphql'
 import type { ApolloCache } from '@graphcommerce/graphql/apollo'
-import { ApolloLink, fromPromise, onError, setContext } from '@graphcommerce/graphql/apollo'
+import {
+  ApolloLink,
+  CombinedGraphQLErrors,
+  ErrorLink,
+  SetContextLink,
+} from '@graphcommerce/graphql/apollo'
+import { from, switchMap } from '@graphcommerce/graphql/rxjs'
 import { magentoVersion } from '@graphcommerce/next-config/config'
 import type { GraphQLFormattedError } from 'graphql'
 import type { NextRouter } from 'next/router'
@@ -11,7 +17,7 @@ export type PushRouter = Pick<NextRouter, 'push' | 'events' | 'locale'>
 
 declare module '@apollo/client' {
   interface DefaultContext {
-    cache?: ApolloCache<unknown>
+    cache?: ApolloCache
     headers?: Record<string, string>
   }
 }
@@ -45,31 +51,32 @@ export async function pushWithPromise(router: Pick<NextRouter, 'push' | 'events'
   })
 }
 
-const addTokenHeader = setContext((_, context) => {
-  if (!context.headers) context.headers = {}
+const addTokenHeader = new SetContextLink((prevContext) => {
+  const headers: Record<string, string> = { ...prevContext.headers }
 
   try {
-    const query = context.cache?.readQuery({ query: CustomerTokenDocument })
+    const query = prevContext.cache?.readQuery({ query: CustomerTokenDocument })
 
     if (query?.customerToken?.token && query?.customerToken?.valid !== false) {
-      context.headers.authorization = `Bearer ${query?.customerToken?.token}`
-      return context
+      headers.authorization = `Bearer ${query?.customerToken?.token}`
     }
-    return context
+    return { headers }
   } catch (error) {
-    return context
+    return { headers }
   }
 })
 
 const customerErrorLink = (router: PushRouter) =>
-  onError((context) => {
-    const { graphQLErrors, operation, forward } = context
+  new ErrorLink(({ error, operation, forward }) => {
     const client = globalApolloClient.current
     if (!client) return undefined
 
+    // Check if this is a GraphQL error
+    if (!CombinedGraphQLErrors.is(error)) return undefined
+
     const oldHeaders = operation.getContext().headers
 
-    const authError = graphQLErrors?.find(
+    const authError = error.errors.find(
       (err: GraphQLFormattedError) =>
         err.extensions?.category ===
         (magentoVersion >= 248 ? 'graphql-authentication' : 'graphql-authorization'),
@@ -99,25 +106,27 @@ const customerErrorLink = (router: PushRouter) =>
 
     const signInAgainPromise = pushWithPromise(router, '/account/signin')
 
-    return fromPromise(signInAgainPromise).flatMap(() => {
-      const tokenQuery = client.cache.readQuery({ query: CustomerTokenDocument })
-
-      if (tokenQuery?.customerToken?.valid) {
-        // Customer is reauthenticated, retrying request.
-        operation.setContext({
-          headers: {
-            ...oldHeaders,
-            authorization: `Bearer ${tokenQuery?.customerToken?.token}`,
-          },
-        })
-      } else {
-        // Customer has not reauthenticated, clearing all customer data.
-        signOut(client)
-      }
-
-      // retry the request, returning the new observable
-      return forward(operation)
-    })
+    return from(signInAgainPromise).pipe(
+      switchMap(() => {
+        const tokenQuery = client.cache.readQuery({ query: CustomerTokenDocument })
+
+        if (tokenQuery?.customerToken?.valid) {
+          // Customer is reauthenticated, retrying request.
+          operation.setContext({
+            headers: {
+              ...oldHeaders,
+              authorization: `Bearer ${tokenQuery?.customerToken?.token}`,
+            },
+          })
+        } else {
+          // Customer has not reauthenticated, clearing all customer data.
+          signOut(client)
+        }
+
+        // retry the request, returning the new observable
+        return forward(operation)
+      }),
+    )
   })
 
 export const customerLink = (router: PushRouter) =>

package/link/xMagentoCacheIdHeader.ts

@@ -1,5 +1,6 @@
 import type { DefaultContext } from '@graphcommerce/graphql'
 import { ApolloLink } from '@graphcommerce/graphql'
+import { map } from '@graphcommerce/graphql/rxjs'
 import { CustomerTokenDocument } from '../hooks'
 
 export const xMagentoCacheIdHeader = new ApolloLink((operation, forward) => {
@@ -11,28 +12,30 @@ export const xMagentoCacheIdHeader = new ApolloLink((operation, forward) => {
     return { ...context, headers: { ...context.headers, 'x-magento-cache-id': xMagentoCacheId } }
   })
 
-  return forward(operation).map((data) => {
-    const { cache } = operation.getContext()
-    if (!cache) return data
+  return forward(operation).pipe(
+    map((data) => {
+      const { cache } = operation.getContext()
+      if (!cache) return data
 
-    const xMagentoCacheId = (
-      data.extensions as { forwardedHeaders: Record<string, string> } | undefined
-    )?.forwardedHeaders?.['x-magento-cache-id']
+      const xMagentoCacheId = (
+        data.extensions as { forwardedHeaders: Record<string, string> } | undefined
+      )?.forwardedHeaders?.['x-magento-cache-id']
 
-    if (!xMagentoCacheId) return data
+      if (!xMagentoCacheId) return data
 
-    const tokenResult = cache.readQuery({ query: CustomerTokenDocument })
+      const tokenResult = cache.readQuery({ query: CustomerTokenDocument })
 
-    if (
-      !tokenResult?.customerToken ||
-      tokenResult.customerToken?.xMagentoCacheId === xMagentoCacheId
-    )
-      return data
+      if (
+        !tokenResult?.customerToken ||
+        tokenResult.customerToken?.xMagentoCacheId === xMagentoCacheId
+      )
+        return data
 
-    cache.writeQuery({
-      query: CustomerTokenDocument,
-      data: { customerToken: { ...tokenResult.customerToken, xMagentoCacheId } },
-    })
-    return data
-  })
+      cache.writeQuery({
+        query: CustomerTokenDocument,
+        data: { customerToken: { ...tokenResult.customerToken, xMagentoCacheId } },
+      })
+      return data
+    }),
+  )
 })

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.67",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -21,24 +21,24 @@
     "./plugins/magentoCustomerPrivateQueryContext": "./plugins/magentoCustomerPrivateQueryContext.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/framer-next-pages": "^10.0.0-canary.67",
-    "@graphcommerce/framer-utils": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/graphql-mesh": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/magento-graphql": "^10.0.0-canary.67",
-    "@graphcommerce/magento-store": "^10.0.0-canary.67",
-    "@graphcommerce/next-config": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.72",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.72",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/graphql-mesh": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/magento-graphql": "^10.0.0-canary.72",
+    "@graphcommerce/magento-store": "^10.0.0-canary.72",
+    "@graphcommerce/next-config": "^10.0.0-canary.72",
+    "@graphcommerce/next-ui": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "graphql": "^16.0.0",
     "next": "*",