Graphql transforms for thumbnails

Author: markmur

sample/@types/index.d.ts

@@ -26,6 +26,7 @@ export interface ShopifyProduct {
     id: string;
     altText: string;
     url: string;
+    thumbnailUrl: string;
   }>;
   variants: Edges<ProductVariant>;
 }
@@ -41,6 +42,7 @@ export interface CartItem {
     width: number;
     height: number;
     url: string;
+    thumbnailUrl: string;
     altText: string;
   };
 }

sample/src/hooks/useShopify.ts

@@ -46,6 +46,7 @@ const productFragment = gql`
       width
       height
       url
+      thumbnailUrl: url(transform: {maxWidth: 80, maxHeight: 80})
     }
   }
 
@@ -95,6 +96,7 @@ const PRODUCTS_QUERY = gql`
                 width
                 height
                 url
+                thumbnailUrl: url(transform: {maxWidth: 150, maxHeight: 150})
               }
             }
           }

sample/src/screens/CartScreen.tsx

@@ -203,13 +203,15 @@ function CartItem({
         ...styles.productItem,
         ...(loading ? styles.productItemLoading : {}),
       }}>
-      {item.merchandise.image?.url && (
+      {item.merchandise.image?.thumbnailUrl && (
         <Image
           resizeMethod="resize"
           resizeMode="cover"
           style={styles.productImage}
           alt={item.merchandise.image?.altText}
-          source={{uri: item.merchandise.image?.url}}
+          source={{
+            uri: item.merchandise.image?.thumbnailUrl,
+          }}
         />
       )}
       <View style={styles.productText}>

sample/src/screens/CatalogScreen.tsx

@@ -150,7 +150,9 @@ function Product({
           resizeMode="cover"
           style={styles.productImage}
           alt={image?.altText}
-          source={{uri: image?.url}}
+          source={{
+            uri: image.thumbnailUrl,
+          }}
         />
       )}
       <View style={styles.productText}>

sample/src/screens/ProductDetailsScreen.tsx

@@ -97,7 +97,9 @@ function ProductDetails({
           resizeMode="cover"
           style={styles.productImage}
           alt={image?.altText}
-          source={{uri: image?.url}}
+          source={{
+            uri: image.thumbnailUrl,
+          }}
         />
       )}
       <View style={styles.productText}>

sample/src/utils.ts

@@ -73,61 +73,6 @@ export function currency(amount?: string, currency?: string): string {
   }
 }
 
-/**
- * Optimizes a Shopify image URL by requesting a specific size
- * This significantly reduces bandwidth and improves loading times
- *
- * @param url - Original Shopify CDN image URL
- * @param size - Desired image dimensions
- * @param scale - Pixel density multiplier (default: 2 for retina displays)
- * @returns Optimized image URL with size parameters
- *
- * @example For product thumbnails
- * getOptimizedImageUrl(imageUrl, {width: 150, height: 150})
- *
- * @example For product detail images
- * getOptimizedImageUrl(imageUrl, {width: 400, height: 400})
- *
- * @example For cart item thumbnails
- * getOptimizedImageUrl(imageUrl, {width: 80, height: 80})
- */
-export function getOptimizedImageUrl(
-  url: string | undefined,
-  size: {width: number; height: number},
-  scale: number = 2,
-): string | undefined {
-  if (!url) {
-    return undefined;
-  }
-
-  try {
-    // Calculate actual dimensions for device pixel density
-    const width = size.width * scale;
-    const height = size.height * scale;
-
-    // Shopify CDN image transformation pattern:
-    // Original: https://cdn.shopify.com/s/files/1/0001/0002/products/image.jpg
-    // Resized:  https://cdn.shopify.com/s/files/1/0001/0002/products/image_600x600.jpg
-
-    if (url.includes('cdn.shopify.com')) {
-      // Remove any existing size parameters
-      const cleanUrl = url.replace(/_\d+x\d+(\.\w+)/, '$1');
-
-      // Insert new size parameters before file extension
-      const lastDot = cleanUrl.lastIndexOf('.');
-      if (lastDot > -1) {
-        return `${cleanUrl.slice(0, lastDot)}_${width}x${height}${cleanUrl.slice(lastDot)}`;
-      }
-    }
-
-    // Return original URL if not a Shopify CDN image
-    return url;
-  } catch {
-    // Return original URL if transformation fails
-    return url;
-  }
-}
-
 export function debugLog(message: string, data?: any) {
   if (__DEV__) {
     console.log(message, data || '');