Created: 10 May 2019, last update: 30 Jan 2022
Caveats with JSS GraphQL endpoint
There are multiple way to get your GraphQL endpoint. Copy the example from \App_Config\Sitecore\Services.GraphQL or from https://jss.sitecore.com/docs or you get it when you deploy your code first config to Sitecore. There are differences between the versions. This blog helps you to configure when you have an issue.
security/systemService or security/publicService
When you use an example from \App_Config\Sitecore\Services.GraphQL you get a version with /security/systemService it means Authentication required. Even if you are logged in to Sitecore, you can get the message
{
"errors": [
{
"message": "Authentication required."
}
]
}
When you try to execute a query. This is because in Sitecore 9.1 the login is changed and now you need to configure the path in siteNeutralPaths else the endpoint has the user extranet\anonymous
You can use this config file:
<configuration>
<sitecore>
<pipelines>
<owin.cookieAuthentication.validateIdentity>
<processor type="Sitecore.Owin.Authentication.Pipelines.CookieAuthentication.ValidateIdentity.ValidateSiteNeutralPaths, Sitecore.Owin.Authentication">
<siteNeutralPaths hint="list">
<path hint="grapql">/sitecore/api/graph/items/</path>
</siteNeutralPaths>
</processor>
</owin.cookieAuthentication.validateIdentity>
</pipelines>
</sitecore>
</configuration>
Or change
<security ref="/sitecore/api/GraphQL/defaults/security/systemService" />
To
<security ref="/sitecore/api/GraphQL/defaults/security/publicService" />
Now you need to provide your api key add ?sc_apikey={your-key} to you url. Else you get
{
"errors": [
{
"message": "SSC API key is required. Pass with 'sc_apikey' query string or HTTP header."
}
]
}
Search schema
When you use the GraphQL endpoint that you get with the
jss create my-first-jss-app react
The /api/ my-first-jss-app/ui or whatever name you had for that. You miss the search schema so you get this error when you do a search query:
{
"errors": [
{
"message": "Cannot query field \"search\" on type \"Query\".",
"locations": [
{
"line": 2,
"column": 3
}
],
"extensions": {
"code": "5.2.1"
}
}
]
}
In your react app or whatever framework you use, see the \sitecore\config\myreactapp.config. You can add the search, with this line:<query name="search" type="Sitecore.Services.GraphQL.Content.Queries.SearchQuery, Sitecore.Services.GraphQL.Content" /> Then your GraphQL endpoint looks like this:
<schema hint="list:AddSchemaProvider">
…
<queries hint="raw:AddQuery">
<!-- enable querying on items via this API -->
<query name="item" type="Sitecore.Services.GraphQL.Content.Queries.ItemQuery, Sitecore.Services.GraphQL.Content" />
<query name="search" type="Sitecore.Services.GraphQL.Content.Queries.SearchQuery, Sitecore.Services.GraphQL.Content" />
</queries>
Alternatively, use this:
<!--
The template predicate defines which templates will have GraphQL types generated for them. This is NOT a security measure - all fields
that the API key user/authenticated user can access can be queried by name - but can be used to limit the scope of your GraphQL schema.
-->
<schema hint="list:AddSchemaProvider">
<!-- defaults are defined in Sitecore.Services.GraphQL.Content.config -->
<content ref="/sitecore/api/GraphQL/defaults/content/schemaProviders/systemContent" param1="web" />
</schema>
See \App_Config\Sitecore\Services.GraphQL\Sitecore.Services.GraphQL.Content.config
Whitelists controllers
GraphQL endpoints must be individually whitelisted using SSC API keys' Allowed Controllers field. * still whitelists everything, but when specifying allowed controllers you must whitelist the Sitecore.Services.GraphQL.Hosting.Mvc.GraphQLController as well as each GraphQL endpoint using GraphQL:/url/to/endpoint syntax instead of a C# type name. For example: Other.Controller, Other.Assembly;Sitecore.Services.GraphQL.Hosting.Mvc.GraphQLController;GraphQL:/api/jssreactweb
GraphQL Examples
With this help, all sample queries from Sitecore JSS Integrated GraphQL Queries and Content tagging JSS GraphQL should work. Tip the blog from Adam Lamarre contain a lot of good GraphQL content https://www.adamlamarre.com/
