Access inner indexed type in TypeScript

Question

I have a type that's generated by GraphQL codegen that looks like the following:

export type GetAudioQuery = { audioByPk?: { address: string, id: any, title?: string | null, subtitle?: string | null, audio_tags: Array<{ tagId: any }> } | null };

In my React component, I want to type my state, but I am not entirely sure how to access the inner audio_tags from above. My first attempt was something like the following:

const [currTags, setCurrTags] = useState<GetAudioQuery['audioByPk']['audio_tags']>([]);

What's the correct way to type my useState here?

Answer 1

Since audioByPk is optional, you would have to use NonNullable first:

const [currTags, setCurrTags] = useState<NonNullable<GetAudioQuery['audioByPk']>['audio_tags']>([]);