#Intersection was reduced to never

8 messages · Page 1 of 1 (latest)

dusky vigil
#

I have a CMS that provides data via GQL. I am generating frontend types using graphql-codegen (I don't think this is part of the problem, just context).

I have a function that is responsible for creating all the dynamic components on the page. The functionality is working but the types have an error — "conflicting types in some constituents".

I've read the correspondence problem macro, but I feel like in this specific example, I should be able to use some sort of type guard with a generic? But maybe my instinct is wrong...

eager valeBOT
#
anbaraen#0
Playground Link

Preview:ts // Generated Type — cannot edit type GenericPageQuery = { __typename?: "Query"; page?: { __typename: "GenericPage"; _firstPublishedAt?: string | null; id: string; components: Array< | { __typename: "CardCarousel"; id: string; } // More fields ...

You can choose specific lines to embed by selecting them before copying the link.
unique ore
#

No, this is indeed correspondence problem. data={data as never} will fix it.

#

Alternatively, since all the component data have the same shape besides just __typename being different, you can also omit the type name from PageHeroProps and MediaFeatureProps.

dusky vigil
#

Sadly I cut those out for the demo — there will be different shapes of data (eg. a title & image for a banner vs a video and a heading for a feature block).

unique ore
#

Ah yeah, in that case just do the as never and move on, slap on a comment if needed.

dusky vigil
#

Thanks for the assist 👏

unique ore
#

If you want to guarantee type safety so you don't accidentally make a mistake like:

function MediaFeature ({data}: {data: PageHeroProps}) {
    //                                ^^^^^^^^^^^^^ oops
}

You can strongly type backendTypeToComponent with a mapped type.