Cannot query field "search" on type "Query"

Question

I would like to display in a view a list of items provided by a search on GraphQL query.

Context:

1. Sitecore 9.1
2. Jss 11.0.0
3. Jss application template : Angular

Componant file heroes-connected.component.ts

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 file heroes-connected.component.graphql

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

When I test the query on Sitecore Experience Graph Browser, it works fine and return results :

{
  "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"
            }
          }
        ]
      }
    }
  }
}

When I test the componant on a page, I have the following error on the browser console :

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

I have checked /sitecore/api/graph/items/master/schema :

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
}

and Sitecore config :

<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>

and EndPoint declaration :

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

What is wrong with my code / approach ?

Answer 1

From the looks of it, the configuration was not patched correctly.

The /sitecore/api/graph/items/master/… is the default JSS endpoint which has search query enabled, while the default JSS project setup does not have search query enabled (it has only Item query enabled by default).

Check your configuration in http://yourdomain/sitecore/admin/showconfig.aspx

The query must be added as part of your "angular-app" endpoint. It should look something like this

<GraphQL patch:source="Sitecore.Services.GraphQL.config">
    <endpoints patch:source="ExtendJss.config">
        <angular-appGraphQLEndpoint type="Sitecore.Services.GraphQL.Hosting.DatabaseAwareGraphQLEndpoint, Sitecore.Services.GraphQL.NetFxHost" url="/api/angular-app" resolve="true" patch:source="angular-app.config">

            <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>

        </angular-appGraphQLEndpoint>
    </endpoints>
</GraphQL>