Merge pull request #188 from vtex-apps/fix/recommended-hook-error

Fix/related products hook error
vtex-apps · Oct 4, 2019 · 01f23b7 · 01f23b7
2 parents 3293c9f + 21c6c5b
commit 01f23b7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Inconsistent hook call on RelatedProducts shelf.
 
 ## [1.31.0] - 2019-10-03
 ### Added

diff --git a/react/RelatedProducts.js b/react/RelatedProducts.js
@@ -27,22 +27,30 @@ const RelatedProducts = ({
   productList,
   recommendation: cmsRecommendation,
 }) => {
+  const { isMobile } = useDevice()
+
   const productContext = useProduct()
 
   const productId = path(['product', 'productId'], productQuery) || path(['product', 'productId'], productContext)
 
-  if (!productId) {
-    return null
-  }
-  const recommendation = fixRecommendation(cmsRecommendation)
+  const recommendation = productId ? fixRecommendation(cmsRecommendation) : null
   const variables = useMemo(
-    () => ({
-      identifier: { field: 'id', value: productId },
-      type: recommendation,
-    }),
+    () => {
+      if (!productId) {
+        return null
+      }
+
+      return {
+        identifier: { field: 'id', value: productId },
+        type: recommendation,
+      }
+    },
     [productId, recommendation]
   )
-  const { isMobile } = useDevice()
+
+  if (!productId) {
+    return null
+  }
 
   return (
     <Query