Check that FeatuedCollection collection is defined (#1373)

add changeset check for collection before rendering it
Shopify · Sep 25, 2023 · 06da557 · 06da557
1 parent 1be1e40
commit 06da557
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/polite-vans-deny.md b/.changeset/polite-vans-deny.md
@@ -0,0 +1,6 @@
+---
+'@shopify/cli-hydrogen': patch
+'@shopify/create-hydrogen': patch
+---
+
+Add check to render collection images when available
diff --git a/templates/skeleton/app/routes/_index.tsx b/templates/skeleton/app/routes/_index.tsx
@@ -40,7 +40,8 @@ function FeaturedCollection({
 }: {
   collection: FeaturedCollectionFragment;
 }) {
-  const image = collection.image;
+  if (!collection) return null;
+  const image = collection?.image;
   return (
     <Link
       className="featured-collection"

diff --git a/templates/skeleton/app/routes/collections._index.tsx b/templates/skeleton/app/routes/collections._index.tsx
@@ -66,7 +66,7 @@ function CollectionItem({
       to={`/collections/${collection.handle}`}
       prefetch="intent"
     >
-      {collection.image && (
+      {collection?.image && (
         <Image
           alt={collection.image.altText || collection.title}
           aspectRatio="1/1"