Here's what I currently have:
public posts: QueryRef<PostsInterface>;
this.posts = this._postService.get(); //in ngOnInit
In my HTML file, it looks like this:
<mat-card *ngFor="let post of posts | async">
This allows me to display each post's information in the HTML using {{post.name}}, among others.
My question is, how can I iterate through the posts QueryRef in TypeScript? Whenever I try something like this:
for (let post of this.posts) {
console.log("Post name is: " + post.name);
}
I encounter the error
"Type 'QueryRef<PostsInterface, Record<string, any>>' is not an array type or a string type."Ultimately, my goal is to present the data in a table with pagination. I'm facing difficulties achieving this with mat-table. Are there any examples of utilizing apollographql data in a mat-table?
Update: I attempted subscribing in ngOnInit as follows:
this.posts.valueChanges.subscribe((post1: ApolloQueryResult<PostsInterface>) => {
console.log("name is: "+ post1.name)
});
However, it results in the error: Property 'name' does not exist on type 'ApolloQueryResult'. Strangely, this property can be accessed without issues when iterating with *ngFor and async pipe.
Second update: I've discovered that QueryRef is not actually an Observable or iterable at all. This realization led me to figure out that posts should be typed as an Observable instead of QueryRef. The typing mistake occurred during my transition to Apollo 2.0, where I overlooked correcting it properly.