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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
 ## 10.0.0-canary.68
 
 ### Major Changes

package/components/ApolloCustomerError/useAuthorizationErrorMasked.ts

@@ -1,9 +1,9 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import type { ErrorLike } from '@apollo/client'
 import { t } from '@lingui/core/macro'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 
-export function useAuthorizationErrorMasked(error?: ApolloError | null) {
+export function useAuthorizationErrorMasked(error?: ErrorLike | null) {
   const { token } = useCustomerSession()
 
   return graphqlErrorByCategory({

package/components/ContactForm/ContactForm.tsx

@@ -7,12 +7,13 @@ import {
 import { Button, Form, FormRow, MessageSnackbar } from '@graphcommerce/next-ui'
 import { FormPersist, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react/macro'
+import { useEffect } from 'react'
 import type { CustomerQuery } from '../../hooks'
 import { CustomerDocument, useCustomerQuery } from '../../hooks'
 import type { ContactUsMutationVariables } from './ContactUsMutation.gql'
 import { ContactUsDocument } from './ContactUsMutation.gql'
 
-function findTelephone(data: CustomerQuery): string | undefined {
+function findTelephone(data: Partial<CustomerQuery>): string | undefined {
   const { customer } = data
   if (!customer) return undefined
 
@@ -48,31 +49,33 @@ export function ContactForm() {
 
   const { control, formState, error, handleSubmit, setValue, getValues } = form
 
-  useCustomerQuery(CustomerDocument, {
-    onCompleted: (data) => {
-      if (!data.customer) return
-
-      const telephone = findTelephone(data)
-
-      if (!getValues('input.telephone') && telephone) {
-        setValue('input.telephone', telephone)
-      }
-
-      if (!getValues('input.email') && data.customer?.email) {
-        setValue('input.email', data.customer?.email)
-      }
-
-      if (!getValues('input.name') && data.customer) {
-        setValue(
-          'input.name',
-          `${data.customer?.firstname ?? ''} ${data.customer?.middlename ?? ''} ${data.customer?.lastname ?? ''}`.replaceAll(
-            '  ',
-            ' ',
-          ),
-        )
-      }
-    },
-  })
+  const customerQuery = useCustomerQuery(CustomerDocument)
+
+  // Handle customer data when it's loaded
+  useEffect(() => {
+    const data = customerQuery.data
+    if (!data?.customer) return
+
+    const telephone = findTelephone(data)
+
+    if (!getValues('input.telephone') && telephone) {
+      setValue('input.telephone', telephone)
+    }
+
+    if (!getValues('input.email') && data.customer?.email) {
+      setValue('input.email', data.customer?.email)
+    }
+
+    if (!getValues('input.name') && data.customer) {
+      setValue(
+        'input.name',
+        `${data.customer?.firstname ?? ''} ${data.customer?.middlename ?? ''} ${data.customer?.lastname ?? ''}`.replaceAll(
+          '  ',
+          ' ',
+        ),
+      )
+    }
+  }, [customerQuery.data, getValues, setValue])
 
   const submit = handleSubmit(() => {})
 

package/components/CustomerForms/useCustomerCreateForm.ts

@@ -6,7 +6,7 @@ import {
   type UseAttributesFormConfig,
 } from '@graphcommerce/magento-store'
 import { useFormGqlMutation, type UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
-import type { MutationHookOptions } from '@apollo/client'
+import type { useMutation } from '@apollo/client/react'
 import {
   UseCustomerCreateFormDocument,
   type UseCustomerCreateFormMutation,
@@ -46,7 +46,7 @@ export function useCustomerCreateForm(
     UseCustomerCreateFormMutation,
     CreateCustomerFormValues
   >,
-  mutationOptions?: MutationHookOptions<UseCustomerCreateFormMutation, CreateCustomerFormValues>,
+  mutationOptions?: useMutation.Options<UseCustomerCreateFormMutation, CreateCustomerFormValues>,
 ) {
   const attributes = useAttributesForm({
     formCode: 'customer_account_create',

package/components/CustomerForms/useCustomerUpdateForm.ts

@@ -7,7 +7,7 @@ import {
   type UseAttributesFormConfig,
 } from '@graphcommerce/magento-store'
 import { useFormGqlMutation, type UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
-import type { MutationHookOptions } from '@apollo/client'
+import type { useMutation } from '@apollo/client/react'
 import type { OmitDeep } from 'type-fest'
 import type { CustomerInfoFragment } from '../../hooks'
 import {
@@ -93,7 +93,7 @@ export function useCustomerUpdateForm(
     UseCustomerUpdateFormMutation,
     UpdateCustomerFormValues
   >,
-  mutationOptions?: MutationHookOptions<UseCustomerUpdateFormMutation, UpdateCustomerFormValues>,
+  mutationOptions?: useMutation.Options<UseCustomerUpdateFormMutation, UpdateCustomerFormValues>,
 ) {
   const { customer, ...attributeFormConfig } = config
   const attributes = useAttributesForm({

package/components/SignOutForm/signOut.ts

@@ -1,7 +1,7 @@
 import type { ApolloClient } from '@graphcommerce/graphql'
 import { removeCssFlag } from '@graphcommerce/next-ui'
 
-export function signOut(client: ApolloClient<object>) {
+export function signOut(client: ApolloClient) {
   removeCssFlag('private-query')
   globalThis?.sessionStorage?.clear()
   client.cache.evict({ fieldName: 'currentCartId' })

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.68",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -21,20 +21,20 @@
     "./plugins/magentoCustomerPrivateQueryContext": "./plugins/magentoCustomerPrivateQueryContext.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/framer-next-pages": "^10.0.0-canary.68",
-    "@graphcommerce/framer-utils": "^10.0.0-canary.68",
-    "@graphcommerce/graphql": "^10.0.0-canary.68",
-    "@graphcommerce/graphql-mesh": "^10.0.0-canary.68",
-    "@graphcommerce/image": "^10.0.0-canary.68",
-    "@graphcommerce/magento-graphql": "^10.0.0-canary.68",
-    "@graphcommerce/magento-store": "^10.0.0-canary.68",
-    "@graphcommerce/next-config": "^10.0.0-canary.68",
-    "@graphcommerce/next-ui": "^10.0.0-canary.68",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.68",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
+    "@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",