How can I make a GraphQL Query in Ionic?

Ionic Framework ionic-v3
1

I am having an issue with making a GraphQL query. I am using AWS Amplify with the Ionic app and need to make a GraphQL query to AWS AppSync. I have every query, mutation, and subscription exported as constants in ./graphql. However, when going to make the graphql request on another page, I can’t import the queries using import * as queries from './graphql/queries' so that I can use them to make graphql queries using

    ngOnInit() {
        const query = API.graphql(graphqlOperation(queries.listdata)) as Promise<any>;

    query.then(res => {
      this.data = res.data.listVendorProfiles.items;
      });
    }

If someone could tell me what I am doing wrong, I would greatly appreciate it as I am very new to Ionic. Thank you so much!

Here’s the complete code of the file where I am trying to make my request.

 import { Component, OnInit} from '@angular/core';
    import { ModalController } from '@ionic/angular';
    import { Router } from '@angular/router';
    import * as queries from './graphql/queries'
    import Amplify, { API, graphqlOperation } from "aws-amplify";
    
    @Component({
      selector: 'app-tab1',
      templateUrl: 'tab1.page.html',
      styleUrls: ['tab1.page.scss']
    })
    export class Tab1Page implements OnInit{
    
      public data;
    
      constructor(private modalController: ModalController,
                  private router: Router) {
      }
    
    ngOnInit() {
        const query = API.graphql(graphqlOperation(queries.listdata)) as Promise<any>;
    
        query.then(res => {
          this.data = res.data.listVendorProfiles.items;
        });
      }
    }

Here’s my ionic info.

Ionic:

   Ionic CLI                     : 5.2.3 (/Users/aryanjain/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.0
   @angular-devkit/build-angular : 0.801.2
   @angular-devkit/schematics    : 8.1.2
   @angular/cli                  : 8.1.2
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   ios-sim : 8.0.1
   NodeJS  : v10.16.0 (/usr/local/bin/node)
   npm     : 6.10.2
   OS      : macOS Mojave
   Xcode   : Xcode 10.3 Build version 10G8

If someone could just walk me through how to make a graphql request in an ionic app, I would really appreciate it.

6

follow below provided blog url author did great work for this

7

What a coincidence I was following the same guide! However, when I go to make the graphql query in tab1.page.ts (not home.page.ts because I am making a tabbed app and the page the query is on shouldn’t matter I think), the query isn’t even made (I verified this by trying to catch errors and log anything on the console when the ngOnInit function runs).

8

the libraries have been updated, cam you provide more code?

9

@aaronksaunders which code do you need me to provide? Please let me know and I will have it for you. My complete Git Repo of this project is here.

Ionic App Repo

10

@ShadeAJ

 ngOnInit() {
   const query = API.graphql(graphqlOperation(listVendorProfiles)) as Promise<any>;
   console.log("NGONINIT RUNS");
   console.log(listVendorProfiles);

   query.then(res => {
     this.profile = res.data.listVendorProfiles.items;
   });
 }
11

That is the place I’m trying to make the call. However, the NgOnit function doesn’t even run. Is there something wrong with the below code? I’m not getting any errors regarding it in my console.

export class Tab1Page implements OnInit{
    
      public data;
    
      constructor(private modalController: ModalController,
                  private router: Router) {
      }
    
    ngOnInit() {
        const query = API.graphql(graphqlOperation(queries.listdata)) as Promise<any>;
    
        query.then(res => {
          this.data = res.data.listVendorProfiles.items;
        });
      }
    }
12

use the code I provided… it is different than yours and it works…

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';  
import { Router } from '@angular/router';
import { listVendorProfiles } from 'src/app/graphql/queries';
import  { API, graphqlOperation } from "aws-amplify";


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

  public profile;

  constructor(private modalController: ModalController,
              private router: Router ) {
  }

  async ngOnInit() {
    const query = API.graphql(graphqlOperation(listVendorProfiles)) as Promise<any>;
    console.log("NGONINIT RUNS");
    console.log(listVendorProfiles);

    query.then(res => {
      this.profile = res.data.listVendorProfiles.items;
    });
  }
}
1 Like
13

@aaronksaunders I tried your code however the terminal doesn’t output NGONIT RUNS even if I run ionic serve --verbose. I was just wondering do I have to change the constructor or change something in app.module.ts or app.component.ts to get the file to run?

14

I will push my changes back to the repo you provided - the output won’t be in the terminal, it will be in the browse debug console

15

Thanks @aaronksaunders, it works! The query is made and I get back a response. I know this is off of topic but how can I display that data in an html file?

16

<pre>{{ profile | json }}</pre>

17

I got it with this code

<ion-card-subtitle *ngFor="let profiles of profile">

{{ profiles.name }}

</ion-card-subtitle>
18

I was stuck for so long on this. I can’t thank you enough for your help :pray: