Can't use proper type when using generated code

[milosa]

The generated class, including the query, look like this:

This query returns multiple products.

Now, when I want to use the generated code, I can only type the result as Observable<any>, but the documentation uses the correct type (posts: Observable<Post[]>;), instead of Observable<any>.
See: https://apollo-angular.com/docs/data/services#code-generation

My component looks like this:

When I try to change the Observable<any> on line 23 to Observable<Product[]>, I'll get this error on line 32:

TS2322: 
Type 'Observable<({ __typename?: "Product" | undefined; name: string; } | null | undefined)[] | null | undefined>' is not assignable to type 'Observable<Product[]>'.   
Type '({ __typename?: "Product" | undefined; name: string; } | null | undefined)[] | null | undefined' is not assignable to type 'Product[]'.    
Type 'undefined' is not assignable to type 'Product[]'.

Any ideas how I can use the proper type on line 23?

I already tried removing the shareReplay()(which I copied from another example) but this didn't make any difference.