Graphql-code-generator: Typescript generated with errors

[pedrolamas]

Describe the bug
With the latest versions, I am getting some errors in my generated typescript files.

Notice the final | | | | | | | | on the following generated code:

export type PostMdxFragment = (
  Pick<Mdx, 'id' | 'body' | 'excerpt'>
  & { fields: Maybe<Pick<MdxFields, 'slug'>>, frontmatter: Maybe<(
    Pick<MdxFrontmatter, 'categories' | 'date' | 'dateFormatted' | 'last_modified_at' | 'layout' | 'tags' | 'title'>
    & { image: Maybe<(
      Pick<File, 'publicURL'>
      & { childImageSharp: Maybe<{ fluid: Maybe<Pick<ImageSharpFluid, 'presentationWidth'>
          & GatsbyImageSharpFluid_WithWebpFragment
        > }> }
    )> }
  )>, file: Maybe<Pick<File, 'base'> |  |  |  |  |  |  |  | > }
);

To Reproduce

1. clone/download this repo: https://github.com/PedroLamas/pedrolamas.com
2. run yarn to install dependencies
3. run yarn develop to start
4. on a second terminal, run yarn codegen

5. check the generated "src\utils\graphql.generated.ts" file, and look for the bit in the example above.

6. My GraphQL schema:

Mostly inferred from my typescript code, but after running yarn develop from the steps above, you can access it via http://localhost:8000/__graphql

1. My GraphQL operations:

(Inferred from typescript)

1. My codegen.yml config file:

overwrite: true
schema: 'http://localhost:8000/___graphql'
documents:
  - ./src/**/*.{ts,tsx}
  - ./node_modules/gatsby-*/**/*.js
generates:
  src/utils/graphql.generated.ts:
    config:
      skipTypename: true
      enumsAsTypes: true
    plugins:
      - 'typescript'
      - 'typescript-operations'
  #     - "typescript-react-apollo"
  # ./graphql.schema.json:
  #   plugins:
  #     - "introspection"

Expected behavior

Generate typescript code without errors!

Environment:

• OS: Windows 10 version 1903 (build 18362.10015)
• @graphql-codegen/...: 1.6.1
• NodeJS: 10.15.3

[n1ru4l]

This should be fixed by https://github.com/dotansimha/graphql-code-generator/pull/2490

Nevertheless, I would advise you to add a __typename selection field to your file SelectionSet in order to determine which type you receive.

[pedrolamas]

Wow, that was a fast fix indeed, thank you very much!!

Nevertheless, I would advise you to add a __typename selection field to your file SelectionSet in order to determine which type you receive.

Any specific reason as to do this? I ask this as so far I haven't actually needed this!

[n1ru4l]

It seems like file returns a union/interface. Therefore you should probably use the __typename property to distinguish possible return values. IDK about Gatsby, but you only added a selection set for the File type. How would you handle different results?

by doing something like

{
  field {
    __typename
    ... on File {
      base
    }
  }
}

you can do the following in your code

if (field.__typename === "File") {
   field.base // this field is available
} else {
  // type is not covered by fragments do sth else
}

However, this is not enforced, just a practice that I follow.

[dotansimha]

Fixed in 1.8.0 🚀

[pedrolamas]

Just tested and it's working fine now! Thanks!! 😄