I am currently working on an Angular application that uses graphql-codegen to automatically generate models based on the GraphQL endpoint.
Within the component, there is an image tag enclosed in a container:
<ng-container *ngFor="let blog of (blogPosts | async)?.blogPost | paginate: config">
<img class="image" *ngIf="blog.image.urls" src="http://localhost:5002{{blog.image.urls}}"
alt="Placeholder image">
</ng-container>
When compiling the code, I encounter errors related to (blogPosts | async)?.blogPost and the image part of the blog. The former error states:
Argument of type '({ __typename?: "BlogPost" | undefined; path: string; subtitle?: string | null | undefined; displayText?: string | null | undefined; owner: string; publishedUtc?: any; markdownBody?: { ...; } | ... 1 more ... | undefined; image?: { ...; } | ... 1 more ... | undefined; } | null)[] | null | undefined' is not assignable to parameter of type 'Collection<unknown>'
And the latter error message reads:
Object is of type 'unknown'
The TypeScript section of the component includes a GraphQL query generated by the graphql-codegen library:
import { Component, OnInit } from '@angular/core';
// other imports...
@Component({
selector: 'app-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
// component properties...
}
// other component methods...
In the snippet above, you can see that BlogPostsGQL is responsible for fetching data in the blog component. Here is its corresponding code:
// BlogPostsGQL code here...
The required packages for this application include:
// package dependencies listed here...
If you have any suggestions on how to resolve these errors, please let me know!
Thank you!