@graphcommerce/magento-product-configurable 9.0.4-canary.10 → 9.0.4-canary.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.4-canary.12
+
+## 9.0.4-canary.11
+
+### Patch Changes
+
+- [#2485](https://github.com/graphcommerce-org/graphcommerce/pull/2485) [`8b8807b`](https://github.com/graphcommerce-org/graphcommerce/commit/8b8807b8e24f1dba78dd988dfdc21316c616274f) - Solve issue where the GetConfigurableOptionsSelection query would be executed even if the product wasn't a ConfigurableProduct. ([@paales](https://github.com/paales))
+
 ## 9.0.4-canary.10
 
 ## 9.0.4-canary.9

package/components/ConfigurableProductOptions/ConfigurableProductOption.tsx

@@ -39,6 +39,7 @@ export function ConfigurableProductOption(props: ConfigurableProductOptionProps)
     attribute_code,
     url_key,
     render,
+    __typename,
     ...other
   } = props
   const fieldName = `cartItems.${index}.selected_options.${optionIndex}` as const
@@ -55,7 +56,11 @@ export function ConfigurableProductOption(props: ConfigurableProductOptionProps)
     // .slice(0, optionIndex)
     .filter((o) => o !== selectedOption)
 
-  const { configured } = useConfigurableOptionsForSelection({ url_key, selectedOptions })
+  const { configured } = useConfigurableOptionsForSelection({
+    __typename,
+    url_key,
+    selectedOptions,
+  })
 
   const available =
     configured?.configurable_product_options_selection?.options_available_for_selection?.find(

package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

@@ -39,7 +39,7 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
     'values',
   ])
 
-  const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })
+  const { configured } = useConfigurableOptionsSelection({ ...product, index })
   const unavailable =
     configured &&
     (configured?.configurable_product_options_selection?.options_available_for_selection ?? [])
@@ -75,6 +75,7 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
           index={index}
           optionIndex={optionIndex}
           sx={sx}
+          __typename={product.__typename}
           url_key={product.url_key}
           {...other}
         />

package/graphql/UseConfigurableOptions.graphql

@@ -0,0 +1,4 @@
+fragment UseConfigurableOptions on ProductInterface {
+  __typename
+  url_key
+}

package/hooks/useConfigurableOptionsSelection.ts

@@ -4,20 +4,18 @@ import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
 import { findByTypename, nonNullable } from '@graphcommerce/next-ui'
 import { useWatch } from '@graphcommerce/react-hook-form'
 import { GetConfigurableOptionsSelectionDocument } from '../graphql/GetConfigurableOptionsSelection.gql'
-
-export type UseConfigurableOptionsSelection = { url_key?: string | null } & AddToCartItemSelector
+import type { UseConfigurableOptionsFragment } from '../graphql/UseConfigurableOptions.gql'
 
 type UseConfigurableOptionsForSelection = {
-  url_key?: string | null
   selectedOptions: string[]
-}
+} & UseConfigurableOptionsFragment
 
 export function useConfigurableOptionsForSelection(variables: UseConfigurableOptionsForSelection) {
-  const { url_key, selectedOptions } = variables
+  const { __typename, url_key, selectedOptions } = variables
 
   const selection = useQuery(GetConfigurableOptionsSelectionDocument, {
     variables: { urlKey: url_key ?? '', selectedOptions },
-    skip: !url_key,
+    skip: __typename !== 'ConfigurableProduct' || !url_key,
   })
 
   const configured = selection.error
@@ -29,15 +27,17 @@ export function useConfigurableOptionsForSelection(variables: UseConfigurableOpt
   return { ...selection, configured }
 }
 
+export type UseConfigurableOptionsSelection = UseConfigurableOptionsFragment & AddToCartItemSelector
+
 export function useConfigurableOptionsSelection(props: UseConfigurableOptionsSelection) {
-  const { url_key, index = 0 } = props
+  const { __typename, url_key, index = 0 } = props
 
   const { control } = useFormAddProductsToCart()
   const selectedOptions = (useWatch({ control, name: `cartItems.${index}.selected_options` }) ?? [])
     .filter(nonNullable)
     .filter(Boolean)
 
-  return useConfigurableOptionsForSelection({ url_key, selectedOptions })
+  return useConfigurableOptionsForSelection({ __typename, url_key, selectedOptions })
 }
 
 export function useConfigurableSelectedVariant(props: UseConfigurableOptionsSelection) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-configurable",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.4-canary.10",
+  "version": "9.0.4-canary.12",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,23 +12,23 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.4-canary.10",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.10",
-    "@graphcommerce/graphql": "^9.0.4-canary.10",
-    "@graphcommerce/graphql-mesh": "^9.0.4-canary.10",
-    "@graphcommerce/image": "^9.0.4-canary.10",
-    "@graphcommerce/lingui-next": "9.0.4-canary.10",
-    "@graphcommerce/magento-cart": "^9.0.4-canary.10",
-    "@graphcommerce/magento-cart-items": "^9.0.4-canary.10",
-    "@graphcommerce/magento-category": "^9.0.4-canary.10",
-    "@graphcommerce/magento-customer": "^9.0.4-canary.10",
-    "@graphcommerce/magento-product": "^9.0.4-canary.10",
-    "@graphcommerce/magento-product-simple": "^9.0.4-canary.10",
-    "@graphcommerce/magento-store": "^9.0.4-canary.10",
-    "@graphcommerce/next-ui": "^9.0.4-canary.10",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.10",
-    "@graphcommerce/react-hook-form": "^9.0.4-canary.10",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.10",
+    "@graphcommerce/ecommerce-ui": "^9.0.4-canary.12",
+    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.12",
+    "@graphcommerce/graphql": "^9.0.4-canary.12",
+    "@graphcommerce/graphql-mesh": "^9.0.4-canary.12",
+    "@graphcommerce/image": "^9.0.4-canary.12",
+    "@graphcommerce/lingui-next": "9.0.4-canary.12",
+    "@graphcommerce/magento-cart": "^9.0.4-canary.12",
+    "@graphcommerce/magento-cart-items": "^9.0.4-canary.12",
+    "@graphcommerce/magento-category": "^9.0.4-canary.12",
+    "@graphcommerce/magento-customer": "^9.0.4-canary.12",
+    "@graphcommerce/magento-product": "^9.0.4-canary.12",
+    "@graphcommerce/magento-product-simple": "^9.0.4-canary.12",
+    "@graphcommerce/magento-store": "^9.0.4-canary.12",
+    "@graphcommerce/next-ui": "^9.0.4-canary.12",
+    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.12",
+    "@graphcommerce/react-hook-form": "^9.0.4-canary.12",
+    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.12",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx

@@ -15,7 +15,7 @@ export function ProductPageDescription(
   props: PluginProps<ProductPageDescriptionProps & AddToCartItemSelector>,
 ) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
 
   return (
     <Prev

package/plugins/ConfigurableProductPage/ConfigurableProductPageGallery.tsx

@@ -1,5 +1,6 @@
 import type { AddToCartItemSelector, ProductPageGalleryProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { isTypename } from '@graphcommerce/next-ui'
 import { useConfigurableOptionsSelection } from '../../hooks'
 
 export const config: PluginConfig = {
@@ -13,7 +14,7 @@ export function ProductPageGallery(
 ) {
   const { Prev, product, index, ...rest } = props
 
-  const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })
+  const { configured } = useConfigurableOptionsSelection({ ...product, index })
   const media_gallery =
     (configured?.configurable_product_options_selection?.media_gallery?.length ?? 0) > 0 &&
     configured?.configurable_product_options_selection?.variant

package/plugins/ConfigurableProductPage/ConfigurableProductPageJsonLd.tsx

@@ -16,6 +16,6 @@ export function ProductPageJsonLd<T extends { '@type': string }, P extends JsonL
   props: PluginProps<ProductPageJsonLdProps<T, P>> & AddToCartItemSelector,
 ) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
   return <Prev product={(variant ?? product) as P} {...rest} />
 }

package/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx

@@ -16,7 +16,7 @@ export function ProductPageMeta(props: PluginProps<ProductPageMetaProps> & AddTo
   const { Prev, product, index, ...rest } = props
   const { replace, asPath } = useRouter()
 
-  const variant = useConfigurableSelectedVariant({ url_key: product?.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
 
   const isValidVariant = (variant?.url_rewrites ?? []).length > 0 && variant?.url_key
   const targetUrl = isValidVariant ? productLink(variant) : productLink(product)

package/plugins/ConfigurableProductPage/ConfigurableProductPageName.tsx

@@ -10,6 +10,6 @@ export const config: PluginConfig = {
 
 export function ProductPageName(props: PluginProps<ProductPageNameProps> & AddToCartItemSelector) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
   return <Prev product={variant ?? product} {...rest} />
 }

package/plugins/ConfigurableProductPage/ConfigurableProductPagePrice.tsx

@@ -11,7 +11,7 @@ export function ProductPagePrice(
   props: PluginProps<ProductPagePriceProps> & AddToCartItemSelector,
 ) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
 
   if (product.__typename !== 'ConfigurableProduct') return <Prev {...props} />
 

package/plugins/ConfigurableProductPage/ConfigurableProductPagePriceTiers.tsx

@@ -14,7 +14,7 @@ export function ProductPagePriceTiers(
   props: PluginProps<ProductPagePriceTiersProps> & AddToCartItemSelector,
 ) {
   const { Prev, product, index, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
+  const variant = useConfigurableSelectedVariant({ ...product, index })
 
   if (!variant || product.__typename !== 'ConfigurableProduct')
     return <Prev product={product} {...rest} />

package/plugins/ConfigurableProductPage/ConfigurableProductShortDescription.tsx

@@ -15,7 +15,7 @@ export function ProductShortDescription(
   props: PluginProps<ProductShortDescriptionProps> & AddToCartItemSelector,
 ) {
   const { Prev, product, ...rest } = props
-  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index: 0 })
+  const variant = useConfigurableSelectedVariant({ ...product, index: 0 })
 
   return (
     <Prev