From 3b4d32f0b2d6aef3193213252c3eb813cc2cbea9 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Thu, 18 Feb 2021 10:43:08 +0000
Subject: [PATCH] fix(gatsby-source-contentful): Correct supported image
 formats (#29562)

---
 .../gatsby-plugin-image/src/resolver-utils.ts |  2 +-
 .../src/extend-node-type.js                   | 20 +++++++++++++++++++
 .../gatsby-source-contentful/src/schemes.js   |  1 +
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-plugin-image/src/resolver-utils.ts b/packages/gatsby-plugin-image/src/resolver-utils.ts
index 0f471d4c8b8dd..62bf272b28a70 100644
--- a/packages/gatsby-plugin-image/src/resolver-utils.ts
+++ b/packages/gatsby-plugin-image/src/resolver-utils.ts
@@ -176,7 +176,7 @@ export function getGatsbyImageFieldConfig<TSource, TContext>(
             The image formats to generate. Valid values are AUTO (meaning the same format as the source image), JPG, PNG, WEBP and AVIF.
             The default value is [AUTO, WEBP], and you should rarely need to change this. Take care if you specify JPG or PNG when you do
             not know the formats of the source images, as this could lead to unwanted results such as converting JPEGs to PNGs. Specifying
-            both PNG and JPG is not supported and will be ignored. AVIF support is currently experimental.
+            both PNG and JPG is not supported and will be ignored. 
         `,
         defaultValue: [`auto`, `webp`],
       },
diff --git a/packages/gatsby-source-contentful/src/extend-node-type.js b/packages/gatsby-source-contentful/src/extend-node-type.js
index 3e262bb3e6846..4cc752b5422f2 100644
--- a/packages/gatsby-source-contentful/src/extend-node-type.js
+++ b/packages/gatsby-source-contentful/src/extend-node-type.js
@@ -12,6 +12,7 @@ const {
   GraphQLFloat,
   GraphQLNonNull,
   GraphQLJSON,
+  GraphQLList,
 } = require(`gatsby/graphql`)
 const qs = require(`qs`)
 const { generateImageData } = require(`gatsby-plugin-image`)
@@ -33,6 +34,8 @@ const {
 // cache is more likely to go stale than the images (which never go stale)
 // Note that the same image might be requested multiple times in the same run
 
+const validImageFormats = new Set([`jpg`, `png`, `webp`])
+
 if (process.env.GATSBY_REMOTE_CACHE) {
   console.warn(
     `Note: \`GATSBY_REMOTE_CACHE\` will be removed soon because it has been renamed to \`GATSBY_CONTENTFUL_EXPERIMENTAL_REMOTE_CACHE\``
@@ -200,6 +203,13 @@ const generateImageSource = (
     height = CONTENTFUL_IMAGE_MAX_SIZE
   }
 
+  if (!validImageFormats.has(toFormat)) {
+    console.warn(
+      `[gatsby-source-contentful] Invalid image format "${toFormat}". Supported types are jpg, png and webp"`
+    )
+    return undefined
+  }
+
   const src = createUrl(filename, {
     width,
     height,
@@ -781,6 +791,16 @@ exports.extendNodeType = ({ type, store, reporter }) => {
         type: GraphQLInt,
         defaultValue: 50,
       },
+      formats: {
+        type: GraphQLList(ImageFormatType),
+        description: stripIndent`
+            The image formats to generate. Valid values are AUTO (meaning the same format as the source image), JPG, PNG, and WEBP.
+            The default value is [AUTO, WEBP], and you should rarely need to change this. Take care if you specify JPG or PNG when you do
+            not know the formats of the source images, as this could lead to unwanted results such as converting JPEGs to PNGs. Specifying
+            both PNG and JPG is not supported and will be ignored. 
+        `,
+        defaultValue: [``, `webp`],
+      },
     })
 
     fieldConfig.type = GraphQLJSON
diff --git a/packages/gatsby-source-contentful/src/schemes.js b/packages/gatsby-source-contentful/src/schemes.js
index 3b01e7fa26508..beabb967fa1a5 100644
--- a/packages/gatsby-source-contentful/src/schemes.js
+++ b/packages/gatsby-source-contentful/src/schemes.js
@@ -4,6 +4,7 @@ const ImageFormatType = new GraphQLEnumType({
   name: `ContentfulImageFormat`,
   values: {
     NO_CHANGE: { value: `` },
+    AUTO: { value: `` },
     JPG: { value: `jpg` },
     PNG: { value: `png` },
     WEBP: { value: `webp` },