fix(hygraph): support new hygraph asset system (#1321)

docs/content/3.providers/hygraph.md

@@ -16,8 +16,7 @@ To use this provider you just need to specify the base URL of your project.
 export default defineNuxtConfig({
   image: {
     hygraph: {
-      // If not filled out, the provider will add this as a default.
-      baseURL: "https://media.graphassets.com",
+      baseURL: "",
     },
   },
 });
@@ -30,7 +29,7 @@ All the default modifiers from [Hygraph's documentation](https://hygraph.com/doc
 ```vue
 <NuxtImg
   provider="hygraph"
-  src="https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb"
+  src="https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue"
   height="512"
   width="512"
   fit="max"

playground/nuxt.config.ts

@@ -109,7 +109,7 @@ export default defineNuxtConfig({
       baseURL: 'https://demo.sirv.com'
     },
     hygraph: {
-      baseURL: 'https://media.graphassets.com'
+      baseURL: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/'
     },
     weserv: {
       baseURL: '/'

playground/providers.ts

@@ -1072,20 +1072,20 @@ export const providers: Provider[] = [
     name: 'hygraph',
     samples: [
       {
-        src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb',
+        src: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue',
         width: 500,
         height: 500,
         fit: 'crop',
         quality: 90
       },
       {
-        src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb',
+        src: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue',
         width: 500,
         fit: 'max',
         format: 'auto_image'
       },
       {
-        src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb',
+        src: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue',
         width: 300,
         height: 300,
         fit: 'clip',

src/runtime/providers/hygraph.ts

@@ -13,18 +13,18 @@ export function getImageFormat (format?: string) {
   let result = 'auto_image'
 
   if (format && format !== 'auto_image') {
-    result = `output=format:${format === 'jpeg' ? 'jpg' : format}`
+    result = `output=format:${format}`
   }
 
   return result
 }
 
-export function optimizeHygraphImage (baseurl: string, url: string, optimizations: ImageOptimizations) {
-  baseurl = baseurl.replace(/\/+$/, '')
-  const imageId = url.split(`${baseurl}/`)[1]
+export function optimizeHygraphImage (baseURL: string, url: string, optimizations: ImageOptimizations) {
+  baseURL = baseURL.replace(/\/+$/, '')
+  const imageId = url.split(`${baseURL}/`)[1]
   const imageFormat = getImageFormat(optimizations.format)
   const optimBase = 'resize'
-  const quality = optimizations.quality ? `quality=value:${optimizations.quality}/compress/` : ''
+  const quality = optimizations.quality ? `quality=value:${optimizations.quality}/compress=metadata:true/` : ''
 
   const optimList = []
   for (const [key, value] of Object.entries(optimizations)) {
@@ -38,14 +38,14 @@ export function optimizeHygraphImage (baseurl: string, url: string, optimization
   }
 
   const optim = `${optimBase}=${optimList.join(',')}`
-  const result = joinURL(baseurl, imageFormat, optim, quality, imageId)
+  const result = joinURL(baseURL, optim, quality, imageFormat, imageId)
 
   return result
 }
 
 export const getImage: ProviderGetImage = (
   src,
-  { modifiers = {}, baseurl } = {}
+  { modifiers = {}, baseURL } = {}
 ) => {
   const {
     width,
@@ -55,11 +55,11 @@ export const getImage: ProviderGetImage = (
     quality
   } = modifiers
 
-  if (!baseurl) {
-    baseurl = 'https://media.graphassets.com'
+  if (!baseURL) {
+    throw new Error('No Hygraph image base URL provided.')
   }
 
   return {
-    url: optimizeHygraphImage(baseurl, src, { width, height, fit, format, quality })
+    url: optimizeHygraphImage(baseURL, src, { width, height, fit, format, quality })
   }
 }

test/e2e/__snapshots__/no-ssr.test.ts.snap

@@ -194,17 +194,17 @@ exports[`browser (ssr: false) > gumlet should render images 2`] = `
 
 exports[`browser (ssr: false) > hygraph should render images 1`] = `
 [
-  "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb",
-  "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb",
-  "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/quality=value:90/compress=metadata:true/auto_image/cltsrex89477t08unlckqx9ue",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue",
 ]
 `;
 
 exports[`browser (ssr: false) > hygraph should render images 2`] = `
 [
-  "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb",
-  "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb",
-  "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/quality=value:90/compress=metadata:true/auto_image/cltsrex89477t08unlckqx9ue",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue",
 ]
 `;
 

test/e2e/__snapshots__/ssr.test.ts.snap

@@ -194,17 +194,17 @@ exports[`browser (ssr: true) > gumlet should render images 2`] = `
 
 exports[`browser (ssr: true) > hygraph should render images 1`] = `
 [
-  "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb",
-  "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb",
-  "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/quality=value:90/compress=metadata:true/auto_image/cltsrex89477t08unlckqx9ue",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue",
 ]
 `;
 
 exports[`browser (ssr: true) > hygraph should render images 2`] = `
 [
-  "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb",
-  "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb",
-  "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/quality=value:90/compress=metadata:true/auto_image/cltsrex89477t08unlckqx9ue",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue",
+  "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue",
 ]
 `;
 

test/providers.ts

@@ -30,7 +30,7 @@ export const images = [
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/' },
     weserv: { url: 'https://wsrv.nl/?filename=test.png&we&url=https://my-website.com/test.png' },
     sirv: { url: 'https://demo.sirv.com/test.png' },
-    hygraph: { url: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb' },
+    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue' },
     caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg' },
     bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net' }
   },
@@ -65,7 +65,7 @@ export const images = [
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x/' },
     weserv: { url: 'https://wsrv.nl/?filename=test.png&we&w=200&url=https://my-website.com/test.png' },
     sirv: { url: 'https://demo.sirv.com/test.png?w=200' },
-    hygraph: { url: 'https://media.graphassets.com/auto_image/resize=width:200/JL6e2yJERUyQtTiZIzPb' },
+    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200/auto_image/cltsrex89477t08unlckqx9ue' },
     caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?w=200' },
     bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net?width=200' }
   },
@@ -100,7 +100,7 @@ export const images = [
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/x200/' },
     weserv: { url: 'https://wsrv.nl/?filename=test.png&we&h=200&url=https://my-website.com/test.png' },
     sirv: { url: 'https://demo.sirv.com/test.png?h=200' },
-    hygraph: { url: 'https://media.graphassets.com/auto_image/resize=height:200/JL6e2yJERUyQtTiZIzPb' },
+    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=height:200/auto_image/cltsrex89477t08unlckqx9ue' },
     caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?h=200' },
     bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net?height=200' }
   },
@@ -135,7 +135,7 @@ export const images = [
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/' },
     weserv: { url: 'https://wsrv.nl/?filename=test.png&we&w=200&h=200&url=https://my-website.com/test.png' },
     sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200' },
-    hygraph: { url: 'https://media.graphassets.com/auto_image/resize=width:200,height:200/JL6e2yJERUyQtTiZIzPb' },
+    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200/auto_image/cltsrex89477t08unlckqx9ue' },
     caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?w=200&h=200' },
     bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net?width=200&height=200' }
   },
@@ -170,7 +170,7 @@ export const images = [
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/-/stretch/off/' },
     weserv: { url: 'https://wsrv.nl/?filename=test.png&we&w=200&h=200&fit=contain&url=https://my-website.com/test.png' },
     sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit' },
-    hygraph: { url: 'https://media.graphassets.com/auto_image/resize=width:200,height:200,fit:max/JL6e2yJERUyQtTiZIzPb' },
+    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200,fit:max/auto_image/cltsrex89477t08unlckqx9ue' },
     caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?w=200&h=200' },
     bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net?width=200&height=200' }
   },
@@ -205,7 +205,7 @@ export const images = [
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/format/jpeg/-/resize/200x200/-/stretch/off/' },
     weserv: { url: 'https://wsrv.nl/?filename=test.png&we&w=200&h=200&fit=contain&output=jpg&url=https://my-website.com/test.png' },
     sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit&format=jpg' },
-    hygraph: { url: 'https://media.graphassets.com/output=format:jpg/resize=width:200,height:200,fit:max/JL6e2yJERUyQtTiZIzPb' },
+    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200,fit:max/output=format:jpg/cltsrex89477t08unlckqx9ue' },
     caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?w=200&h=200' },
     bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net?width=200&height=200' }
   }