gatsby-plugin-schema-snapshot avoid WebP picture source from a Json data source

Hi, I have a project with some Json as data source: I added the gatsby-plugin-schema-snapshot plugin to speed up my build time and I saw that the images served by the gatsby-image component stopped delivering the WebP picture source.

Here a demo of the issue: https://codesandbox.io/s/infallible-snow-i60fj

I changed the image component to get the image childImage field querying the Json source (in the data directory) instead of querying the file system directly.

The source with the WebP format is missing: .

I don’t knpw if it’s correlated but during the build I have this warning message: The type `File` does not explicitly define the field `childDataJson`. On types with the `@dontInfer` directive, or with the `infer` extension set to `false`, automatically adding fields for children types is deprecated. In Gatsby v3, only children fields explicitly set with the `childOf` extension

Thanks valse

[vladar]

For the file warning - you could add the following to gatsby-node.js:

// in site's gatsby-node.js:
exports.createSchemaCustomization = ({ actions }) => {
  const typeDefs = `
    type DataJson implements Node @childOf(types: ["File"]) {
      id
    } 
  `
  actions.createTypes(typeDefs)
}

This should fix the warning. There is a bit more context on this in #19674

[pieh]

This is certainly a bug that I can reproduce.

As a workaround (for now), you can exclude gatsby-transformer-sharp from snapshot plugin:

    {
      resolve: `gatsby-plugin-schema-snapshot`,
      options: {
        update: true,
        exclude: {
          plugins: [`gatsby-transformer-sharp`],
        },
      },
    },

Which seems to make it work again.

I’m not sure where to attribute this bug to. With snapshot enabled (and not excluding types from sharp transformer), we get following types in schema:

type ImageSharpFluid {
  base64: String
  tracedSVG: String
  aspectRatio: Float!
  src: String!
  srcSet: String!
  srcWebp: String
  srcSetWebp: String
  sizes: String!
  originalImg: String
  originalName: String
  presentationWidth: Int
  presentationHeight: Int
}

type ImageSharp implements Node @childOf(mimeTypes: [], types: ["File"], many: false) @dontInfer {
  # removed fields other than "fluid" for brevity [...] 
  fluid(
    maxWidth: Int
    maxHeight: Int
    base64Width: Int
    grayscale: Boolean = false
    jpegProgressive: Boolean = true
    pngCompressionSpeed: Int = 4
    duotone: DuotoneGradient
    traceSVG: Potrace
    quality: Int
    jpegQuality: Int
    pngQuality: Int
    webpQuality: Int
    toFormat: ImageFormat = NO_CHANGE
    toFormatBase64: ImageFormat = NO_CHANGE
    cropFocus: ImageCropFocus = ATTENTION
    fit: ImageFit = COVER
    background: String = "rgba(0,0,0,1)"
    rotate: Int = 0
    trim: Float = 0
    sizes: String = ""

    """
    A list of image widths to be generated. Example: [ 200, 340, 520, 890 ]
    """
    srcSetBreakpoints: [Int] = []
  ): ImageSharpFluid
}

Now, resolver for fluid field works fine ( https://github.com/gatsbyjs/gatsby/blob/08d63c5e4ed25e9315101dec4fdb98186c527927/packages/gatsby-transformer-sharp/src/customize-schema.js#L357-L375 ), but resolver for srcWebp (and probably rest of those resolvers on field of ImageSharpFluid type, I just checked one) is not being hit ( https://github.com/gatsbyjs/gatsby/blob/08d63c5e4ed25e9315101dec4fdb98186c527927/packages/gatsby-transformer-sharp/src/customize-schema.js#L236-L252 ). So my gut tells me default resolver is used and because there is no actual srcWebp on object return by fluid - this just make it null?

My guess - ImageSharp type is defined with schema.buildObjectType which seems to play nicely with schema customization (so resolver is attached to type/field defined by schema.gql), while ImageSharpFluid is created using vanilla graphql-js(new GraphQLObjectType({ ... })) which potentially doesn’t play nicely?

Thought @vladar?