Narrow Type From Union

[tobiasschweizer]

TypeScript types for the GraphQL schema are generated by https://github.com/dotansimha/graphql-code-generator

Union types are expressed as TS unions.

Here is how to create more specific types for a union:

type ResultUnion = FetchQuery['fetch']

type Specific<T extends ResultUnion, N extends 'ScholarlyArticle' | 'Book' | 'Dataset' | 'ResearchProject' | 'Organization' | 'Person' | 'ArchiveComponent' | 'ArchiveOrganization'> = {

    [P in keyof T]:
        T['__typename'] extends N ? T : never

}[keyof T]

export type ScholarlyArticle = Specific<ResultUnion, 'ScholarlyArticle'>

export type Book = Specific<ResultUnion, 'Book'>

see also https://stackoverflow.com/questions/79112838/typescript-create-new-type-for-narrowed-union-type#79112838

[tobiasschweizer]

• https://www.apollographql.com/docs/react/development-testing/static-typing#typing-render-prop-components
• https://the-guild.dev/graphql/codegen/docs/guides/react-vue
• https://the-guild.dev/graphql/codegen/docs/advanced/how-does-it-work#example-with-graphql-codegentypescript
• https://the-guild.dev/graphql/codegen/docs/getting-started