How to Graphql Observable response to array

Question

How can I convert postgraphile response to ng array?

my query from my graphqlclient is :

query MyQuery {
  messages {
    nodes {
      message
    }
  }
}

here is my response: (**** let gimsData=client.request(query) *****)

{
  "data": {
    "messages": {
      "nodes": [
        {
          "message": "test "
        },
        {
          "message": "test2"
        }
      ]
    }
  }
}

in my page.html

<ion-card  button *ngFor="let item of (gimsData | async)" > 

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

I think I need to pipe(map) or subcribe gimsData. confused here. Thank You

Answer 1

You need to provide an Observable where you have async pipe. So you can make an Observable out of gimsData and it will work as you desire.

Answer 2

i find the solution without pipe or map.

import { Component } from '@angular/core';
import { request, gql } from 'graphql-request'
import { Observable, of } from 'rxjs';

const query = gql`
query{allLabels {
  edges {
    node {
      labelName
      labelType
    }
  }
}}
`
export interface labeli {
  labelName: string,
  labelType: number
}
export interface nodei {
  node: labeli
}
export interface datai {
  allLabels: {
    edges: []
  }
}

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor() {
    this.searchgim()
  }
  ea: nodei[];
  dli: labeli[] = [];
  gimResults: Observable<any>;
  async searchgim() {
    console.log("searchgim function entered");
    await request('http://localhost:5000/graphql', query).then(data => {
      let ddatai: datai = data;
      this.ea = ddatai.allLabels.edges;
      this.ea.forEach(element => {
        let eea: labeli
        eea = element.node
        this.dli.push(eea);
      });

      console.log(this.dli);
      this.gimResults = of(this.dli);

    });
  }
}