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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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
+
 ## 10.0.0-canary.67
 
 ## 10.0.0-canary.66

package/components/AttributeForm/preloadAttributesForm.ts

@@ -1,10 +1,7 @@
-import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
 import { AttributesFormDocument } from '../../graphql'
 import type { CustomAttributeFormCode } from './useAttributesForm'
 
-export function preloadAttributesForm(
-  client: ApolloClient<NormalizedCacheObject>,
-  formCode: CustomAttributeFormCode,
-) {
+export function preloadAttributesForm(client: ApolloClient, formCode: CustomAttributeFormCode) {
   return client.query({ query: AttributesFormDocument, variables: { formCode } })
 }

package/components/PriceModifiers/PriceModifiersListChildItem.tsx

@@ -23,7 +23,6 @@ export function PriceModifierListChildItem(props: PriceModifierListChildItemProp
       <Box className={classes.label} sx={{ color }}>
         {label}
       </Box>
-
       {(quantity > 1 || secondary) && (
         <Box className={classes.quantity} sx={{ color: 'text.secondary', whiteSpace: 'nowrap' }}>
           {quantity > 1 && (
@@ -34,7 +33,6 @@ export function PriceModifierListChildItem(props: PriceModifierListChildItemProp
           {secondary}
         </Box>
       )}
-
       {amount !== 0 && amount && (
         <Box
           className={classes.amount}

package/components/StoreSwitcher/StoreSwitcherList.tsx

@@ -52,7 +52,7 @@ export function StoreSwitcherList(props: StoreSwitcherListProps) {
             color='inherit'
             className={classes.listItem}
             sx={(theme) => ({
-              borderTop: `1px solid ${theme.palette.divider}`,
+              borderTop: `1px solid ${theme.vars.palette.divider}`,
               cursor: 'pointer',
             })}
           >

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-store",
   "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": {
@@ -19,19 +19,19 @@
     "./mesh/resolvers.ts": "./mesh/resolvers.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^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/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^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-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/next-ui": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^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",
     "next": "*",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"

package/plugins/magentoStoreGraphqlConfig.ts

@@ -1,4 +1,4 @@
-import { setContext, type graphqlConfig as graphqlConfigType } from '@graphcommerce/graphql'
+import { SetContextLink, type graphqlConfig as graphqlConfigType } from '@graphcommerce/graphql'
 import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
 import { cookie } from '@graphcommerce/next-ui'
 
@@ -14,22 +14,22 @@ export const graphqlConfig: FunctionPlugin<typeof graphqlConfigType> = (prev, co
     ...results,
     links: [
       ...results.links,
-      setContext((_, context) => {
-        if (!context.headers) context.headers = {}
-        if (!context.headers.store) {
-          context.headers.store = conf.storefront.magentoStoreCode
+      new SetContextLink((prevContext) => {
+        const headers: Record<string, string> = { ...prevContext.headers }
+
+        if (!headers.store) {
+          headers.store = conf.storefront.magentoStoreCode
         }
 
         const contentCurrency = cookie('Magento-Content-Currency')
-        if (contentCurrency && typeof context.headers['content-currency'] === 'undefined')
-          context.headers['content-currency'] = contentCurrency
+        if (contentCurrency && typeof headers['content-currency'] === 'undefined')
+          headers['content-currency'] = contentCurrency
 
         if (conf.preview) {
           // To disable caching from the backend, we provide a bogus cache ID.
-          context.headers['x-magento-cache-id'] =
-            `random-cache-id${Math.random().toString(36).slice(2)}`
+          headers['x-magento-cache-id'] = `random-cache-id${Math.random().toString(36).slice(2)}`
         }
-        return context
+        return { headers }
       }),
     ],
   }

package/test/apolloClientStore.fixture.ts

@@ -7,7 +7,7 @@ import { test as base } from '@playwright/test'
 import { localeToStore } from '../utils/localeToStore'
 
 type ApolloClientStoreTest = {
-  apolloClient: ApolloClient<NormalizedCacheObject>
+  apolloClient: ApolloClient
 }
 
 const test = base.extend<ApolloClientStoreTest>({

package/utils/redirectOrNotFound.ts

@@ -1,5 +1,5 @@
 import type { ParsedUrlQuery } from 'querystring'
-import type { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
 import { flushMeasurePerf } from '@graphcommerce/graphql'
 import type { ProductInterfaceResolvers } from '@graphcommerce/graphql-mesh'
 import fragments from '@graphcommerce/graphql/generated/fragments.json'
@@ -64,8 +64,10 @@ const redirect = (from: string, to: string, permanent: boolean, locale?: string)
 }
 
 export async function redirectOrNotFound(
-  client: ApolloClient<NormalizedCacheObject>,
-  config: Promise<ApolloQueryResult<StoreConfigQuery>> | ApolloQueryResult<StoreConfigQuery>,
+  client: ApolloClient,
+  config:
+    | Promise<ApolloClient.QueryResult<StoreConfigQuery>>
+    | ApolloClient.QueryResult<StoreConfigQuery>,
   params?: ParsedUrlQuery,
   locale?: string,
 ): RedirectOr404Return {
@@ -76,7 +78,8 @@ export async function redirectOrNotFound(
 
   try {
     // Get the configured suffixes from the store config
-    const { product_url_suffix, category_url_suffix } = (await config).data.storeConfig ?? {}
+    const configResult = await config
+    const { product_url_suffix, category_url_suffix } = configResult.data?.storeConfig ?? {}
 
     const candidates = new Set([from])