diff --git a/packages/gatsby-plugin-image/src/components/__tests__/hooks.ts b/packages/gatsby-plugin-image/src/components/__tests__/hooks.ts index 83855288d16aa..478d62b2df7ca 100644 --- 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 index 3e766d85a8c84..25ec01ebeece7 100644 --- 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 & { gatsbyImageData: IGatsbyImageData } +export type IGatsbyImageParent = T & { + gatsbyImage: IGatsbyImageData +} export type FileNode = Node & { childImageSharp?: IGatsbyImageDataParent } @@ -61,14 +64,29 @@ const isGatsbyImageDataParent = ( node: IGatsbyImageDataParent | any ): node is IGatsbyImageDataParent => Boolean(node?.gatsbyImageData) -export type ImageDataLike = FileNode | IGatsbyImageDataParent | IGatsbyImageData +const isGatsbyImageParent = ( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + node: IGatsbyImageParent | any +): node is IGatsbyImageParent => 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 }