@graphcommerce/magento-cart 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/hooks/useAssignCurrentCartId.ts

@@ -6,7 +6,7 @@ import { CurrentCartIdDocument } from './CurrentCartId.gql'
 
 export const CART_ID_COOKIE = 'cart'
 
-export function writeCartId(cache: ApolloCache<object>, id: string | null = null) {
+export function writeCartId(cache: ApolloCache, id: string | null = null) {
   cache.writeQuery({
     query: CurrentCartIdDocument,
     data: { currentCartId: { __typename: 'CurrentCartId', locked: false, id } },
@@ -14,11 +14,11 @@ export function writeCartId(cache: ApolloCache<object>, id: string | null = null
   })
 }
 
-export function readCartId(cache: ApolloCache<object>) {
+export function readCartId(cache: ApolloCache) {
   return cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId
 }
 
-export function cartLock(cache: ApolloCache<object>, locked: boolean) {
+export function cartLock(cache: ApolloCache, locked: boolean) {
   const currentCartId = cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId
   if (currentCartId?.id && currentCartId.locked !== locked) {
     cache.writeQuery({

package/hooks/useCartQuery.ts

@@ -1,10 +1,23 @@
-import type { QueryHookOptions, TypedDocumentNode } from '@graphcommerce/graphql'
-import { ApolloError, useQuery } from '@graphcommerce/graphql'
+import type {
+  OperationVariables,
+  TypedDocumentNode,
+  WatchQueryFetchPolicy,
+} from '@graphcommerce/graphql'
+import { useQuery } from '@graphcommerce/graphql'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
+import type { useQuery as useQueryType } from '@apollo/client/react'
 import { GraphQLError } from 'graphql'
 import { useRouter } from 'next/router'
 import { useCartShouldLoginToContinue } from './useCartPermissions'
 import { useCurrentCartId } from './useCurrentCartId'
 
+type CartQueryOptions<Q, V extends OperationVariables> = Omit<
+  useQueryType.Options<Q, V>,
+  'variables'
+> & {
+  variables?: Omit<V, 'cartId'>
+}
+
 /**
  * Requires the query to have a `$cartId: String!` argument. It will automatically inject the
  * currently active cart_id.
@@ -15,12 +28,10 @@ import { useCurrentCartId } from './useCurrentCartId'
  * const { data } = useCartQuery(CartFabQueryDocument)
  * ```
  */
-export function useCartQuery<Q, V extends { cartId: string; [index: string]: unknown }>(
-  document: TypedDocumentNode<Q, V>,
-  options: QueryHookOptions<Q, Omit<V, 'cartId'>> = {},
-) {
-  const { ...queryOptions } = options
-
+export function useCartQuery<
+  Q,
+  V extends OperationVariables & { cartId: string; [index: string]: unknown },
+>(document: TypedDocumentNode<Q, V>, options?: CartQueryOptions<Q, V>) {
   const router = useRouter()
   const { currentCartId, locked } = useCurrentCartId()
 
@@ -29,23 +40,27 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
   const cartId = usingUrl ? urlCartId : currentCartId
   const shouldLoginToContinue = useCartShouldLoginToContinue()
 
-  if (usingUrl || locked) queryOptions.fetchPolicy = 'cache-only'
+  let fetchPolicy: WatchQueryFetchPolicy | undefined = options?.fetchPolicy
+  let returnPartialData: boolean | undefined = options?.returnPartialData
 
-  if (usingUrl && typeof queryOptions.returnPartialData === 'undefined')
-    queryOptions.returnPartialData = true
+  if (usingUrl || locked) fetchPolicy = 'cache-only'
+  if (usingUrl && typeof returnPartialData === 'undefined') returnPartialData = true
 
-  queryOptions.variables = { cartId, ...options?.variables } as V
+  const variables = { cartId, ...options?.variables } as V
 
   const query = useQuery(document, {
-    ...(queryOptions as QueryHookOptions<Q, V>),
-    skip: queryOptions.skip || !cartId || shouldLoginToContinue,
+    ...options,
+    fetchPolicy,
+    returnPartialData,
+    variables,
+    skip: options?.skip || !cartId || shouldLoginToContinue,
   })
 
-  if (shouldLoginToContinue && !queryOptions?.skip) {
+  if (shouldLoginToContinue && !options?.skip) {
     return {
       ...query,
-      error: new ApolloError({
-        graphQLErrors: [
+      error: new CombinedGraphQLErrors({
+        errors: [
           new GraphQLError('Action can not be performed by the current user', {
             extensions: { category: 'graphql-authorization' },
           }),

package/hooks/useCurrentCartId.ts

@@ -1,4 +1,3 @@
-import type { QueryHookOptions } from '@graphcommerce/graphql'
 import { useQuery } from '@graphcommerce/graphql'
 import type { CurrentCartIdQuery, CurrentCartIdQueryVariables } from './CurrentCartId.gql'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'
@@ -6,8 +5,8 @@ import { CurrentCartIdDocument } from './CurrentCartId.gql'
 export function useCurrentCartId<
   Q extends CurrentCartIdQuery,
   V extends CurrentCartIdQueryVariables,
->(options: QueryHookOptions<Q, V> = {}) {
-  const queryResults = useQuery<Q, V>(CurrentCartIdDocument, options)
+>(options: Partial<useQuery.Options<Q, V>> = {}) {
+  const queryResults = useQuery<Q, V>(CurrentCartIdDocument, options as useQuery.Options<Q, V>)
 
   return {
     currentCartId: queryResults.data?.currentCartId?.id || '',

package/hooks/useFormGqlMutationCart.ts

@@ -1,5 +1,9 @@
-import type { MutationHookOptions, TypedDocumentNode } from '@graphcommerce/graphql'
-import { ApolloError, useApolloClient } from '@graphcommerce/graphql'
+import {
+  CombinedGraphQLErrors,
+  TypedDocumentNode,
+  useApolloClient,
+  useMutation,
+} from '@graphcommerce/graphql'
 import type {
   UseFormGqlMutationReturn,
   UseFormGraphQlOptions,
@@ -18,7 +22,7 @@ export function useFormGqlMutationCart<
 >(
   document: TypedDocumentNode<Q, V>,
   options: UseFormGraphQlOptions<Q, V> & { submitWhileLocked?: boolean } = {},
-  operationOptions?: MutationHookOptions<Q, V>,
+  operationOptions?: useMutation.Options<NoInfer<Q>, NoInfer<V>>,
 ): UseFormGqlMutationReturn<Q, V> {
   const cartIdCreate = useCartIdCreate()
   const cartIdFromContext = useCartIdContext()
@@ -63,8 +67,8 @@ export function useFormGqlMutationCart<
   if (shouldLoginToContinue && result.formState.isSubmitted && shouldBlockOperation) {
     return {
       ...result,
-      error: new ApolloError({
-        graphQLErrors: [
+      error: new CombinedGraphQLErrors({
+        errors: [
           new GraphQLError('Action can not be performed by the current user', {
             extensions: { category: 'graphql-authorization' },
           }),

package/link/cartLink.ts

@@ -1,6 +1,6 @@
-import type { Operation } from '@graphcommerce/graphql'
-import { fromPromise, globalApolloClient } from '@graphcommerce/graphql'
-import { ApolloLink, Observable, onError } from '@graphcommerce/graphql/apollo'
+import { globalApolloClient } from '@graphcommerce/graphql'
+import { ApolloLink, CombinedGraphQLErrors, ErrorLink } from '@graphcommerce/graphql/apollo'
+import { filter, from, of, switchMap } from '@graphcommerce/graphql/rxjs'
 import { CustomerTokenDocument, getCustomerAccountCanSignIn } from '@graphcommerce/magento-customer'
 import type { PushRouter } from '@graphcommerce/magento-customer/link/customerLink'
 import { pushWithPromise } from '@graphcommerce/magento-customer/link/customerLink'
@@ -14,8 +14,8 @@ import { CreateEmptyCartDocument } from '../hooks/CreateEmptyCart.gql'
 import { getCartEnabledForUser } from '../utils'
 import { isProtectedCartOperation } from './isProtectedCartOperation'
 
-type CartOperation = Operation & { variables: { cartId: string } }
-function isCartOperation(operation: Operation): operation is CartOperation {
+type CartOperation = ApolloLink.Operation & { variables: { cartId: string } }
+function isCartOperation(operation: ApolloLink.Operation): operation is CartOperation {
   return typeof operation.variables.cartId === 'string'
 }
 
@@ -24,13 +24,16 @@ function errorIsIncluded(errorPath: readonly (string | number)[] | undefined, ke
   return keys.some((value) => value === error)
 }
 
-const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
+const cartErrorLink = new ErrorLink(({ error, operation, forward }) => {
   if (!globalApolloClient.current) return undefined
 
   const client = globalApolloClient.current
   const { cache } = client
 
-  if (!isCartOperation(operation) || !graphQLErrors) return undefined
+  // Check if this is a GraphQL error
+  if (!CombinedGraphQLErrors.is(error)) return undefined
+
+  if (!isCartOperation(operation)) return undefined
 
   const isErrorCategory = (err: GraphQLFormattedError, category: ErrorCategory) =>
     err.extensions?.category === category
@@ -54,7 +57,7 @@ const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
       // 'applyCouponToCart',
       // 'removeCouponFromCart'
     ])
-  const cartErr = graphQLErrors.find((err) => isNoSuchEntityError(err))
+  const cartErr = error.errors.find((err) => isNoSuchEntityError(err))
 
   if (!cartErr) return undefined
 
@@ -63,9 +66,9 @@ const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
     if (urlParams.get('cart_id')) return forward(operation)
   }
 
-  return fromPromise(client?.mutate({ mutation: CreateEmptyCartDocument }))
-    .filter((value) => Boolean(value))
-    .flatMap((cartData) => {
+  return from(client?.mutate({ mutation: CreateEmptyCartDocument })).pipe(
+    filter((value) => Boolean(value)),
+    switchMap((cartData) => {
       const cartId = cartData.data?.createEmptyCart
       if (!cartId) return forward(operation)
 
@@ -74,7 +77,8 @@ const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
 
       // retry the request, returning the new observable
       return forward(operation)
-    })
+    }),
+  )
 })
 
 const cartPermissionLink = (router: PushRouter) =>
@@ -82,7 +86,7 @@ const cartPermissionLink = (router: PushRouter) =>
     const { locale } = router
     const { cache } = operation.getContext()
 
-    if (!isProtectedCartOperation(operation.operationName)) return forward(operation)
+    if (!isProtectedCartOperation(operation.operationName ?? '')) return forward(operation)
 
     const check = () => Boolean(cache?.readQuery({ query: CustomerTokenDocument }))
     if (getCartEnabledForUser(locale, check)) return forward(operation)
@@ -95,33 +99,35 @@ const cartPermissionLink = (router: PushRouter) =>
     const oldHeaders = operation.getContext().headers
     const signInAgainPromise = pushWithPromise(router, '/account/signin')
 
-    return fromPromise(signInAgainPromise).flatMap(() => {
-      const tokenQuery = cache?.readQuery({ query: CustomerTokenDocument })
-
-      if (tokenQuery?.customerToken?.valid) {
-        // Customer is authenticated, retrying request.
-        operation.setContext({
-          headers: {
-            ...oldHeaders,
-            authorization: `Bearer ${tokenQuery?.customerToken?.token}`,
-          },
+    return from(signInAgainPromise).pipe(
+      switchMap(() => {
+        const tokenQuery = cache?.readQuery({ query: CustomerTokenDocument })
+
+        if (tokenQuery?.customerToken?.valid) {
+          // Customer is authenticated, retrying request.
+          operation.setContext({
+            headers: {
+              ...oldHeaders,
+              authorization: `Bearer ${tokenQuery?.customerToken?.token}`,
+            },
+          })
+          return forward(operation)
+        }
+
+        return of({
+          data: null,
+          errors: [
+            new GraphQLError(t`Please login to add products to your cart`, {
+              extensions: { category: 'graphql-authorization' },
+            }),
+          ],
         })
-        return forward(operation)
-      }
-
-      return Observable.of({
-        data: null,
-        errors: [
-          new GraphQLError(t`Please login to add products to your cart`, {
-            extensions: { category: 'graphql-authorization' },
-          }),
-        ],
-      })
-    })
+      }),
+    )
   })
 
 export const cartLink = (router: PushRouter) => {
-  const links = [cartErrorLink]
+  const links: ApolloLink[] = [cartErrorLink]
 
   if (!(permissions?.cart === 'ENABLED')) {
     links.push(cartPermissionLink(router))

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "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": {
@@ -20,20 +20,20 @@
     "./plugins/useSignInFormMergeCart": "./plugins/useSignInFormMergeCart.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-scroller": "^10.0.0-canary.68",
-    "@graphcommerce/framer-utils": "^10.0.0-canary.68",
-    "@graphcommerce/graphql": "^10.0.0-canary.68",
-    "@graphcommerce/image": "^10.0.0-canary.68",
-    "@graphcommerce/magento-customer": "^10.0.0-canary.68",
-    "@graphcommerce/magento-graphql": "^10.0.0-canary.68",
-    "@graphcommerce/magento-store": "^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-scroller": "^10.0.0-canary.72",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/magento-customer": "^10.0.0-canary.72",
+    "@graphcommerce/magento-graphql": "^10.0.0-canary.72",
+    "@graphcommerce/magento-store": "^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",

package/plugins/useSignInFormMergeCart.ts

@@ -22,12 +22,12 @@ export const useSignInForm: FunctionPlugin<typeof useSignInFormType> = (useSignI
 
       cartLock(client.cache, true)
 
-      const destinationCartId = (
-        await client.query({
-          query: CustomerCartDocument,
-          fetchPolicy: 'network-only',
-        })
-      ).data.customerCart.id
+      const customerCartResult = await client.query({
+        query: CustomerCartDocument,
+        fetchPolicy: 'network-only',
+      })
+      const destinationCartId = customerCartResult.data?.customerCart?.id
+      if (!destinationCartId) return
 
       try {
         const sourceCartId = readCartId(client.cache)?.id

package/test/fillCartAgreementsForm.ts

@@ -3,10 +3,7 @@ import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql
 import type { Page } from '@playwright/test'
 import { CartAgreementsDocument } from '../components/CartAgreementsForm/CartAgreements.gql'
 
-export async function fillCartAgreementsForm(
-  page: Page,
-  client: ApolloClient<NormalizedCacheObject>,
-) {
+export async function fillCartAgreementsForm(page: Page, client: ApolloClient) {
   const res = (await client.query({ query: CartAgreementsDocument })).data
 
   for await (const agreement of res.checkoutAgreements ?? []) {

package/typePolicies.ts

@@ -1,8 +1,4 @@
-import type {
-  ApolloCache,
-  NormalizedCacheObject,
-  StrictTypedTypePolicies,
-} from '@graphcommerce/graphql'
+import type { ApolloCache, StrictTypedTypePolicies } from '@graphcommerce/graphql'
 import type { CartPrices, QuerycartArgs, ShippingCartAddress } from '@graphcommerce/graphql-mesh'
 import { CartFabDocument } from './components/CartFab/CartFab.gql'
 import { readCartId, writeCartId } from './hooks'
@@ -57,10 +53,7 @@ export const cartTypePolicies: StrictTypedTypePolicies = {
   },
 }
 
-export const migrateCart = (
-  oldCache: ApolloCache<NormalizedCacheObject>,
-  newCache: ApolloCache<NormalizedCacheObject>,
-) => {
+export const migrateCart = (oldCache: ApolloCache, newCache: ApolloCache) => {
   const cartId = readCartId(oldCache)?.id
 
   if (cartId) {