feat(gatsby-plugin-image): add check for node.gatsbyImage in the getI…

…mage helper (#35507) * add check for node.gatsbyImage in the getImage helper * add unit tests
gatsbyjs · May 3, 2022 · abc6dca · abc6dca
1 parent e51c3a3
commit abc6dca
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/__tests__/hooks.ts b/packages/gatsby-plugin-image/src/components/__tests__/hooks.ts
@@ -25,14 +25,19 @@ const node: Node = {
   },
 }
 
-const dataParent = {
+const imageDataParent = {
   ...node,
   gatsbyImageData: imageData,
 }
 
+const imageParent = {
+  ...node,
+  gatsbyImage: imageData,
+}
+
 const fileNode = {
   ...node,
-  childImageSharp: dataParent,
+  childImageSharp: imageDataParent,
 }
 
 const getImageDataArgs: IGetImageDataArgs = {
@@ -147,13 +152,21 @@ describe(`The image helper functions`, () => {
     it(`returns the same data if passed gatsbyImageData`, () => {
       expect(getImage(imageData)).toEqual(imageData)
     })
+    it(`returns the same data if passed gatsbyImage`, () => {
+      expect(getImage(imageData)).toEqual(imageData)
+    })
 
     it(`gets an image from a FileNode`, () => {
       expect(getImage(fileNode)?.images.fallback?.src).toEqual(`imagesrc.jpg`)
     })
 
-    it(`gets an image from an IGatsbyImageDataParent`, () => {
-      expect(getImage(dataParent)?.images.fallback?.src).toEqual(`imagesrc.jpg`)
+    it(`gets an image from an IGatsbyImageDataParent/IGatsbyImageParent`, () => {
+      expect(getImage(imageDataParent)?.images.fallback?.src).toEqual(
+        `imagesrc.jpg`
+      )
+      expect(getImage(imageParent)?.images.fallback?.src).toEqual(
+        `imagesrc.jpg`
+      )
     })
     it(`returns undefined from an invalid object`, () => {
       expect(getImage(node)).toBeUndefined()
@@ -177,8 +190,9 @@ describe(`The image helper functions`, () => {
       expect(getSrc(fileNode)).toEqual(`imagesrc.jpg`)
     })
 
-    it(`gets src from an IGatsbyImageDataParent`, () => {
-      expect(getSrc(dataParent)).toEqual(`imagesrc.jpg`)
+    it(`gets src from an IGatsbyImageDataParent/IGatsbyImageParent`, () => {
+      expect(getSrc(imageDataParent)).toEqual(`imagesrc.jpg`)
+      expect(getSrc(imageParent)).toEqual(`imagesrc.jpg`)
     })
 
     it(`returns undefined from an invalid object`, () => {
@@ -202,8 +216,9 @@ describe(`The image helper functions`, () => {
       expect(getSrcSet(fileNode)).toEqual(`imagesrcset.jpg 1x`)
     })
 
-    it(`gets srcSet from an IGatsbyImageDataParent`, () => {
-      expect(getSrcSet(dataParent)).toEqual(`imagesrcset.jpg 1x`)
+    it(`gets srcSet from an IGatsbyImageDataParent/IGatsbyImageParent`, () => {
+      expect(getSrcSet(imageDataParent)).toEqual(`imagesrcset.jpg 1x`)
+      expect(getSrcSet(imageParent)).toEqual(`imagesrcset.jpg 1x`)
     })
 
     it(`returns undefined from an invalid object`, () => {

diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts
@@ -45,6 +45,9 @@ export function hasImageLoaded(cacheKey: string): boolean {
 export type IGatsbyImageDataParent<T = never> = T & {
   gatsbyImageData: IGatsbyImageData
 }
+export type IGatsbyImageParent<T = never> = T & {
+  gatsbyImage: IGatsbyImageData
+}
 export type FileNode = Node & {
   childImageSharp?: IGatsbyImageDataParent<Node>
 }
@@ -61,14 +64,29 @@ const isGatsbyImageDataParent = <T>(
   node: IGatsbyImageDataParent<T> | any
 ): node is IGatsbyImageDataParent<T> => Boolean(node?.gatsbyImageData)
 
-export type ImageDataLike = FileNode | IGatsbyImageDataParent | IGatsbyImageData
+const isGatsbyImageParent = <T>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  node: IGatsbyImageParent<T> | any
+): node is IGatsbyImageParent<T> => Boolean(node?.gatsbyImage)
+
+export type ImageDataLike =
+  | FileNode
+  | IGatsbyImageDataParent
+  | IGatsbyImageParent
+  | IGatsbyImageData
+
 export const getImage = (node: ImageDataLike): IGatsbyImageData | undefined => {
   if (isGatsbyImageData(node)) {
     return node
   }
+  // gatsbyImageData GraphQL field
   if (isGatsbyImageDataParent(node)) {
     return node.gatsbyImageData
   }
+  // gatsbyImage GraphQL field for Gatsby's Image CDN service
+  if (isGatsbyImageParent(node)) {
+    return node.gatsbyImage
+  }
   return node?.childImageSharp?.gatsbyImageData
 }