Error in component using integrated GraphQL search query "Cannot read property search of undefined"

Question

Component definition

export default function (manifest) {
  manifest.addComponent({
    name: 'Navigation',
    graphQLQuery: `
    query NavigationQuery {
      search(
        fieldsEqual: [
          { name: "_fullpath", value: "/sitecore/content/${packageJson.config.appName}/*" },
          { name: "_templatename", value: "App Route" }
        ]
      ) {
        results {
          items {
            item {
              name
              url
            }
          }
        }
      }
    }`
  });
}

Error when rendering component

Answer 1

Find the schema configuration for the JSS app GraphQL endpoint in config files, and add the "search" query reference.

<sitecore>
  <api>
    <GraphQL>
      <endpoints>
        <jss-app-nameGraphQLEndpoint>
          <schema hint="list:AddSchemaProvider">
            <content type="Sitecore.Services.GraphQL.Content.ContentSchemaProvider, Sitecore.Services.GraphQL.Content">
              <queries hint="raw:AddQuery">
                <query name="search" type="Sitecore.Services.GraphQL.Content.Queries.SearchQuery, Sitecore.Services.GraphQL.Content" />
              </queries>
            </content>
          </schema>
        </jss-app-nameGraphQLEndpoint>
      </endpoints>
    </GraphQL>
  </api>
</sitecore>