I can not display response while it exists in the console.log

[Bilel-NEJI]

Hi everyone, Hi@kamilkisiela, Hi@lindeberg
I'm new to the angular framework and I'm building an app using Apollo who consumes a Quarkus/GraphQL API.
I did manage to get the response in the console, then I tried to display it in a table, but it seems that there is something wrong which I'm missing.
Please find below the code:

#graphql.module.ts

   import { NgModule } from "@angular/core";
   import {APOLLO_OPTIONS} from 'apollo-angular';
   import { ApolloClientOptions, InMemoryCache } from "@apollo/client/core";
   import { HttpLink } from "apollo-angular/http";

   const uri = 'http://localhost:8008/graphql/'; // <-- add the URL of the GraphQL server here
   export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
         return {
             link: httpLink.create({uri}),
             cache: new InMemoryCache(),   };   }

   @NgModule({
    providers: [
    {
        provide: APOLLO_OPTIONS,
        useFactory: createApollo,
        deps: [HttpLink], },   ],   })
        
       export class GraphQLModule {}

#app.module.ts

       import { NgModule } from '@angular/core';
       import { BrowserModule } from '@angular/platform-browser';

       import { AppRoutingModule } from './app-routing.module';
       import { AppComponent } from './app.component';

       import { HttpClientModule } from "@angular/common/http";
       import { ApolloModule, APOLLO_OPTIONS } from "apollo-angular";
       import { HttpLinkModule, HttpLink } from "apollo-angular-link-http";
       import { InMemoryCache } from "apollo-cache-inmemory";
       import { FormsModule } from '@angular/forms';
       import { GraphQLModule } from './graphql.module';

       @NgModule({
                 declarations: [
                      AppComponent  ],
         imports: [
                    BrowserModule,
                    AppRoutingModule,
                    HttpClientModule,
                    GraphQLModule,
                   ApolloModule,
                   HttpLinkModule,
                   FormsModule  ],
          providers: [{
               provide: APOLLO_OPTIONS,
               useFactory: (httpLink: HttpLink) => {
                    return {
                          cache: new InMemoryCache({
                          addTypename: false        }),
                      link: httpLink.create({   uri: "http://localhost:8080/graphql"       })      }    },
                     deps: [HttpLink]      }  ],
                     bootstrap: [AppComponent]   })
         export class AppModule { }

#app.component.ts

       import {Component, OnInit} from '@angular/core';
       import {Subscription} from 'rxjs';
       import {Apollo, gql} from 'apollo-angular';
       import { Device } from './models/Device';

       export const GET_ALL_DEVICES = gql`
           query getAllDevices {
                     allDevices {
                           devices {
                                deviceName
                                deviceState
                                deviceType
                                miDeviceId    }  }   }`

      @Component({
             selector: 'app-root',
             templateUrl: './app.component.html',
             styleUrls: ['./app.component.css']  })

       export class AppComponent implements OnInit {
            xallDevices:Device [] = [];
            title = 'apollo-mcs-thirdparty';
            loading = true;

           constructor(private apollo: Apollo) {}

          ngOnInit(): void {
              this.apollo.watchQuery<any>({
              query: GET_ALL_DEVICES
              }).valueChanges.subscribe(({ data , loading }) => {
              console.log(data.allDevices);
              console.log(loading);
              this.xallDevices = data.devices;
              this.loading = loading;    });  } }

#app.component.html

 <table class="table table-hover">
   <thead>
     <tr>
       <th scope="col">Device Name</th>
       <th scope="col">Device State</th>
       <th scope="col">Device Type</th>
       <th scope="col">Mi Device Id</th>
     </tr>
   </thead>

   <tbody>
     <tr *ngFor="let d of xallDevices">
       <td>{{d.deviceName}}</td>
       <td>{{d.deviceState}}</td>
       <td>{{d.deviceType}}</td>
       <td>{{d.miDeviceId}}</td>
     </tr>
   </tbody>
 </table>

what I do get is:

What should I do to display the response in the table?

[grenobnik]

It looks like you are logging console.log(data.allDevices); but saving something different on your variable that is binded to the table this.xallDevices = data.devices;

[Bilel-NEJI]

Hi @grenobnik
thanks that it the point that I missed. And I modified the:

#app.component.html to be like this:

 <tbody>
     <tr *ngFor="let d of xallDevices.devices">
       <td>{{d.deviceName}}</td>
       <td>{{d.deviceState}}</td>
       <td>{{d.deviceType}}</td>
       <td>{{d.mieleDeviceId}}</td>
     </tr>
 </tbody>

and the #app.component.ts to be like this:

 ngOnInit(): void {
     this.apollo.watchQuery<any>({
       query: GET_ALL_DEVICES
     }).valueChanges.subscribe(({ data , loading }) => {
       console.log(data.allDevices);
       console.log(loading);
       this.xallDevices = data.allDevices;
       this.loading = loading;
     })
   }