import { Component, OnInit, Input } from '@angular/core';
import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
import { ApolloQueryResult } from 'apollo-client';
import { DocumentNode } from 'graphql';
import { JssGraphQLService } from '../../jss-graphql.service';
import { Observable } from 'rxjs';

const ComponentQuery: DocumentNode = require('graphql-tag/loader!./heroes-connected.component.graphql');


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

export class HeroesConnectedComponent implements OnInit {
  @Input() rendering: ComponentRendering;
  query$: Observable<ApolloQueryResult<any>>;

  constructor(private graphQLService: JssGraphQLService) { }

  ngOnInit() {

    this.query$ = this.graphQLService.query({
      query: ComponentQuery
    });

  }
}

query myquery {
  search(fieldsEqual: [{name: "_templatename", value: "hero*"}], rootItem: "/sitecore/content/") {
    results {
      items {
        item {
          ... on Hero {
            id
            name
          }
        }
      }
    }
  }
}

{
  "data": {
    "search": {
      "results": {
        "items": [
          {
            "item": {
              "id": "7760B9378E114B7F9912E3EF65D8A622",
              "name": "Ouiame"
            }
          },
          {
            "item": {
              "id": "B937D81BA6A25BAEBBD814DB047D6A90",
              "name": "Arnaud"
            }
          },
          {
            "item": {
              "id": "3AF3733F5DF44ABCB41CF39EAD367D0F",
              "name": "Flora"
            }
          },
          {
            "item": {
              "id": "90BC52778C13471E9E5CCB77D687B2A0",
              "name": "Celine"
            }
          },
          {
            "item": {
              "id": "550F86ACCAF64BD2B31BE7F567FE2C19",
              "name": "Julie"
            }
          },
          {
            "item": {
              "id": "36ECD568914F4C55B80E5B38059F5C43",
              "name": "Ramdane"
            }
          },
          {
            "item": {
              "id": "88FB51A58FB95C6DA812B845B87152E4",
              "name": "Reana"
            }
          }
        ]
      }
    }
  }
}

Error: GraphQL error: Cannot query field "search" on type "Query"

type Query {
  item(path: String, language: String, version: Int): Item
  sites(name: String = "", current: Boolean = false, includeSystemSites: Boolean = false): [SiteGraphType]
  templates(path: String): [ItemTemplate]
  search(first: Int, after: String = 0, rootItem: String, keyword: String, language: String, latestVersion: Boolean = true, index: String, fieldsEqual: [ItemSearchFieldQuery], facetOn: [String!]): ContentSearchResults
}

<queries hint="raw:AddQuery">
<query name="item" type="Sitecore.Services.GraphQL.Content.Queries.ItemQuery, Sitecore.Services.GraphQL.Content"/>
<query name="sites" type="Sitecore.Services.GraphQL.Content.Queries.SiteQuery, Sitecore.Services.GraphQL.Content"/>
<query name="templates" type="Sitecore.Services.GraphQL.Content.Queries.TemplatesQuery, Sitecore.Services.GraphQL.Content"/>
<query name="search" type="Sitecore.Services.GraphQL.Content.Queries.SearchQuery, Sitecore.Services.GraphQL.Content"/>
</queries>

<app name="angular-app"
             sitecorePath="/sitecore/content/angular-app"
             inherits="defaults"
             useLanguageSpecificLayout="true"
             graphQLEndpoint="/api/angular-app"