Apollo-angular: Iterating through QueryRef

[moltma]

I have the following:
public posts: QueryRef<PostsInterface>;
this.posts = this._postService.get(); //in ngOnInit

And in the corresponding HTML:

And then am able to display each post's fields in html using {{post.name}}, etc.

My question is, how can I achieve the same iteration through the posts QueryRef inside typescript? When I try the following:

for (let post of this.posts) {
      console.log("Post name is: " + post.name);
    }

I get the error "Type 'QueryRef>' is not an array type or a string type."
If ngFor is able to iterate through the QueryRef, there must be some way to do it in the typescript itself?

Ultimately I want to display the data in a table with a paginator. Having trouble achieving this with mat-table. Are there any examples of displaying data grabbed with apollographql in a mat-table?

[kamilkisiela]

QueryRef is not an Observable or even an iterable object so it cannot by used with AsyncPipe.

What you're looking for is valueChanges prop of QueryRef.

[moltma]

If QueryRef is not Observable or Iterable, how is ngFor able to iterate through it with no issues?

[kamilkisiela]

Impossibru. QuerRef is just an object, it's impossible to iterate an object so it means you're doing something wrong or you're returning an Observable in a service but you're defining it as QueryRef in a component. No other options.

[moltma]

Thanks, I realize now the problem is I incorrectly migrated to Apollo 2.0