docs(cookbook/graphql): Add GraphQL search heroes

Author: Urigo

public/docs/_examples/heroes-graphql/ts/app/hero-search.component.html

@@ -3,7 +3,7 @@
   <h4>Hero Search</h4>
   <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
   <div>
-    <div *ngFor="let hero of heroes | async"
+    <div *ngFor="let hero of heroes | async | select: 'heroes'"
          (click)="gotoDetail(hero)" class="search-result" >
       {{hero.name}}
     </div>

public/docs/_examples/heroes-graphql/ts/app/hero-search.component.ts

@@ -5,26 +5,27 @@ import { Router }            from '@angular/router';
 import { Observable }        from 'rxjs/Observable';
 import { Subject }           from 'rxjs/Subject';
 
-import { HeroSearchService } from './hero-search.service';
 import { Hero } from './hero';
 
+import { Angular2Apollo, ApolloQueryObservable } from 'angular2-apollo';
+import gql from 'graphql-tag';
+
 @Component({
   moduleId: module.id,
   selector: 'hero-search',
   templateUrl: 'hero-search.component.html',
-  styleUrls: [ 'hero-search.component.css' ],
-  providers: [HeroSearchService]
+  styleUrls: [ 'hero-search.component.css' ]
 })
 export class HeroSearchComponent implements OnInit {
   // #docregion search
-  heroes: Observable<Hero[]>;
+  heroes: ApolloQueryObservable<any>;
   // #enddocregion search
   // #docregion searchTerms
   private searchTerms = new Subject<string>();
   // #enddocregion searchTerms
 
   constructor(
-    private heroSearchService: HeroSearchService,
+    private apollo: Angular2Apollo,
     private router: Router) {}
   // #docregion searchTerms
 
@@ -36,19 +37,23 @@ export class HeroSearchComponent implements OnInit {
   // #docregion search
 
   ngOnInit(): void {
-    this.heroes = this.searchTerms
-      .debounceTime(300)        // wait for 300ms pause in events
-      .distinctUntilChanged()   // ignore if next search term is same as previous
-      .switchMap(term => term   // switch to new observable each time
-        // return the http search observable
-        ? this.heroSearchService.search(term)
-        // or the observable of empty heroes if no search term
-        : Observable.of<Hero[]>([]))
-      .catch(error => {
-        // TODO: real error handling
-        console.log(error);
-        return Observable.of<Hero[]>([]);
-      });
+
+    this.heroes = this.apollo.watchQuery({
+      query: gql`
+        query searchHeroes ($search: String) {
+          heroes (search: $search) {
+            id
+            name
+          }
+        }
+      `,
+      variables: {
+        search: this.searchTerms
+          .debounceTime(300)        // wait for 300ms pause in events
+          .distinctUntilChanged()   // ignore if next search term is same as previous
+      },
+      forceFetch: true
+    })
   }
   // #enddocregion search
 

public/docs/_examples/heroes-graphql/ts/app/hero-search.service.ts

@@ -12,25 +12,30 @@ import { execute } from 'graphql';
 const typeDefinitions = `
 type Hero {
   id: Int!
-  name: String
+  name: String!
 }
 
 # the schema allows the following query:
 type Query {
-  heroes: [Hero]
+  heroes(search: String): [Hero]
 
   hero(heroId: Int!): Hero
 }
 
 # this schema allows the following mutation:
 type Mutation {
   updateHero (
-    heroId: Int!
+    id: Int!
+    name: String!
   ): Hero
 
   addHero (
     heroName: String!
   ): Hero
+
+  deleteHero (
+    id: Int!
+  ): Hero
 }
 
 # we need to tell the server which types represent the root query
@@ -42,7 +47,7 @@ schema {
 `;
 // #enddocregion graphql-schema
 // #docregion heroes-array
-const heroes = [
+let heroes = [
   {id: 11, name: 'Mr. Nice'},
   {id: 12, name: 'Narco'},
   {id: 13, name: 'Bombasto'},
@@ -59,20 +64,26 @@ const heroes = [
 // #docregion resolvers
 const resolveFunctions = {
   Query: {
-    heroes() {
-      return heroes;
+    heroes(obj: any, args: any) {
+      if (args.search) {
+        return heroes.filter(function (currentHero) { 
+          return currentHero.name.search(args.search) != -1; 
+        });
+      } else {
+        return heroes;
+      }
     },
     hero(obj: any, args: any, context: any) {
       return find(heroes, { id: args.heroId });
     }
   },
   Mutation: {
     updateHero(root: any, args: any) {
-      let hero = find(heroes, { id: args.heroId });
+      let hero = find(heroes, { id: args.id });
       if (!hero) {
-        throw new Error(`Couldn't find post with id ${args.heroId}`);
+        throw new Error(`Couldn't find post with id ${args.id}`);
       }
-      hero = args.heroId;
+      hero.name = args.name;
       return hero;
     },
     addHero(root: any, args: any) {
@@ -82,8 +93,19 @@ const resolveFunctions = {
         id: maxId + 1
       };
       heroes.push(newHero);
-      return(newHero);
-    }
+      return newHero;
+    },
+    deleteHero(root: any, args: any) {
+      console.log('args', args);
+      let hero = find(heroes, { id: args.id });
+      console.log('deleted hero start', hero);
+      if (!hero) {
+        throw new Error(`Couldn't find post with id ${args.id}`);
+      }
+      heroes = heroes.filter(function (currentHero) { return currentHero.id != args.id; });
+      console.log('deleted hero', hero);
+      return hero;
+    },
   }
 }
 // #enddocregion resolvers