@graphcommerce/magento-graphql 9.1.0-canary.49 → 9.1.0-canary.51

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 9.1.0-canary.51
+
+### Minor Changes
+
+- [#2537](https://github.com/graphcommerce-org/graphcommerce/pull/2537) [`958dcb6`](https://github.com/graphcommerce-org/graphcommerce/commit/958dcb62d5abb3427a38e2a4583897f3e2043cc4) - Intoduce a new Product-`uid` to solve an issue where cache normalization was not working properly on the frontend when viewing products with a differen curreny, etc.
+
+  Products now have a more detailed `uid` which will include the scope the product is retrieved from. For example: `NDg5MDM=?store=nl_NL&currencyCode=EUR`. This results in a better cache normalization in Apollo Client and allows for switching between scopes (store/currency/price views/accounts) without creating a broken cache state.
+
+  We have implemented this with a new resolver that rewrites the `uid` passed from Magento to the Mesh Resolver, and additing additonal data to the `uid` based on the headers passed from the client. This also requires each package to implement the `getPrivateQueryContextMesh` method to retrieve the current PrivateQuery context from the GraphQL request headers. ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#2537](https://github.com/graphcommerce-org/graphcommerce/pull/2537) [`3ebd5bb`](https://github.com/graphcommerce-org/graphcommerce/commit/3ebd5bbb9a63a9ee07c748173ed9f4a06ad9b04f) - Add flushMeasurePerf for product page ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.50
+
 ## 9.1.0-canary.49
 
 ## 9.1.0-canary.48

package/mesh/scopedUidResolver.ts

@@ -0,0 +1,33 @@
+/* eslint-disable arrow-body-style */
+import { fragments, getPrivateQueryContextMesh } from '@graphcommerce/graphql'
+import { type MeshContext, type Resolvers } from '@graphcommerce/graphql-mesh'
+import { storefrontFromContext } from '@graphcommerce/magento-store'
+import { storefrontConfigDefault } from '@graphcommerce/next-ui'
+
+function scopedUid(root: { uid: string } | { id: string }, args: unknown, context: MeshContext) {
+  const store = storefrontFromContext(context) ?? storefrontConfigDefault()
+  const privateContext = getPrivateQueryContextMesh(context)
+
+  const params = new URLSearchParams()
+  params.set('store', store.magentoStoreCode)
+
+  if (privateContext) {
+    Object.entries(privateContext).forEach(([key, value]) => {
+      if (Array.isArray(value))
+        value.forEach((v) => {
+          if (v) params.append(key, v)
+        })
+      else if (typeof value === 'string') params.set(key, value)
+      else if (typeof value === 'boolean') params.set(key, value.toString())
+    })
+  }
+
+  const id = 'uid' in root ? root.uid : root.id
+  return `${id}?${params.toString()}`
+}
+
+export const resolvers: Resolvers = {
+  ...Object.fromEntries(
+    fragments.possibleTypes.ProductInterface.map((type) => [type, { uid: scopedUid }]),
+  ),
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.49",
+  "version": "9.1.0-canary.51",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -13,10 +13,10 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.49",
-    "@graphcommerce/graphql": "^9.1.0-canary.49",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.49",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.49",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.51",
+    "@graphcommerce/graphql": "^9.1.0-canary.51",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.51",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.51",
     "graphql": "^16.0.0",
     "next": "*",
     "react": "^18.2.0",

package/plugins/magentoGraphqlConfig.ts

@@ -1,9 +1,6 @@
-import type {
-  dataIdFromObject as baseDataIdFromObject,
-  graphqlConfig as graphqlConfigType,
-} from '@graphcommerce/graphql'
+import type { graphqlConfig as graphqlConfigType } from '@graphcommerce/graphql'
 import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
-import { magentoDataIdFromObject, magentoTypePolicies } from '../typePolicies'
+import { magentoTypePolicies } from '../typePolicies'
 
 export const config: PluginConfig = {
   type: 'function',
@@ -14,12 +11,3 @@ export const graphqlConfig: FunctionPlugin<typeof graphqlConfigType> = (prev, co
   const results = prev(conf)
   return { ...results, policies: [magentoTypePolicies, ...results.policies] }
 }
-
-export const dataIdFromObject: FunctionPlugin<typeof baseDataIdFromObject> = (
-  prev,
-  object,
-  context,
-) => {
-  const results = prev(object, context)
-  return results ?? magentoDataIdFromObject(object, context)
-}

package/plugins/meshConfigAttrValue.ts

@@ -18,6 +18,7 @@ export const meshConfig: FunctionPlugin<typeof meshConfigBase> = (
         ...(baseConfig.additionalResolvers ?? []),
         '@graphcommerce/magento-graphql/mesh/customAttributeV2Resolver.ts',
         '@graphcommerce/magento-graphql/mesh/attributeValueResolver.ts',
+        '@graphcommerce/magento-graphql/mesh/scopedUidResolver.ts',
       ],
     },
     graphCommerceConfig,

package/typePolicies.ts

@@ -1,24 +1,5 @@
-import {
-  getPrivateQueryContext,
-  globalApolloClient,
-  type TypedTypePolicies,
-} from '@graphcommerce/graphql'
-import type { KeyFieldsFunction } from '@apollo/client/cache/inmemory/policies'
-
-/**
- * This method automatically creates a typePolicy for all types that have a `uid` field. Secondly,
- * it allows scoping of this value based on the current private context.
- */
-export const magentoDataIdFromObject: KeyFieldsFunction = (object) => {
-  const { uid, __typename } = object
-  const client = globalApolloClient.current
-
-  if (!uid || !__typename || typeof uid !== 'string' || !client?.cache) return ''
-
-  const ctx = getPrivateQueryContext(client)
-  const queryContext = ctx ? `@(${JSON.stringify(ctx)})` : ''
-  return `${__typename}:${uid}${queryContext}`
-}
+import type { TypedTypePolicies } from '@graphcommerce/graphql'
+import fragments from '@graphcommerce/graphql/generated/fragments.json'
 
 /**
  * By default we don't need to do anything for types with an `id` or without anything to identify.
@@ -51,8 +32,8 @@ export const magentoTypePolicies: TypedTypePolicies = {
   // BundleCartItem: { keyFields: ['uid'] },
   // BundleCreditMemoItem: { keyFields: ['id'] },
   // BundleInvoiceItem: { keyFields: ['id'] },
-  // BundleItem: { keyFields: ['uid'] },
-  // BundleItemOption: { keyFields: ['uid'] },
+  BundleItem: { keyFields: ['uid'] },
+  BundleItemOption: { keyFields: ['uid'] },
   // BundleOrderItem: { keyFields: ['id'] },
   // BundleProduct: { keyFields: ['uid'] },
   // BundleShipmentItem: { keyFields: ['id'] },
@@ -63,6 +44,7 @@ export const magentoTypePolicies: TypedTypePolicies = {
   // CartAddressRegion: { keyFields: false },
   // CartDiscount: { keyFields: false },
   // CartItemInterface: { keyFields: ['uid'] },
+  ...Object.fromEntries(fragments.possibleTypes.CartItemInterface.map((type) => [type, ['uid']])),
   // CartItemPrices: { keyFields: false },
   CartItemQuantity: { keyFields: ['cart_item_id'] },
   // CartItemSelectedOptionValuePrice: { keyFields: false },
@@ -70,6 +52,7 @@ export const magentoTypePolicies: TypedTypePolicies = {
   // CartTaxItem: { keyFields: false },
   // CartUserInputError: { keyFields: false },
   // CategoryInterface: { keyFields: ['uid'] },
+  ...Object.fromEntries(fragments.possibleTypes.CategoryInterface.map((type) => [type, ['uid']])),
   // CategoryProducts: { keyFields: false },
   // CategoryResult: { keyFields: false },
   // CategoryTree: { keyFields: ['uid'] },
@@ -80,12 +63,13 @@ export const magentoTypePolicies: TypedTypePolicies = {
   CmsPage: { keyFields: ['identifier'] },
   // ColorSwatchData: { keyFields: false },
   // ComparableAttribute: { keyFields: false },
-  // ComparableItem: { keyFields: ['uid'] },
-  // CompareList: { keyFields: ['uid'] },
+  ComparableItem: { keyFields: ['uid'] },
+  CompareList: { keyFields: ['uid'] },
   // ComplexTextValue: { keyFields: false },
-  // ConfigurableAttributeOption: { keyFields: ['uid'] },
+  ConfigurableAttributeOption: { keyFields: ['uid'] },
   // ConfigurableCartItem: { keyFields: ['uid'] },
   // ConfigurableOptionAvailableForSelection: { keyFields: false },
+  // ConfigurableProduct: { keyFields: ['uid'] },
   // ConfigurableProductOptions: { keyFields: ['uid'] },
   // ConfigurableProductOptionsSelection: { keyFields: false },
   // ConfigurableProductOptionsValues: { keyFields: ['uid'] },
@@ -102,9 +86,7 @@ export const magentoTypePolicies: TypedTypePolicies = {
   // CustomAttributeMetadata: { keyFields: [] },
   Customer: {
     keyFields: [],
-    fields: {
-      custom_attributes: { merge: (_, incoming) => incoming },
-    },
+    fields: { custom_attributes: { merge: (_, incoming) => incoming } },
   },
   // CustomerAddress: { keyFields: ['id'] },
   // CustomerAddressAttribute: { keyFields: false },
@@ -140,10 +122,10 @@ export const magentoTypePolicies: TypedTypePolicies = {
   // DownloadableCartItem: { keyFields: ['uid'] },
   // DownloadableCreditMemoItem: { keyFields: ['id'] },
   // DownloadableInvoiceItem: { keyFields: ['id'] },
-  // DownloadableItemsLinks: { keyFields: ['uid'] },
+  DownloadableItemsLinks: { keyFields: ['uid'] },
   // DownloadableOrderItem: { keyFields: ['id'] },
   // DownloadableProduct: { keyFields: ['uid'] },
-  // DownloadableProductLinks: { keyFields: ['uid'] },
+  DownloadableProductLinks: { keyFields: ['uid'] },
   // DownloadableProductSamples: { keyFields: ['id'] },
   // DownloadableWishlistItem: { keyFields: ['id'] },
   // EntityUrl: { keyFields: ['id'] },
@@ -168,7 +150,7 @@ export const magentoTypePolicies: TypedTypePolicies = {
   // LayerFilter: { keyFields: false },
   // LayerFilterItem: { keyFields: false },
   // LayerFilterItemInterface: { keyFields: false },
-  // MediaGalleryEntry: { keyFields: ['uid'] },
+  MediaGalleryEntry: { keyFields: ['uid'] },
   // MediaGalleryInterface: { keyFields: false },
   // Money: { keyFields: false },
   Order: { keyFields: ['order_number'] },
@@ -196,7 +178,8 @@ export const magentoTypePolicies: TypedTypePolicies = {
   // ProductAttribute: { keyFields: false },
   // ProductDiscount: { keyFields: false },
   // ProductImage: { keyFields: false },
-  // ProductInterface: { keyFields: ['uid'] }, // Handled by dataIdFromObject
+  // ProductInterface: { keyFields: ['uid'] },
+  ...Object.fromEntries(fragments.possibleTypes.ProductInterface.map((type) => [type, ['uid']])),
   // ProductLinks: { keyFields: false },
   // ProductLinksInterface: { keyFields: false },
   // ProductMediaGalleryEntriesContent: { keyFields: false },