Typescript Maybe, error about null not being covered

Question

I don't know how to get rid of this error, and I don't know why it talks about null.

Shouldn't the seo?.breadcrumbs || [] already cover the case where breadcrumbs is null?

However in the Intro Propos, if I do as SEOPostTypeBreadcrumbs[], then it fixes the issue, but I feel that it is not the solution.

EDIT: It looks like it complains that items in the array of breadcrumbs can be null? This was autogenerated by Wordpress GraphQL tool graphql-codegen

TS2322: Type 'Maybe<{ __typename?: "SEOPostTypeBreadcrumbs" | undefined; } 
& Pick<SeoPostTypeBreadcrumbs, "text" | "url">>[]' is not assignable to type 'SeoPostTypeBreadcrumbs[]'.   
Type 'Maybe<{ __typename?: "SEOPostTypeBreadcrumbs" | undefined; } & Pick<SeoPostTypeBreadcrumbs, "text" | "url">>' 
is not assignable to type 'SeoPostTypeBreadcrumbs'.     
Type 'null' is not assignable to type 'SeoPostTypeBreadcrumbs'.  
intro.tsx(28, 5): The expected type comes from property 'breadcrumbs' which is declared here on type 'IntrinsicAttributes & IntroProps'

seo type:

export type CptNeighborhoodFragment = { __typename: 'CptNeighborhood' } & {
    seo?: Maybe<
        { __typename?: 'PostTypeSEO' } & Pick<
            PostTypeSeo,
            | 'metaDesc'
            | 'metaKeywords'
            | 'metaRobotsNofollow'
            | 'metaRobotsNoindex'
            | 'opengraphAuthor'
            | 'opengraphDescription'
            | 'title'
        > & {
                breadcrumbs?: Maybe<
                    Array<
                        Maybe<
                            { __typename?: 'SEOPostTypeBreadcrumbs' } & Pick<
                                SeoPostTypeBreadcrumbs,
                                'text' | 'url'
                            >
                        >
                    >
                >;
            }
    >;
};

Usage:

<Intro
    title={seo?.title || ''}
    breadcrumbs={seo?.breadcrumbs || []}
/>

Intro Props

interface IntroProps {
    title: string;
    breadcrumbs?: SeoPostTypeBreadcrumbs[];
}

SeoPostTypeBreadcrumbs

export type SeoPostTypeBreadcrumbs = {
    __typename?: 'SEOPostTypeBreadcrumbs';
    text?: Maybe<Scalars['String']>;
    url?: Maybe<Scalars['String']>;
};

Answer 1

You can set an avoidOptionals object in your codegen config to prevent nested Maybe wrappers from appearing in the output code

you can also modify the value of the Maybe type from T | null (default) to whatever you'd like it to be; T | null | undefined, maybe.