Remove lossy parameters from GraphQL queries and enable LQIP in client

Copilot · bookernath · Copilot · commit e90a2a77d956 · 2025-08-24T03:22:44.000Z
Co-authored-by: bookernath &lt;8922457+bookernath@users.noreply.github.com&gt;
diff --git a/core/app/[locale]/(default)/(faceted)/fetch-compare-products.ts b/core/app/[locale]/(default)/(faceted)/fetch-compare-products.ts
@@ -29,7 +29,7 @@ const CompareProductsQuery = graphql(`
             entityId
             name
             defaultImage {
-              url: urlTemplate(lossy: true)
+              url: urlTemplate
               altText
             }
             path
diff --git a/core/app/[locale]/(default)/account/orders/fragment.ts b/core/app/[locale]/(default)/account/orders/fragment.ts
@@ -11,7 +11,7 @@ export const OrderItemFragment = graphql(`
       path
     }
     image {
-      url: urlTemplate(lossy: true)
+      url: urlTemplate
       altText
     }
     subTotalListPrice {
diff --git a/core/app/[locale]/(default)/blog/[blogId]/page-data.ts b/core/app/[locale]/(default)/blog/[blogId]/page-data.ts
@@ -21,7 +21,7 @@ const BlogPageQuery = graphql(`
             tags
             thumbnailImage {
               altText
-              url: urlTemplate(lossy: true)
+              url: urlTemplate
             }
             seo {
               pageTitle
diff --git a/core/app/[locale]/(default)/blog/page-data.ts b/core/app/[locale]/(default)/blog/page-data.ts
@@ -45,7 +45,7 @@ const BlogPostsPageQuery = graphql(
                     utc
                   }
                   thumbnailImage {
-                    url: urlTemplate(lossy: true)
+                    url: urlTemplate
                     altText
                   }
                 }
diff --git a/core/app/[locale]/(default)/cart/page-data.ts b/core/app/[locale]/(default)/cart/page-data.ts
@@ -12,7 +12,7 @@ export const PhysicalItemFragment = graphql(`
     brand
     sku
     image {
-      url: urlTemplate(lossy: true)
+      url: urlTemplate
     }
     entityId
     quantity
@@ -71,7 +71,7 @@ export const DigitalItemFragment = graphql(`
     brand
     sku
     image {
-      url: urlTemplate(lossy: true)
+      url: urlTemplate
     }
     entityId
     quantity
diff --git a/core/app/[locale]/(default)/product/[slug]/_components/product-schema/fragment.ts b/core/app/[locale]/(default)/product/[slug]/_components/product-schema/fragment.ts
@@ -17,7 +17,7 @@ export const ProductSchemaFragment = graphql(`
       numberOfReviews
     }
     defaultImage {
-      url: urlTemplate(lossy: true)
+      url: urlTemplate
     }
     condition
     availabilityV2 {
diff --git a/core/app/[locale]/(default)/product/[slug]/page-data.ts b/core/app/[locale]/(default)/product/[slug]/page-data.ts
@@ -25,13 +25,13 @@ const MultipleChoiceFieldFragment = graphql(`
           ... on SwatchOptionValue {
             __typename
             hexColors
-            imageUrl(lossy: true, width: 40)
+            imageUrl(width: 40)
           }
           ... on ProductPickListOptionValue {
             __typename
             defaultImage {
               altText
-              url: urlTemplate(lossy: true)
+              url: urlTemplate
             }
           }
         }
@@ -140,7 +140,7 @@ const ProductPageMetadataQuery = graphql(`
         name
         defaultImage {
           altText
-          url: urlTemplate(lossy: true)
+          url: urlTemplate
         }
         seo {
           pageTitle
@@ -218,14 +218,14 @@ const StreamableProductQuery = graphql(
             edges {
               node {
                 altText
-                url: urlTemplate(lossy: true)
+                url: urlTemplate
                 isDefault
               }
             }
           }
           defaultImage {
             altText
-            url: urlTemplate(lossy: true)
+            url: urlTemplate
           }
           sku
           weight {
diff --git a/core/client/index.ts b/core/client/index.ts
@@ -33,6 +33,10 @@ export const client = createClient({
   logger:
     (process.env.NODE_ENV !== 'production' && process.env.CLIENT_LOGGER !== 'false') ||
     process.env.CLIENT_LOGGER === 'true',
+  imageTransforms: {
+    enableLossy: true,
+    lossyQuality: 30,
+  },
   getChannelId: async (defaultChannelId: string) => {
     const locale = await getLocale();
 
diff --git a/core/components/footer/fragment.ts b/core/components/footer/fragment.ts
@@ -19,7 +19,7 @@ export const FooterFragment = graphql(`
         }
         ... on StoreImageLogo {
           image {
-            url: urlTemplate(lossy: true)
+            url: urlTemplate
             altText
           }
         }
diff --git a/core/components/header/fragment.ts b/core/components/header/fragment.ts
@@ -11,7 +11,7 @@ export const HeaderFragment = graphql(`
         }
         ... on StoreImageLogo {
           image {
-            url: urlTemplate(lossy: true)
+            url: urlTemplate
             altText
           }
         }
diff --git a/core/components/product-card/fragment.ts b/core/components/product-card/fragment.ts
@@ -8,7 +8,7 @@ export const ProductCardFragment = graphql(
       name
       defaultImage {
         altText
-        url: urlTemplate(lossy: true)
+        url: urlTemplate
       }
       path
       brand {
diff --git a/core/components/store-logo/fragment.ts b/core/components/store-logo/fragment.ts
@@ -10,7 +10,7 @@ export const StoreLogoFragment = graphql(`
       }
       ... on StoreImageLogo {
         image {
-          url: urlTemplate(lossy: true)
+          url: urlTemplate
           altText
         }
       }
diff --git a/packages/client/src/client.ts b/packages/client/src/client.ts
@@ -165,12 +165,12 @@ class Client<FetcherRequestInit extends RequestInit = RequestInit> {
 
     const result = (await response.json()) as BigCommerceResponse<TResult>;
 
-    const { errors, ...data } = result;
-
     // Apply image transformations if configured
-    const transformedData = this.config.imageTransforms 
-      ? { ...data, data: transformImageUrls(data.data, this.config.imageTransforms) }
-      : data;
+    const transformedResult = this.config.imageTransforms && result.data
+      ? { ...result, data: transformImageUrls(result.data, this.config.imageTransforms) }
+      : result;
+
+    const { errors, ...data } = transformedResult;
 
     // If errorPolicy is 'none', we throw an error if there are any errors
     if (errorPolicy === 'none' && errors) {
@@ -193,11 +193,11 @@ class Client<FetcherRequestInit extends RequestInit = RequestInit> {
 
     // If errorPolicy is 'ignore', we return the data and ignore the errors
     if (errorPolicy === 'ignore') {
-      return transformedData;
+      return data;
     }
 
     // If errorPolicy is 'all', we return the errors with the data
-    return { ...transformedData, errors };
+    return { ...data, errors };
   }
 
   async fetchSitemapIndex(channelId?: string): Promise<string> {
diff --git a/packages/client/test-runner.js b/packages/client/test-runner.js
diff --git a/packages/client/test-simple.js b/packages/client/test-simple.js

Original file line number	Diff line number	Diff line change
@@ -29,7 +29,7 @@ const CompareProductsQuery = graphql(`
`29`	`29`	`entityId`
`30`	`30`	`name`
`31`	`31`	`defaultImage {`
`32`		`- url: urlTemplate(lossy: true)`
	`32`	`+ url: urlTemplate`
`33`	`33`	`altText`
`34`	`34`	`}`
`35`	`35`	`path`
Original file line number	Diff line number	Diff line change
@@ -11,7 +11,7 @@ export const OrderItemFragment = graphql(`
`11`	`11`	`path`
`12`	`12`	`}`
`13`	`13`	`image {`
`14`		`- url: urlTemplate(lossy: true)`
	`14`	`+ url: urlTemplate`
`15`	`15`	`altText`
`16`	`16`	`}`
`17`	`17`	`subTotalListPrice {`
Original file line number	Diff line number	Diff line change
@@ -21,7 +21,7 @@ const BlogPageQuery = graphql(`
`21`	`21`	`tags`
`22`	`22`	`thumbnailImage {`
`23`	`23`	`altText`
`24`		`- url: urlTemplate(lossy: true)`
	`24`	`+ url: urlTemplate`
`25`	`25`	`}`
`26`	`26`	`seo {`
`27`	`27`	`pageTitle`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ const BlogPostsPageQuery = graphql(`
`45`	`45`	`utc`
`46`	`46`	`}`
`47`	`47`	`thumbnailImage {`
`48`		`- url: urlTemplate(lossy: true)`
	`48`	`+ url: urlTemplate`
`49`	`49`	`altText`
`50`	`50`	`}`
`51`	`51`	`}`
Original file line number	Diff line number	Diff line change
@@ -17,7 +17,7 @@ export const ProductSchemaFragment = graphql(`
`17`	`17`	`numberOfReviews`
`18`	`18`	`}`
`19`	`19`	`defaultImage {`
`20`		`- url: urlTemplate(lossy: true)`
	`20`	`+ url: urlTemplate`
`21`	`21`	`}`
`22`	`22`	`condition`
`23`	`23`	`availabilityV2 {`
Original file line number	Diff line number	Diff line change
@@ -25,13 +25,13 @@ const MultipleChoiceFieldFragment = graphql(`
`25`	`25`	`... on SwatchOptionValue {`
`26`	`26`	`__typename`
`27`	`27`	`hexColors`
`28`		`- imageUrl(lossy: true, width: 40)`
	`28`	`+ imageUrl(width: 40)`
`29`	`29`	`}`
`30`	`30`	`... on ProductPickListOptionValue {`
`31`	`31`	`__typename`
`32`	`32`	`defaultImage {`
`33`	`33`	`altText`
`34`		`- url: urlTemplate(lossy: true)`
	`34`	`+ url: urlTemplate`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`	`}`
@@ -140,7 +140,7 @@ const ProductPageMetadataQuery = graphql(`
`140`	`140`	`name`
`141`	`141`	`defaultImage {`
`142`	`142`	`altText`
`143`		`- url: urlTemplate(lossy: true)`
	`143`	`+ url: urlTemplate`
`144`	`144`	`}`
`145`	`145`	`seo {`
`146`	`146`	`pageTitle`
`@@ -218,14 +218,14 @@ const StreamableProductQuery = graphql(`
`218`	`218`	`edges {`
`219`	`219`	`node {`
`220`	`220`	`altText`
`221`		`- url: urlTemplate(lossy: true)`
	`221`	`+ url: urlTemplate`
`222`	`222`	`isDefault`
`223`	`223`	`}`
`224`	`224`	`}`
`225`	`225`	`}`
`226`	`226`	`defaultImage {`
`227`	`227`	`altText`
`228`		`- url: urlTemplate(lossy: true)`
	`228`	`+ url: urlTemplate`
`229`	`229`	`}`
`230`	`230`	`sku`
`231`	`231`	`weight {`
Original file line number	Diff line number	Diff line change
@@ -19,7 +19,7 @@ export const FooterFragment = graphql(`
`19`	`19`	`}`
`20`	`20`	`... on StoreImageLogo {`
`21`	`21`	`image {`
`22`		`- url: urlTemplate(lossy: true)`
	`22`	`+ url: urlTemplate`
`23`	`23`	`altText`
`24`	`24`	`}`
`25`	`25`	`}`
Original file line number	Diff line number	Diff line change
@@ -11,7 +11,7 @@ export const HeaderFragment = graphql(`
`11`	`11`	`}`
`12`	`12`	`... on StoreImageLogo {`
`13`	`13`	`image {`
`14`		`- url: urlTemplate(lossy: true)`
	`14`	`+ url: urlTemplate`
`15`	`15`	`altText`
`16`	`16`	`}`
`17`	`17`	`}`