action.createTypes throws 'Type with name "ImageFormat" does not exists'

[m4rrc0]

Demo repo
Netlify log

Description

I created a schema with actions.printTypeDefinitions. Here is part of the output:

type ImageSharp implements Node @childOf(types: ["File"]) @dontInfer {
  fixed(width: Int, height: Int, base64Width: Int, jpegProgressive: Boolean = true, pngCompressionSpeed: Int = 4, grayscale: Boolean = false, duotone: DuotoneGradient, traceSVG: Potrace, quality: 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): ImageSharpFixed
  resolutions(width: Int, height: Int, base64Width: Int, jpegProgressive: Boolean = true, pngCompressionSpeed: Int = 4, grayscale: Boolean = false, duotone: DuotoneGradient, traceSVG: Potrace, quality: 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): ImageSharpResolutions @deprecated(reason: "Resolutions was deprecated in Gatsby v2. It's been renamed to \"fixed\" https://example.com/write-docs-and-fix-this-example-link")
  fluid(
    maxWidth: Int
    maxHeight: Int
    base64Width: Int
    grayscale: Boolean = false
    jpegProgressive: Boolean = true
    pngCompressionSpeed: Int = 4
    duotone: DuotoneGradient
    traceSVG: Potrace
    quality: 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
  sizes(
    maxWidth: Int
    maxHeight: Int
    base64Width: Int
    grayscale: Boolean = false
    jpegProgressive: Boolean = true
    pngCompressionSpeed: Int = 4
    duotone: DuotoneGradient
    traceSVG: Potrace
    quality: 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] = []
  ): ImageSharpSizes @deprecated(reason: "Sizes was deprecated in Gatsby v2. It's been renamed to \"fluid\" https://example.com/write-docs-and-fix-this-example-link")
  original: ImageSharpOriginal
  resize(width: Int, height: Int, quality: Int, jpegProgressive: Boolean = true, pngCompressionLevel: Int = 9, pngCompressionSpeed: Int = 4, grayscale: Boolean = false, duotone: DuotoneGradient, base64: Boolean = false, traceSVG: Potrace, toFormat: ImageFormat = NO_CHANGE, cropFocus: ImageCropFocus = ATTENTION, fit: ImageFit = COVER, background: String = "rgba(0,0,0,1)", rotate: Int = 0, trim: Float = 0): ImageSharpResize
}

enum ImageFormat {
  NO_CHANGE
  JPG
  PNG
  WEBP
}

Full schema

When I try to use this schema with

actions.createTypes(fs.readFileSync(`schema.gql`, { encoding: `utf-8` }))

it throws with the following stack trace:

Error: Type with name "ImageFormat" does not exists
  
  - TypeStorage.js:44 SchemaComposer.get
    [gatsby-site-builder]/[graphql-compose]/lib/TypeStorage.js:44:13
  
  - TypeMapper.js:86 TypeMapper.get
    [gatsby-site-builder]/[graphql-compose]/lib/TypeMapper.js:86:44
  
  - TypeMapper.js:612 TypeMapper.typeDefNamed
    [gatsby-site-builder]/[graphql-compose]/lib/TypeMapper.js:612:23
  
  - TypeMapper.js:707 
    [gatsby-site-builder]/[graphql-compose]/lib/TypeMapper.js:707:30
  
  - Array.forEach
  
  - TypeMapper.js:681 TypeMapper.makeArguments
    [gatsby-site-builder]/[graphql-compose]/lib/TypeMapper.js:681:12
  
  - TypeMapper.js:728 
    [gatsby-site-builder]/[graphql-compose]/lib/TypeMapper.js:728:20
  
  - Array.reduce
  
  - TypeMapper.js:724 TypeMapper.makeFieldDefMap
    [gatsby-site-builder]/[graphql-compose]/lib/TypeMapper.js:724:35
  
  - TypeMapper.js:881 TypeMapper.makeTypeDef
    [gatsby-site-builder]/[graphql-compose]/lib/TypeMapper.js:881:20
  
  - TypeMapper.js:642 TypeMapper.makeSchemaDef
    [gatsby-site-builder]/[graphql-compose]/lib/TypeMapper.js:642:21
  
  - schema.js:1086 
    [gatsby-site-builder]/[gatsby]/dist/schema/schema.js:1086:52
  
  - Array.forEach
  
  - schema.js:1074 parseTypes
    [gatsby-site-builder]/[gatsby]/dist/schema/schema.js:1074:19

I am not an expert with graphQL so I am lost.
My only clue is that ImageFormat is not a Type but an enum. Maybe we don't look for enums therefore ImageFormat is not found at all and throws???

Steps to reproduce

1. Follow the steps described in printTypeDefinitions throws TypeError: flatMap is not a function #19191
2. Resolve the bug described there (if PR fix(gatsby): Fix flatMap import in schema/print.js #19208 has not been merged yet)
3. Try using the schema with gatsby-plugin-schema-snapshot or the following snippet in your gatsby-node.js

exports.createSchemaCustomization = ({ actions }) => {
  actions.createTypes(fs.readFileSync(`schema.gql`, { encoding: `utf-8` }))
}

Expected result

We should be able to seamlessly use the schema we just created.

Actual result

Throws error

Environment

Note: modified gatsby to resolve bug stated in #19191

  System:
    OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (8) x64 06/8e
    Shell: 5.3.1 - /usr/bin/zsh
  Binaries:
    Node: 13.0.1 - /usr/bin/node
    Yarn: 1.19.1 - /usr/bin/yarn
    npm: 6.12.0 - /usr/bin/npm
  Languages:
    Python: 2.7.13 - /usr/bin/python
  Browsers:
    Firefox: 60.9.0
  npmPackages:
    gatsby: ^2.17.6 => 2.17.6
    gatsby-image: ^2.2.30 => 2.2.30
    gatsby-plugin-manifest: ^2.2.25 => 2.2.25
    gatsby-plugin-offline: ^3.0.17 => 3.0.17
    gatsby-plugin-react-helmet: ^3.1.13 => 3.1.13
    gatsby-plugin-schema-snapshot: ^1.0.0 => 1.0.0
    gatsby-plugin-sharp: ^2.2.34 => 2.2.34
    gatsby-source-filesystem: ^2.1.35 => 2.1.35
    gatsby-transformer-sharp: ^2.3.1 => 2.3.1

[m4rrc0]

#16217 stated a similar error but I don't believe it is related

[stefanprobst]

so it looks like graphql-compose crashes when looking up the default field value for the enum input.

repro:

const { schemaComposer } = require('graphql-compose')

schemaComposer.addTypeDefs(`
  type Image {
    random(format: ImageFormat = JPG): String
  }

  enum ImageFormat {
    JPG
  }
`)

the above works without the default field value. it also works when the enum is defined first.

i guess this needs to be fixed upstream -- in the meantime you could exclude the types owned by gatsby-transformer-sharp from gatsby-plugin-schema-snapshot, because they will be recreated anyway (see the exclude: { plugins: [] } option).

[stefanprobst]

also, interestingly, it still works with [email protected]

[stefanprobst]

and one more issue: some of gatsby-transformer-sharp's enums have internal enum values, which afaik we cannot really serialize in sdl (e.g. ImageCropFocusType).

[m4rrc0]

Thanks a lot for taking a look @stefanprobst.
I think excluding plugins is not really an option for me since I need a completely blank project with no content to build properly.
Anyway, I tried both solutions (excluding the plugin and rolling back to 2.2.23) and it seems to solve the issue for now.
Of course things are rarely that simple so I stumbled upon another one. I am not sure it is related but I think you will be able to tell me and point me in the right direction.

This issue is more difficult to demo in a simple project like the one above so bare with me please.
So, now my build is working properly when using the schema with the same data I used to create it. That is nice but not the point right... When I empty a markdown field in Contentful, the new error is:

Unknown field 'childMarkdownRemark' on type 'contentfulBlockFreeTextMainTextNode'. Source: document `BlockFreeText` file: `GraphQL request`

The interesting parts of the schema is:

type MarkdownRemark implements Node @childOf(mimeTypes: ["text/markdown", "text/x-markdown"], types: [], many: false) @dontInfer {
  frontmatter: MarkdownRemarkFrontmatter
  excerpt: String
  rawMarkdownBody: String
}

type ContentfulBlockFreeText implements Node @dontInfer {
  name: String
  section: [ContentfulSection] @link(by: "id", from: "section___NODE")
  main: contentfulBlockFreeTextMainTextNode @link(by: "id", from: "main___NODE")
  style: contentfulBlockFreeTextStyleJsonNode @link(by: "id", from: "style___NODE")
  spaceId: String
  contentful_id: String
  createdAt: Date @dateformat
  updatedAt: Date @dateformat
  node_locale: String
  page: [ContentfulPage] @link(by: "id", from: "page___NODE")
  options: contentfulBlockFreeTextOptionsJsonNode @link(by: "id", from: "options___NODE")
}

type contentfulBlockFreeTextMainTextNode implements Node @dontInfer {
  main: String
}

It seems to be related to a warning I get in the console about gatsby V3:

warn 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 will be added.
For example, in Gatsby v3, `contentfulBlockFreeTextMainTextNode` will not get a `childMarkdownRemark` field.

Can I manually change my schema somehow to try and correct the problem?

[nodkz]

@stefanprobst fixed in [email protected] and [email protected]

[stefanprobst]

@nodkz thanks so much for the quick fix!

[vladar]

Published in [email protected]

[m4rrc0]

Concurred! Thanks everyone!

@stefanprobst I will open another issue with the next one I get. Can you help me make a better case for it by providing some pointers as to what to look for to identify the problem? For example, I don't know if the issue could be related to the Contentful plugin or the transformer remark or simply the createTypes method or ...
And is the warning actually related to the error I get? In that case, how should the childOf extension help us handle the problem?