gatsby-transformer-sharp: Don't print .gif warning when publicURL is used in query

[LekoArts]

Summary

Improve the warning about .gif which was added in https://github.com/gatsbyjs/gatsby/pull/20782

Specifically, don't print the warning if the childImageSharp portion has an adjacent publicURL field in the query and one could assume that the end-user uses it for using the .gif in a normal <img /> tag.

Basic example

So if you have the query:

gif: file(name: {eq: "harry-potter"}) {
  childImageSharp {
    fluid {
      src
    }
  }
}

It should print the warning. If if have this, it shouldn't:

gif: file(name: {eq: "harry-potter"}) {
  childImageSharp {
    fluid {
      src
    }
  }
  publicURL
}

It most probably will need to go here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/create-resolvers.js#L5

As:

Query: {
  file: {
    resolve() {}
  },
  allFile: {
    resolve() {}
  }
}

Motivation

Improve the experience for users, https://github.com/gatsbyjs/gatsby/issues/18699 was a start but we don't want to "annoy" users who implemented the correct use.

[wesbos]

It would be awesome if gatsby-image <Img> handled this for us. Gif doesn't work? Just render a regular image tag.

[LekoArts]

It would be awesome if gatsby-image handled this for us. Gif doesn't work? Just render a regular image tag.

Yeah, that would be another option. However, then again people would complain (if we'd do that silently) that their gif is not using the gatsby-image component.

[LekoArts]

Hey @wesbos 👋 Hope you're doing well in all this mess.

Anyways, the linked PR got published in [email protected]. It's not directly the solution of what I initially thought of -- as laid out in the PR it would have been more complicated than expected to traverse the GraphQL AST and think of all (edge-)cases like file, allFile, fragments.

Eventually we'll be able to handle such cases when you can return components from GraphQL but that's just an idea floating around right now.

Hope that the added checkSupportedExtensions option is good enough in the meantime. Stay safe & healthy :)