JSS 18 + GraphQL playground configuration issues - A public action method 'ui' was not found on controller

Question

I am trying to use GraphQL playground in the test environment using Sitecore 10.1 with JSS 18. It works like a charm on local with the same configuration (both local & test have Standalone role), however when I try to run any query on test it does not work.

I try to access the endpoint url + /ui?sc_apikey={mykey} in the browser, the same URL is used in the playground URL. When I run a query

{
  item(path: "/sitecore/templates") {
    id
    path
    children {
      name
    }
    template {
       fields {
        name
      }
    }
  }
}

In the result window I see:

{
  "error": "Unexpected token < in JSON at position 0"
}

and this happens for any query. When I checked the logs I see the below:

[HttpException]: A public action method 'ui' was not found on controller Sitecore.Services.GraphQL.Hosting.Mvc.GraphQLController.
       at System.Web.Mvc.Controller.HandleUnknownAction(String actionName)
       at System.Web.Mvc.Controller.<>c.<BeginExecuteCore>b__152_1(IAsyncResult asyncResult, ExecuteCoreState innerState)
       at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult)
       at System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult)
       at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult)
       at System.Web.Mvc.Controller.EndExecute(IAsyncResult asyncResult)
       at System.Web.Mvc.MvcHandler.<>c.<BeginProcessRequest>b__20_1(IAsyncResult asyncResult, ProcessRequestState innerState)
       at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult)
       at System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult)
       at Sitecore.Mvc.Routing.RouteHttpHandler.EndProcessRequest(IAsyncResult result)
       at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
       at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step)
       at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

So I am quite confused now because it says that the "UI" method does not exist, but with exactly the same query I am able to make things work on my local but not on test. Additionally I tried to remove the "/ui" from the playground URL and I'm just getting timeouts with no errors so it is quite hard to track.

What else should I verify to find the cause?

Answer 1

The standard url for the GraphQL playground that comes with Headless Services is: https://{CM Hostname}}/sitecore/api/graph/edge/ui

This endpoint is configured in the Sitecore.Services.GraphQL.EdgeContent.config file. Here's the snippet that applies to the playground:

<endpoints>
    <edge url="/sitecore/api/graph/edge" type="Sitecore.Services.GraphQL.Hosting.GraphQLEndpoint, Sitecore.Services.GraphQL.NetFxHost" resolve="true">
        <url>$(url)</url>
        <enableSubscriptions>false</enableSubscriptions>
        <!-- lock down the endpoint when deployed to content delivery -->
        <graphiql role:require="ContentDelivery">false</graphiql>
        <enableSchemaExport role:require="ContentDelivery">false</enableSchemaExport>
        <enableStats role:require="ContentDelivery">false</enableStats>
        <enableCacheStats role:require="ContentDelivery">false</enableCacheStats>
        <disableIntrospection role:require="ContentDelivery">true</disableIntrospection>
        <allowUnauthenticatedCorsPreflight role:require="ContentDelivery">false</allowUnauthenticatedCorsPreflight>

        <schema hint="list:AddSchemaProvider">
            <content ref="/sitecore/api/GraphQL/defaults/content/schemaProviders/edgeContent" param1="master" role:require="ContentManagement"/>
            <content ref="/sitecore/api/GraphQL/defaults/content/schemaProviders/edgeContent" param1="web" role:require="ContentDelivery"/>
            <content ref="/sitecore/api/GraphQL/defaults/content/schemaProviders/edgeContent" param1="context" role:require="Standalone"/>
        </schema>

        <!-- Determines the security of the service. Defaults are defined in Sitecore.Services.GraphQL.config -->
        <security ref="/sitecore/api/GraphQL/defaults/security/publicService" />

        <!-- Determines how performance is logged for the service. Defaults are defined in Sitecore.Services.GraphQL.config -->
        <performance ref="/sitecore/api/GraphQL/defaults/performance/standard" />

        <!--
            Cache improves the query performance by caching parsed queries.
            It is also possible to implement query whitelisting by implementing an authoritative query cache;
            WhitelistingGraphQLQueryCache is an example of this, capturing queries to files in open mode and allowing only captured queries in whitelist mode.
        -->
        <cache type="Sitecore.Services.GraphQL.Hosting.QueryTransformation.Caching.GraphQLQueryCache, Sitecore.Services.GraphQL.NetFxHost">
            <param desc="name">$(url)</param>
            <param desc="maxSize">10MB</param>
        </cache>

    </edge>
</endpoints>

Do you see this configuration when you check your ShowConfig?

https://{CM Hostname}}/sitecore/admin/showconfig.aspx

If not, you will need to reinstall Headless Services.