feat(gatsby, gatsby-plugin-utils, gatsby-source-wordpress, gatsby-source-contentful, gatsby-source-drupal): Add setRequestHeaders action/api

docs/docs/how-to/plugins-and-themes/creating-a-source-plugin.md

@@ -1027,7 +1027,7 @@ It is also recommended that you add a polyfill to provide support back through G
 ```js
 import { addRemoteFilePolyfillInterface } from "gatsby-plugin-utils/polyfill-remote-file"
 
-exports.createSchemaCustomization = ({ actions, schema }) => {
+exports.createSchemaCustomization = ({ actions, schema, store }) => {
   const imageAssetType = addRemoteFilePolyfillInterface(
     schema.buildObjectType({
       name: `YourImageAssetNodeType`,
@@ -1039,6 +1039,7 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
     {
       schema,
       actions,
+      store,
     }
   )
 
@@ -1061,6 +1062,27 @@ You might notice that `width`, `height`, `resize`, and `gatsbyImage` can be null
 
 The string returned from `gatsbyImage` is intended to work seamlessly with [Gatsby Image Component](/docs/reference/built-in-components/gatsby-plugin-image/#gatsbyimage) just like `gatsbyImageData` does.
 
+#### Adding Image CDN request headers with the `setRequestHeaders` action
+
+Since Gatsby will be fetching files from your CMS instead of your source plugin fetching those files, you may need to set request headers for Gatsby to use in those requests.
+This is needed if for example your CMS is locked down behind some kind of authentication.
+For each domain Image CDN will make requests to, set the required headers following this example:
+
+```js
+exports.onPluginInit = ({ actions }, pluginOptions) => {
+  if (typeof actions.setRequestHeaders === `function`) {
+    actions.setRequestHeaders({
+      // set the domain the headers should apply to
+      domain: pluginOptions.apiUrl,
+      headers: {
+        // add any needed headers
+        Authorization: pluginOptions.authToken,
+      },
+    })
+  }
+}
+```
+
 #### `sourceNodes` node API additions
 
 When creating nodes, you must add some fields to the node itself to match what the `RemoteFile` interface expects. You will need `url`, `mimeType`, `filename` as mandatory fields. When you have an image type, `width` and `height` are required as well. The optional fields are `placeholderUrl` and `filesize`. `placeholderUrl` will be the url used to generate blurred or dominant color placeholder so it should contain `%width%` and `%height%` url params if possible.
@@ -1087,8 +1109,8 @@ Add the polyfill, `polyfillImageServiceDevRoutes`, to ensure that the developmen
 ```js
 import { polyfillImageServiceDevRoutes } from "gatsby-plugin-utils/polyfill-remote-file"
 
-export const onCreateDevServer = ({ app }) => {
-  polyfillImageServiceDevRoutes(app)
+export const onCreateDevServer = ({ app, store }) => {
+  polyfillImageServiceDevRoutes(app, store)
 }
 ```
 

e2e-tests/development-runtime/gatsby-node.js

@@ -17,6 +17,7 @@ exports.createSchemaCustomization = ({ actions, schema, store }) => {
       {
         store,
         schema,
+        actions,
       }
     )
   )
@@ -27,8 +28,7 @@ exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
   const items = [
     {
       name: "photoA.jpg",
-      url:
-        "https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80",
+      url: "https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80",
       placeholderUrl:
         "https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=%width%&h=%height%",
       mimeType: "image/jpg",
@@ -38,17 +38,15 @@ exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
     },
     {
       name: "photoB.jpg",
-      url:
-        "https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=2000&q=10",
+      url: "https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=2000&q=10",
       mimeType: "image/jpg",
       filename: "photo-1552053831.jpg",
       width: 1247,
       height: 2000,
     },
     {
       name: "photoC.jpg",
-      url:
-        "https://images.unsplash.com/photo-1561037404-61cd46aa615b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80",
+      url: "https://images.unsplash.com/photo-1561037404-61cd46aa615b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80",
       placeholderUrl:
         "https://images.unsplash.com/photo-1561037404-61cd46aa615b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=%width%&h=%height%",
       mimeType: "image/jpg",
@@ -275,6 +273,6 @@ exports.createResolvers = ({ createResolvers }) => {
 }
 
 /** @type{import('gatsby').onCreateDevServer} */
-exports.onCreateDevServer = ({ app }) => {
-  polyfillImageServiceDevRoutes(app)
+exports.onCreateDevServer = ({ app, store }) => {
+  polyfillImageServiceDevRoutes(app, store)
 }

jest.config.js

@@ -56,7 +56,7 @@ module.exports = {
   snapshotSerializers: [`jest-serializer-path`],
   collectCoverageFrom: coverageDirs,
   reporters: process.env.CI
-    ? [[`jest-silent-reporter`, { useDots: true }]].concat(
+    ? [[`jest-silent-reporter`, { useDots: true, showPaths: true }]].concat(
         useCoverage ? `jest-junit` : []
       )
     : [`default`].concat(useCoverage ? `jest-junit` : []),

packages/gatsby-core-utils/src/fetch-remote-file.ts

@@ -200,6 +200,7 @@ async function fetchFile({
     // See if there's response headers for this url
     // from a previous request.
     const headers = { ...httpHeaders }
+
     if (cachedEntry?.headers?.etag && (await fs.pathExists(filename))) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       headers[`If-None-Match`] = cachedEntry.headers.etag

packages/gatsby-plugin-utils/README.md

@@ -95,7 +95,7 @@ const {
   polyfillImageServiceDevRoutes,
 } = require(`gatsby-plugin-utils/pollyfill-remote-file`)
 
-exports.createSchemaCustomization ({ actions, schema }) => {
+exports.createSchemaCustomization ({ actions, schema, store }) => {
   actions.createTypes([
     addRemoteFilePolyfillInterface(
       schema.buildObjectType({
@@ -108,13 +108,14 @@ exports.createSchemaCustomization ({ actions, schema }) => {
       {
         schema,
         actions,
+        store
       }
     )
   ]);
 }
 
 /** @type {import('gatsby').onCreateDevServer} */
-exports.onCreateDevServer = ({ app }) => {
-  polyfillImageServiceDevRoutes(app)
+exports.onCreateDevServer = ({ app, store }) => {
+  polyfillImageServiceDevRoutes(app, store)
 }
 ```

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

@@ -6,7 +6,7 @@ import { gatsbyImageResolver } from "../index"
 import * as dispatchers from "../jobs/dispatchers"
 import { PlaceholderType } from "../placeholder-handler"
 import { generateImageUrl } from "../utils/url-generator"
-import type { Actions } from "gatsby"
+import type { Actions, Store } from "gatsby"
 
 jest.spyOn(dispatchers, `shouldDispatch`).mockImplementation(() => false)
 jest.mock(`import-from`)
@@ -36,6 +36,14 @@ function parseSrcSet(
   })
 }
 
+const store = {
+  getState: (): { requestHeaders: Map<string, Record<string, string>> } => {
+    return {
+      requestHeaders: new Map(),
+    }
+  },
+} as unknown as Store
+
 describe(`gatsbyImageData`, () => {
   const cacheDir = path.join(__dirname, `.cache`)
 
@@ -86,7 +94,8 @@ describe(`gatsbyImageData`, () => {
         width: 300,
         placeholder: `none`,
       },
-      actions
+      actions,
+      store
     )
 
     const parsedSrcSet = parseSrcSet(result.images.sources[0].srcSet)
@@ -120,7 +129,8 @@ describe(`gatsbyImageData`, () => {
         placeholder: `none`,
         cropFocus: [`entropy`],
       },
-      actions
+      actions,
+      store
     )
     const parsedSrcSet = parseSrcSet(result.images.sources[0].srcSet)
     expect(parsedSrcSet[0].src).toEqual(
@@ -159,7 +169,8 @@ describe(`gatsbyImageData`, () => {
         },
         // @ts-ignore - don't care
         {},
-        actions
+        actions,
+        store
       )
     ).toBe(null)
     expect(dispatchers.shouldDispatch).not.toHaveBeenCalled()
@@ -173,7 +184,8 @@ describe(`gatsbyImageData`, () => {
         width: 300,
         placeholder: `none`,
       },
-      actions
+      actions,
+      store
     )
 
     const parsedSrcSet = parseSrcSet(result.images.sources[0].srcSet)
@@ -247,7 +259,8 @@ describe(`gatsbyImageData`, () => {
         width: 300,
         placeholder: `none`,
       },
-      actions
+      actions,
+      store
     )
 
     const parsedSrcSet = parseSrcSet(result.images.sources[0].srcSet)
@@ -357,7 +370,8 @@ describe(`gatsbyImageData`, () => {
         width: 2000,
         placeholder: `none`,
       },
-      actions
+      actions,
+      store
     )
 
     const parsedSrcSet = parseSrcSet(result.images.sources[0].srcSet)
@@ -464,7 +478,8 @@ describe(`gatsbyImageData`, () => {
         placeholder: `none`,
         outputPixelDensities: [1, 2],
       },
-      actions
+      actions,
+      store
     )
     const constrainedResult = await gatsbyImageResolver(
       portraitSource,
@@ -474,7 +489,8 @@ describe(`gatsbyImageData`, () => {
         placeholder: `none`,
         outputPixelDensities: [1, 2],
       },
-      actions
+      actions,
+      store
     )
     const fullWidthResult = await gatsbyImageResolver(
       {
@@ -488,7 +504,8 @@ describe(`gatsbyImageData`, () => {
         placeholder: `none`,
         outputPixelDensities: [1, 2],
       },
-      actions
+      actions,
+      store
     )
 
     const parsedFixedSrcSet = parseSrcSet(fixedResult.images.sources[0].srcSet)
@@ -576,7 +593,8 @@ describe(`gatsbyImageData`, () => {
         layout: `constrained`,
         placeholder: `none`,
       },
-      actions
+      actions,
+      store
     )
 
     expect(result.images.fallback.src).not.toContain(` `)
@@ -597,7 +615,8 @@ describe(`gatsbyImageData`, () => {
         placeholder: `none`,
         breakpoints: [350, 700],
       },
-      actions
+      actions,
+      store
     )
     const constrainedResult = await gatsbyImageResolver(
       biggerPortraitSource,
@@ -607,7 +626,8 @@ describe(`gatsbyImageData`, () => {
         placeholder: `none`,
         breakpoints: [350, 700],
       },
-      actions
+      actions,
+      store
     )
     const fullWidthResult = await gatsbyImageResolver(
       biggerPortraitSource,
@@ -617,7 +637,8 @@ describe(`gatsbyImageData`, () => {
         placeholder: `none`,
         breakpoints: [350, 700],
       },
-      actions
+      actions,
+      store
     )
 
     const parsedFixedSrcSet = parseSrcSet(fixedResult.images.sources[0].srcSet)
@@ -647,7 +668,8 @@ describe(`gatsbyImageData`, () => {
         layout: `fixed`,
         width: 300,
       },
-      actions
+      actions,
+      store
     )
 
     expect(fetchRemoteFile).toHaveBeenCalledTimes(1)
@@ -665,7 +687,8 @@ describe(`gatsbyImageData`, () => {
         width: 300,
         placeholder: PlaceholderType.BLURRED,
       },
-      actions
+      actions,
+      store
     )
 
     expect(fetchRemoteFile).toHaveBeenCalledTimes(1)
@@ -692,7 +715,8 @@ describe(`gatsbyImageData`, () => {
         width: 300,
         placeholder: PlaceholderType.TRACED_SVG,
       },
-      actions
+      actions,
+      store
     )
 
     expect(fetchRemoteFile).toHaveBeenCalledTimes(1)
@@ -717,7 +741,8 @@ describe(`gatsbyImageData`, () => {
         placeholder: `none`,
         outputPixelDensities: [1, 2],
       },
-      actions
+      actions,
+      store
     )
 
     expect(constrainedResult?.images.sources[0].type).toBe(`image/avif`)
@@ -726,4 +751,53 @@ describe(`gatsbyImageData`, () => {
 
     expect(constrainedResult?.images.sources.length).toBe(2)
   })
+
+  it(`should fetch placeholder file with headers from the setRequestHeaders action`, async () => {
+    fetchRemoteFile.mockImplementationOnce(input => {
+      if (
+        !input.httpHeaders ||
+        input.httpHeaders.Authorization !== `Bearer 123`
+      ) {
+        throw Error(`No headers found for url ${input.url}`)
+      } else {
+        return path.join(__dirname, `__fixtures__`, `dog-portrait.jpg`)
+      }
+    })
+
+    const { store } = jest.requireActual(`gatsby/dist/redux`)
+    const { actions } = jest.requireActual(`gatsby/dist/redux/actions/public`)
+
+    store.dispatch(
+      actions.setRequestHeaders(
+        {
+          domain: portraitSource.url,
+          headers: {
+            Authorization: `Bearer 123`,
+          },
+        },
+        {
+          name: `gatsby-source-test`,
+        }
+      )
+    )
+
+    const fixedResult = await gatsbyImageResolver(
+      portraitSource,
+      {
+        layout: `fixed`,
+        width: 300,
+        placeholder: PlaceholderType.BLURRED,
+      },
+      actions,
+      store
+    )
+
+    expect(fetchRemoteFile).toHaveBeenCalledTimes(1)
+    expect(fetchRemoteFile).toHaveBeenCalledWith(
+      expect.objectContaining({
+        url: portraitSource.url,
+      })
+    )
+    expect(fixedResult?.placeholder).toBeTruthy()
+  })
 })