Error data type unknown(result.data.posts) and *ngFor '[object Object]'

[AlexeySovid]

When writing .valueChanges.pipe(map((result) => result.data.posts)), pops up a message of the following type " result.data.posts - Object is of type "Unknown".ts(2571)" Environment:

├── @angular/cli@14.1.2
├── @angular/core@14.1.2
├── @apollo/client@3.6.9
├── apollo-angular@4.0.1
├── graphql@16.5.0
└── typescript@4.7.4

Additional context

It is also not possible to bring the request object into an array. When using *ngFor in the console, an error message of this type pops up: " ERROR Error: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe? Find more at https://angular.io/errors/NG02200 at NgForOf.ngDoCheck (common.mjs:3202:31) at callHook (core.mjs:2501:18) at callHooks (core.mjs:2460:17) at executeCheckHooks (core.mjs:2392:5) at refreshView (core.mjs:11993:21) at refreshComponent (core.mjs:13080:13) at refreshChildComponents (core.mjs:11774:9) at refreshView (core.mjs:12034:13) at refreshComponent (core.mjs:13080:13) at refreshChildComponents (core.mjs:11774:9) "

component code listing attached

expnav.module.ts

import {Component, OnInit} from '@angular/core';
import {Apollo, gql} from 'apollo-angular';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';

const GET_POSTS = gql`
  query GetPosts {
    posts{
      data{
        id,
        attributes{
          title,
        }
      }
    }
  }
`;

@Component({ 
  selector: 'app-expnav',
  templateUrl: './expnav.component.html',
  styleUrls: ['./expnav.component.css'] 
})
export class ExpnavComponent implements OnInit {

  posts$: Observable<any>;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.posts$ = this.apollo
      .watchQuery({query: GET_POSTS})
      .valueChanges.pipe(map((result) => result.data.posts));

  }

  panelOpenState = false;
}

expnav.module.html

<mat-accordion class="accordion">
    <mat-expansion-panel hideToggle="true" (opened)="panelOpenState = true" (closed)="panelOpenState = false">

        <mat-expansion-panel-header class="expHeader">
            <mat-icon  [class.activePanel]="panelOpenState" [class.inactivePanel]="!panelOpenState">chevron_right</mat-icon>
            <mat-panel-title class="expTitle">
                Self aware panel
            </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-divider></mat-divider>
        <div class="link flex items-center my-4" *ngFor="let post of posts$ | async">
            <p >
                {{post.data}}
            </p>
        </div>
    </mat-expansion-panel>
</mat-accordion>
<mat-divider></mat-divider>

[MaximS]

The "result.data.posts - Object is of type "Unknown".ts(2571)" is OK since you do not use typed form of a query. See graphql-code-gen on how to add strong typing to graphql queries.

As for "ERROR Error: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object" - it means that result.data.posts is not an array (or any kind of iterable).

[AlexeySovid]

Then you can suggest how to iterate query objects. Because even with the help of GraphQL Generate nothing comes out for me (((

[MaximS]

Show the value of result.data.posts. May be you just get wrong data from backend. Or you could use any GraphQL dev tool like graphiql to examine query results yourself.