@graphcommerce/magento-product 9.1.0-canary.47 → 9.1.0-canary.49

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 9.1.0-canary.49
+
+### Patch Changes
+
+- [#2533](https://github.com/graphcommerce-org/graphcommerce/pull/2533) [`dc3be1d`](https://github.com/graphcommerce-org/graphcommerce/commit/dc3be1da43916b65b1d3d4170c09e63ad3818bac) - Solve issue when a user applies their first filter on a category page, a redundant GraphQL call would be made, even though the user was navigating to the `/c/[..url]` route. ([@paales](https://github.com/paales))
+
+- [#2533](https://github.com/graphcommerce-org/graphcommerce/pull/2533) [`45c2fbb`](https://github.com/graphcommerce-org/graphcommerce/commit/45c2fbbed55e3ba42f1ecc45e80039977b6ffe7c) - Solve issue where in some cases a second ProductList query was made because the category used an `eq` filter instead of an `in` filter. ([@paales](https://github.com/paales))
+
+- [#2533](https://github.com/graphcommerce-org/graphcommerce/pull/2533) [`88abcbf`](https://github.com/graphcommerce-org/graphcommerce/commit/88abcbf011b65b0cd1235e984f5d8306256bd518) - When loading the category/search page in the case that there are no filters applied, the amount or product related queries is reduced from 2 to 1 (ProductFilters is skipped). Pagination, sorting and search terms also do not affect this. When a filter is applied we fall back to the previous functionality and do a second query to retrieve the filters.
+
+  This did not matter when the categories/search pages were served by Magento as Magento would cache the result of the ProductFilters query. When the the catalog is served by an external service like Algolia this might be a problem.
+
+  Implementation details: When filters are applied (e.g., filtering by color:blue), the ProductList query only returns products matching that filter, which means other filter options (like other colors) are excluded from the filter options. This behavior is expected since those other options wouldn't return any products. However, when no filters are applied, the ProductList query returns all products along with all available filter options, eliminating the need for a separate ProductFilters query. ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.48
+
 ## 9.1.0-canary.47
 
 ## 9.1.0-canary.46

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -142,7 +142,7 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
       submit,
       appliedAggregations,
       filterTypes,
-      aggregations,
+      aggregations: aggregations ?? appliedAggregations,
     }
     globalFormContextRef.current = ctx
     return ctx

package/components/ProductListFilters/FilterEqualType.tsx

@@ -13,6 +13,7 @@ import {
 import type { SetRequired } from 'type-fest'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
+import { hasUserFilterActive } from '../ProductListItems/hasUserFilterActive'
 import { ProductListLink } from '../ProductListLink/ProductListLink'
 import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
@@ -55,7 +56,7 @@ export function FilterEqualType(props: FilterEqualTypeProps) {
     in: [],
   }
 
-  const anyFilterActive = Object.keys(params?.filters ?? {}).length >= 1
+  const anyFilterActive = hasUserFilterActive(params)
 
   const currentLabels =
     options

package/components/ProductListItems/filteredProductList.tsx

@@ -47,7 +47,7 @@ export function parseParams(
       return undefined
     }
     if (param === 'category_uid') {
-      productListParams.filters.category_uid = { eq: value }
+      productListParams.filters.category_uid = { in: [value] }
       return undefined
     }
 

package/components/ProductListItems/hasUserFilterActive.ts

@@ -0,0 +1,22 @@
+import type { ProductListQueryVariables } from '../ProductList/ProductList.gql'
+import type { ProductListParams } from './filterTypes'
+
+/**
+ * Checks if a user defined filter is active.
+ *
+ * 1. Engine never counts as an active filter, so strip that.
+ * 2. For the category page the category_uid is not a filter, strip that.
+ */
+export function hasUserFilterActive(
+  params: ProductListParams | ProductListQueryVariables | undefined,
+) {
+  if (!params?.filters) return false
+
+  const skipKeys = ['engine']
+  const filterKeys = Object.keys(params.filters)
+
+  const isCategory = typeof params.search !== 'string' && params.filters.category_uid
+  if (isCategory) skipKeys.push('category_uid')
+
+  return filterKeys.filter((k) => !skipKeys.includes(k)).length > 0
+}

package/components/ProductListItems/productListApplyCategoryDefaults.ts

@@ -24,8 +24,8 @@ export function useProductListApplyCategoryDefaults(
     else if (defaultSort) variables.sort = { [defaultSort]: 'ASC' }
   }
 
-  if (!variables.filters.category_uid?.in?.[0]) {
-    variables.filters.category_uid = { eq: category?.uid }
+  if (!variables.filters.category_uid?.in?.[0] && category?.uid) {
+    variables.filters.category_uid = { in: [category.uid] }
   }
 
   return variables
@@ -62,7 +62,8 @@ export async function productListApplyCategoryDefaults(
   }
 
   if (!newParams.filters.category_uid?.in?.[0]) {
-    newParams.filters.category_uid = { eq: (await category)?.uid }
+    const uid = (await category)?.uid
+    if (uid) newParams.filters.category_uid = { in: [uid] }
   }
 
   return newParams

package/components/index.ts

@@ -8,19 +8,23 @@ export * from './ProductListCount/ProductListCount'
 export * from './ProductListFilters'
 export * from './ProductListFiltersContainer/ProductListFiltersContainer'
 export * from './ProductListItem'
+export * from './ProductListItems/CategoryDefault.gql'
 export * from './ProductListItems/filteredProductList'
 export * from './ProductListItems/filterTypes'
 export * from './ProductListItems/getFilterTypes'
+export * from './ProductListItems/hasUserFilterActive'
+export * from './ProductListItems/productListApplyCategoryDefaults'
 export * from './ProductListItems/ProductListItems.gql'
 export * from './ProductListItems/ProductListItemsBase'
-export * from './ProductListItems/productListApplyCategoryDefaults'
-export * from './ProductListItems/CategoryDefault.gql'
 export * from './ProductListItems/ProductListParamsProvider'
 export * from './ProductListItems/renderer'
 export * from './ProductListLink/ProductListLink'
 export * from './ProductListPagination/ProductListPagination'
+export * from './ProductListPrice'
 export * from './ProductListSort'
-export * from './ProductPageName'
+export * from './ProductListSuggestions/ProductListSearchSuggestion.gql'
+export * from './ProductListSuggestions/ProductListSuggestions'
+export * from './ProductListSuggestions/ProductListSuggestions.gql'
 export * from './ProductPage/ProductPageAddToCartRow'
 export * from './ProductPageBreadcrumb'
 export * from './ProductPageCategory/productPageCategory'
@@ -28,6 +32,7 @@ export * from './ProductPageDescription/ProductPageDescription'
 export * from './ProductPageGallery/ProductPageGallery'
 export * from './ProductPageMeta/ProductPageMeta'
 export * from './ProductPageMeta/ProductPageMeta.gql'
+export * from './ProductPageName'
 export * from './ProductPagePrice'
 export * from './ProductRelated/RelatedProducts.gql'
 export * from './ProductScroller/ProductScroller'
@@ -40,7 +45,4 @@ export * from './ProductStaticPaths/getProductStaticPaths'
 export * from './ProductStaticPaths/getSitemapPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
 export * from './ProductWeight/ProductWeight'
-export * from './ProductListPrice'
-export * from './ProductListSuggestions/ProductListSuggestions'
-export * from './ProductListSuggestions/ProductListSuggestions.gql'
-export * from './ProductListSuggestions/ProductListSearchSuggestion.gql'
+

package/hooks/useProductList.ts

@@ -9,7 +9,7 @@ import type {
   ProductFiltersQuery,
   ProductFiltersQueryVariables,
 } from '../components'
-import { ProductFiltersDocument } from '../components'
+import { hasUserFilterActive, ProductFiltersDocument } from '../components'
 import type {
   ProductListQuery,
   ProductListQueryVariables,
@@ -106,7 +106,10 @@ export function useProductList<
   const result = usePrivateQuery(ProductListDocument, { variables, skip: !shallow }, props)
   const filters = usePrivateQuery(
     ProductFiltersDocument,
-    { variables: categoryDefaultsToProductListFilters(variables), skip: !shallow },
+    {
+      variables: categoryDefaultsToProductListFilters(variables),
+      skip: !shallow || !hasUserFilterActive(params),
+    },
     props,
   )
 
@@ -122,8 +125,8 @@ export function useProductList<
         category,
       )
 
-      const shallowNow =
-        JSON.stringify(vars.filters?.category_uid) === JSON.stringify(params?.filters.category_uid)
+      const shallowNow = hasUserFilterActive(params) === hasUserFilterActive(vars)
+
       await prefetchProductList(
         vars,
         categoryDefaultsToProductListFilters(vars),

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.47",
+  "version": "9.1.0-canary.49",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.47",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.47",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.47",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.47",
-    "@graphcommerce/graphql": "^9.1.0-canary.47",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.47",
-    "@graphcommerce/image": "^9.1.0-canary.47",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.47",
-    "@graphcommerce/magento-store": "^9.1.0-canary.47",
-    "@graphcommerce/next-ui": "^9.1.0-canary.47",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.47",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.47",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.49",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.49",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.49",
+    "@graphcommerce/framer-scroller": "^9.1.0-canary.49",
+    "@graphcommerce/graphql": "^9.1.0-canary.49",
+    "@graphcommerce/graphql-mesh": "^9.1.0-canary.49",
+    "@graphcommerce/image": "^9.1.0-canary.49",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.49",
+    "@graphcommerce/magento-store": "^9.1.0-canary.49",
+    "@graphcommerce/next-ui": "^9.1.0-canary.49",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.49",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.49",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",