Fetch product images, standardize API fetch using Spree SDK

framework/spree/utils/getMediaGallery.ts

@@ -0,0 +1,30 @@
+// Based on https://github.com/spark-solutions/spree2vuestorefront/blob/d88d85ae1bcd2ec99b13b81cd2e3c25600a0216e/src/utils/index.ts
+
+import type { ProductImage } from '@commerce/types/product'
+import type { SpreeProductImage } from '../types'
+
+const getMediaGallery = (
+  images: SpreeProductImage[],
+  getImageUrl: (
+    image: SpreeProductImage,
+    minWidth: number,
+    minHeight: number
+  ) => string | null
+) => {
+  return images.reduce<ProductImage[]>((productImages, _, imageIndex) => {
+    const imageUrl = getImageUrl(images[imageIndex], 9001, 9001)
+
+    if (imageUrl) {
+      return [
+        ...productImages,
+        {
+          url: imageUrl,
+        },
+      ]
+    }
+
+    return productImages
+  }, [])
+}
+
+export default getMediaGallery