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

package/CHANGELOG.md

@@ -1,5 +1,143 @@
 # Change Log
 
+## 10.0.0
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
+- [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
+
+  This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
+
+- [#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))
+
+### Minor Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`20703bc`](https://github.com/graphcommerce-org/graphcommerce/commit/20703bc5c453fb7ee61eb4350e207e84a749bf5e) - Magento 2.4.7: Implemented the `customer_account_create` and `customer_account_edit` forms using the `attributeForm` query for the registration page and customer information form. The forms respect the settings configured in the 'Customer Configuration section'. It allows configuration for `prefix`, `middlename`, `suffix`,`dob`, `gender` and other fields. This also makes the frontend compatible with Adobe Commerce's Customer Attributes module. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`30f9371`](https://github.com/graphcommerce-org/graphcommerce/commit/30f9371503959b990c65058a88be6f61b4859140) - Added support for viewing Invoices/Shipments and Credit Memo's ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`0cb3ace`](https://github.com/graphcommerce-org/graphcommerce/commit/0cb3aceb09967493ecdd5040446447ff32cc3f43) - Created a AccountDashboardQueryFragment instead of only a query to allow for adding customerDownloadableProducts to the dashboard query ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`427833d`](https://github.com/graphcommerce-org/graphcommerce/commit/427833d3fa46ec6096853bdc3dfd81321df6e63b) - Forward address field props ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`c1f04dc`](https://github.com/graphcommerce-org/graphcommerce/commit/c1f04dcb4ddd621361e6c930fb42afae0aabe9f9) - Migrate to default OrderItem resolver and remove useOrderCardItemImages as OrderItem now returns a product. Add a custom resolver for 2.4.5 and 2.4.6 that implements the functionality for older versions. ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`c1f04dc`](https://github.com/graphcommerce-org/graphcommerce/commit/c1f04dcb4ddd621361e6c930fb42afae0aabe9f9) - Created a refactored the AccountOrders page and refactored the OrderCard. ([@paales](https://github.com/paales))
+
+- [#2540](https://github.com/graphcommerce-org/graphcommerce/pull/2540) [`36e2bac`](https://github.com/graphcommerce-org/graphcommerce/commit/36e2bacb4fe765ce1fcd24dc36736e90bb17a7dc) - Add billingAddress permission (EDITABLE | READONLY) that controls whether the end user can update their billing address in the account section and checkout. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`db56933`](https://github.com/graphcommerce-org/graphcommerce/commit/db569336dddd3e955ff0b5b00cafa25079f1adee) - Implemented order sorting for account overview and account list and implement custom resolver for Magento 2.4.5 (which is slow but works). ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`6cb4815`](https://github.com/graphcommerce-org/graphcommerce/commit/6cb4815a0faf4cc2f60c13d9384e3a96b6bdb2bb) - Deleting an account will now require reauthentication and moved the menu item to the Authentication section ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`db56933`](https://github.com/graphcommerce-org/graphcommerce/commit/db569336dddd3e955ff0b5b00cafa25079f1adee) - Use OrderStateLabel in my account instead of OrderStateLabelInline and deprecate that one. ([@paales](https://github.com/paales))
+
+- [#2524](https://github.com/graphcommerce-org/graphcommerce/pull/2524) [`dcc46aa`](https://github.com/graphcommerce-org/graphcommerce/commit/dcc46aae34f5eda6a633f472289ac4488ac96492) - Solve issue where the user is getting a 400 error when logging in because the password is not being sent. The password field was disabled before the form was submitted, causing the password not to be sent. ([@paales](https://github.com/paales))
+
+- [#2553](https://github.com/graphcommerce-org/graphcommerce/pull/2553) [`66ba029`](https://github.com/graphcommerce-org/graphcommerce/commit/66ba029d2cc9dee6f8ff8c92a628d4fc0cf4d309) - Unset token when on magento 248 to prevent repeated graphql-authentication errors ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`dc387da`](https://github.com/graphcommerce-org/graphcommerce/commit/dc387da4c32585c251fe9dec90aa010e2a435df5) - OrderTotals/OrderDetails now only renders addres information if available ([@paales](https://github.com/paales))
+
+- [#2529](https://github.com/graphcommerce-org/graphcommerce/pull/2529) [`b331f4d`](https://github.com/graphcommerce-org/graphcommerce/commit/b331f4d060c1385569fbbe1592ac245832de55bc) - Remove all usages of the NoSsr component as the GraphQL layer already handles this. ([@paales](https://github.com/paales))
+
+- [`5ca6fb9`](https://github.com/graphcommerce-org/graphcommerce/commit/5ca6fb94f6f275210c77493d05bad7c1620ff5a3) - When a user reorders their cart without interacting with their cart previously a new cart wouldn't be created. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`2409514`](https://github.com/graphcommerce-org/graphcommerce/commit/240951428ac0bdc11649f4190b6d51c004680b34) - Order/Invoice/CreditMemo and Shipment views ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`183d8dd`](https://github.com/graphcommerce-org/graphcommerce/commit/183d8ddef6059f07ffe585b0f05a51731b12b371) - Remove odd nonNullable that is also available in @graphcommmerce/next-ui ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`623e993`](https://github.com/graphcommerce-org/graphcommerce/commit/623e993579b05e053d2d2f29684649cd4f4586de) - `<WaitForCustomer />` now accepts all props of the FullPageMessage ([@paales](https://github.com/paales))
+
+## 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",
   "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",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0",
+    "@graphcommerce/framer-next-pages": "^10.0.0",
+    "@graphcommerce/framer-utils": "^10.0.0",
+    "@graphcommerce/graphql": "^10.0.0",
+    "@graphcommerce/graphql-mesh": "^10.0.0",
+    "@graphcommerce/image": "^10.0.0",
+    "@graphcommerce/magento-graphql": "^10.0.0",
+    "@graphcommerce/magento-store": "^10.0.0",
+    "@graphcommerce/next-config": "^10.0.0",
+    "@graphcommerce/next-ui": "^10.0.0",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0",
+    "@graphcommerce/react-hook-form": "^10.0.0",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",