Integrated GraphQL is not executed in Experience Editor

Question

We use Sitecore 9.2, SXA 1.9 + JSS 12.0. As for the JSS, we are using Sitecore First approach. Some JSON renderings have integrated GraphQL queries.

The Jss site was created trough JSS Tenant/JSS Site:

The default JSS GraphQL endpoint is delivered into zzz folder during the following JSS CLI command - jss deploy config

Interesting thing that the Layout Service does really execute appropriate queries. To be sure we just use:

http://[site]/sitecore/api/layout/render/jss?item={itemID}&sc_apikey={apiKeyID}

and using [graphQL_endpoint]/stats we observe that the Queries Performed property is incremented every time. So, we know that LayoutService does really triggers the query of the component:

When we open the Experience Editor - no data inside the data source:

And the Queries Performed property in [graphQL_endpoint]/stats is NOT incremented. That means in Experience Editor the GraphQL query is NOT executed.

P.S. Interesting magic - only once we were able to observe that the component with GraphQL query had been rendered on the Experience Editor as expected. And when we disabled jss config file in zzz config folder and rolled back - the issue came back and never gone away.

Answer 1

Ok, having spent some time trying to figure out how this whole thing works in Sitecore, I can now say, that SXA-JSS does not support integrated GQL.

The problem lies in the sxa-jss configuration for the LayoutService, which is selected by default when you create a new SXA JSS site.

The configuration above comes from this file: \App_Config\Modules\JSS SXA\Foundation\Sitecore.XA.JSS.Foundation.Presentation.config

In that file Sitecore uses Sitecore.XA.JSS.Foundation.Presentation.ContentsResolvers.RenderingContentsResolver, Sitecore.XA.JSS.Foundation.Presentation as the renderingContentResolver and if you disassemble the class, you'll see that it does not execute any GQL at all!

From here you have two options:

1. Create a patch file to replace that class in configuration/sitecore/layoutservice/configurations/config[@name="sxa-jss"]/rendering/renderingContentsResolver[@type="Sitecore.XA.JSS.Foundation.Presentation.ContentsResolvers.RenderingContentsResolver, Sitecore.XA.JSS.Foundation.Presentation"] with a content resolver that is GQL aware, i.e.: Sitecore.JavaScriptServices.GraphQL.LayoutService.GraphQLAwareRenderingContentsResolver, Sitecore.JavaScriptServices.GraphQL, or
2. In the settings of your SXA JSS site, change the layoutServiceConfiguration to jss (instead of the default sxa-jss).

The only thing that the SXA ContentResolver does is that it injects the DisableEditing flag and makes sure that the Media.AlwaysIncludeServerUrl setting is respected in your JSON output, so patching it or replacing the configuration with JSS should not do any more harm.

Either way, I've reached out to Sitecore to have them comment on the problem. Once I get their feedback, I'll update my reply.

UPD:

Sitecore came back with an answer confirming that the sxa-jss configuration does not support running integrated GQL queries and this is by design. They added this configuration for compatibility reasons and said that it should not be used for JSS apps. Instead, if you have a JSS app, you need to switch it to the jss layoutServiceConfiguration:

The 'sxa-jss' was added to allow the compatibility between SXA and JSS. However, you should use 'jss' layout service configuration for JSS apps.

As I mentioned, this configuration should be set by default in >Sitecore.JavaScriptServices.Apps.config for default JSS app. All you custom JSS apps should by default inherit this default app and all >attributes that are not overridden directly.

Answer 2

I think you might have some issues with your site configuration. As far as I can see you're using JSS/SXA Sites (Jss Tenant and Jss Site). In such a case, you should not deploy config using jss deploy config.

Take a look here: Import a JSS app into your JSS site

You should not deploy config but, manually modify the config (and copy it later on) so that it will only contain GraphQL endpoint.