feat(gatsby-plugin-utils): add path prefix to image cdn urls (#36772)

* add path prefix to image cdn urls

* add path prefix in jobs

* move store out of file node

* simplify

* tests

* oops wrong properties

* Update packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts

Co-authored-by: Ward Peeters <[email protected]>

Co-authored-by: Ward Peeters <[email protected]>
Co-authored-by: Lennart <[email protected]>

Author: 3 people

packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/gatsby-image-resolver.ts

@@ -205,13 +205,17 @@ export async function gatsbyImageResolver(
         )
       }
 
-      const src = generateImageUrl(source, {
-        width,
-        height: Math.round(width / imageSizes.aspectRatio),
-        format,
-        cropFocus: args.cropFocus,
-        quality: args.quality as number,
-      })
+      const src = generateImageUrl(
+        source,
+        {
+          width,
+          height: Math.round(width / imageSizes.aspectRatio),
+          format,
+          cropFocus: args.cropFocus,
+          quality: args.quality as number,
+        },
+        store
+      )
 
       if (!fallbackSrc) {
         fallbackSrc = src

packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/public-url-resolver.ts

@@ -23,7 +23,7 @@ export function publicUrlResolver(
     )
   }
 
-  return generateFileUrl({ url: source.url, filename: source.filename })
+  return generateFileUrl({ url: source.url, filename: source.filename }, store)
 }
 
 export function generatePublicUrlFieldConfig(

packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/resize-resolver.ts

@@ -98,12 +98,16 @@ export async function resizeResolver(
     )
   }
 
-  const src = generateImageUrl(source, {
-    ...(args as IResizeArgs),
-    width,
-    height,
-    format,
-  })
+  const src = generateImageUrl(
+    source,
+    {
+      ...(args as IResizeArgs),
+      width,
+      height,
+      format,
+    },
+    store
+  )
 
   return {
     src,

packages/gatsby-plugin-utils/src/polyfill-remote-file/jobs/dispatchers.ts

@@ -23,10 +23,13 @@ export function dispatchLocalFileServiceJob(
   store?: Store
 ): void {
   const GATSBY_VERSION = getGatsbyVersion()
-  const publicUrl = generateFileUrl({
-    url,
-    filename,
-  }).split(`/`)
+  const publicUrl = generateFileUrl(
+    {
+      url,
+      filename,
+    },
+    store
+  ).split(`/`)
 
   publicUrl.unshift(`public`)
   // get filename and remove querystring
@@ -83,7 +86,8 @@ export function dispatchLocalImageServiceJob(
       filename,
       internal: { contentDigest },
     },
-    imageArgs
+    imageArgs,
+    store
   ).split(`/`)
   publicUrl.unshift(`public`)
   // get filename and remove querystring

packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/__tests__/url-generator.ts

@@ -1,4 +1,5 @@
 import crypto from "crypto"
+import { Store } from "gatsby"
 import url from "url"
 
 import {
@@ -10,6 +11,60 @@ import {
 type ImageArgs = Parameters<typeof generateImageUrl>[1]
 
 describe(`url-generator`, () => {
+  it(`should work with pathPrefix`, () => {
+    const source = {
+      url: `https://example.com/image.jpg`,
+      filename: `image.jpg`,
+      mimeType: `image/jpeg`,
+      internal: {
+        contentDigest: `1234`,
+      },
+    }
+
+    const store = {
+      getState: (): {
+        program: { prefixPaths: boolean }
+        config: { pathPrefix: string }
+      } => {
+        return {
+          program: {
+            prefixPaths: true,
+          },
+          config: {
+            pathPrefix: `/prefix-test`,
+          },
+        }
+      },
+    }
+
+    expect(
+      generateImageUrl(
+        source,
+        {
+          width: 100,
+          height: 100,
+          cropFocus: `top`,
+          format: `webp`,
+          quality: 80,
+        },
+        store as unknown as Store
+      )
+    ).toMatchInlineSnapshot(
+      `"/prefix-test/_gatsby/image/18867d45576d8283d6fabb82406789c8/a5d4237c29c15bd781f3586364b7e168/image.webp?u=https%3A%2F%2Fexample.com%2Fimage.jpg&a=w%3D100%26h%3D100%26fit%3Dcrop%26crop%3Dtop%26fm%3Dwebp%26q%3D80&cd=1234"`
+    )
+
+    const fileSource = {
+      url: `https://example.com/file.pdf`,
+      filename: `file.pdf`,
+    }
+
+    expect(
+      generateFileUrl(fileSource, store as unknown as Store)
+    ).toMatchInlineSnapshot(
+      `"/prefix-test/_gatsby/file/9f2eba7a1dbc78363c52aeb0daec9031/file.pdf?u=https%3A%2F%2Fexample.com%2Ffile.pdf"`
+    )
+  })
+
   describe(`URL encryption`, () => {
     function decryptImageCdnUrl(
       key: string,

packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts

@@ -4,6 +4,7 @@ import { URL } from "url"
 import { createContentDigest } from "gatsby-core-utils/create-content-digest"
 import { isImage } from "../types"
 import type { ImageCropFocus, WidthOrHeight } from "../types"
+import type { Store } from "gatsby"
 
 // this is an arbitrary origin that we use #branding so we can construct a full url for the URL constructor
 const ORIGIN = `https://gatsbyjs.com`
@@ -53,20 +54,26 @@ function appendUrlParamToSearchParams(
   searchParams.append(paramName, finalUrl)
 }
 
-export function generateFileUrl({
-  url,
-  filename,
-}: {
-  url: string
-  filename: string
-}): string {
+export function generateFileUrl(
+  {
+    url,
+    filename,
+  }: {
+    url: string
+    filename: string
+  },
+  store?: Store
+): string {
   const fileExt = extname(filename)
   const filenameWithoutExt = basename(filename, fileExt)
 
   const parsedURL = new URL(
-    `${ORIGIN}${generatePublicUrl({
-      url,
-    })}/${filenameWithoutExt}${fileExt}`
+    `${ORIGIN}${generatePublicUrl(
+      {
+        url,
+      },
+      store
+    )}/${filenameWithoutExt}${fileExt}`
   )
 
   appendUrlParamToSearchParams(parsedURL.searchParams, url)
@@ -81,13 +88,14 @@ export function generateImageUrl(
     filename: string
     internal: { contentDigest: string }
   },
-  imageArgs: Parameters<typeof generateImageArgs>[0]
+  imageArgs: Parameters<typeof generateImageArgs>[0],
+  store?: Store
 ): string {
   const filenameWithoutExt = basename(source.filename, extname(source.filename))
   const queryStr = generateImageArgs(imageArgs)
 
   const parsedURL = new URL(
-    `${ORIGIN}${generatePublicUrl(source)}/${createContentDigest(
+    `${ORIGIN}${generatePublicUrl(source, store)}/${createContentDigest(
       queryStr
     )}/${filenameWithoutExt}.${imageArgs.format}`
   )
@@ -102,17 +110,28 @@ export function generateImageUrl(
   return `${parsedURL.pathname}${parsedURL.search}`
 }
 
-function generatePublicUrl({
-  url,
-  mimeType,
-}: {
-  url: string
-  mimeType?: string
-}): string {
+function generatePublicUrl(
+  {
+    url,
+    mimeType,
+  }: {
+    url: string
+    mimeType?: string
+  },
+  store?: Store
+): string {
+  const state = store?.getState()
+
+  const pathPrefix = state?.program?.prefixPaths
+    ? state?.config?.pathPrefix
+    : ``
+
   const remoteUrl = createContentDigest(url)
 
   let publicUrl =
-    mimeType && isImage({ mimeType }) ? `/_gatsby/image/` : `/_gatsby/file/`
+    pathPrefix +
+    (mimeType && isImage({ mimeType }) ? `/_gatsby/image/` : `/_gatsby/file/`)
+
   publicUrl += `${remoteUrl}`
 
   return publicUrl