app.component.ts

import { Component } from '@angular/core'; 
import { Apollo } from 'apollo-angular'
import gql from 'graphql-tag'

/*
  Apollo is needed to bring Apollo class to the constructor
  gql is a lib to create larger strings - our queries - and permit
  vscode syntax-highlight
*/

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'graphcool-chat';

  constructor(private apollo: Apollo){
   this.createUser('Vitor','vitorpiovezam@yandex.com','123456789');
   this.allUsers();
  }

  allUsers(): void{
    let count = 0;
  }

  // Get Users
  allUsers() {
    this.apollo.mutate({
      mutation: gql`
        query allUsers {
          allUsers {
            id
            name
          }
        }
      `
    }).subscribe(res => console.log(res));
  }

  // Mutation Sample
  async createUser(name,email,password){
    this.apollo.mutate({
      mutation: gql`
        mutation CreateNewUser($name: String!, $email: String!, $password: String!){
          createUser(name: $name, email: $email, password: $password){
            id,
            name,
            email,
          }
        }
      `,
      variables:{
        name: name,
        email: email,
        password: password
      }
    }).subscribe(res => console.log(res));
  }

}