Integrated GraphQL is not working correctly with JSS with SXA

Question

I've been struggling for a few days to get JSS Integrated GraphQL running on an existing SXA project. To rule out any issues being introduced by this project, I decided to go right back to square one, make a clean install of my Sitecore environment and document each step as I go to reproduce my issue.

There's a lot of information below, but I believe it's required to get a proper diagnosis.

---

Sitecore environment setup

I performed a clean install with the following;

• Sitecore.NET 9.2.0 (rev. 002893)
• Sitecore PowerShell Extensions-5.0 for 9.2
• Sitecore Experience Accelerator 1.9.0 rev. 190528 for 9.2
• Sitecore JavaScript Services Server for Sitecore 9.2 XP 12.0.0 rev. 190522

---

JSS app setup

Following this guide https://doc.sitecore.com/developers/sxa/19/sitecore-experience-accelerator/en/create-a-jss-tenant-and-site.html

1. Created JSS Tenant and JSS Site in Sitecore
2. Created an API Key
3. Tested JSS server components with [host]/api/layout/render/jss?item=/&sc_apikey={[api key]} and getting back the 400 - API key is not valid error as is expected
4. Used JSS CLI to create a new React site (Node.js v12.13.1)
5. Ran JSS setup
6. Copied Deployment Secret to /sitecore/content/JSS Tenant/JSS Site/Settings
7. Skipped the config deployment as per documentation
8. Copied the example endpoint config, updated the XML and url param and placed into \App_Config\Include\zzz
9. Verified my JSS app runs OK locally with jss start
10. Tried to import JSS app to Sitecore using jss deploy app --includeContent --includeDictionary, it throws an error;

Unexpected response from import service:
Status message: Bad Request
Body: Could not find JSS app configuration for 'jsssxasite'. Ensure you have included or previously installed a configuration patch file for the JSS app. Running 'jss deploy config' may resolve this.

Then I remembered reading this article today that my JSS site name should match up exactly with the SXA JSS Site name - "Could not find JSS app configuration" when deploying JSS app into JSS-SXA Site

1. Created new JSS Site with name that matches my JSS App (jss-sxa-site), deleted old Site with Remove Site script.
2. Tried to import JSS app to Sitecore using jss deploy app --includeContent --includeDictionary, it works!

JSS app build artifacts have been deployed to Sitecore

---

Testing out my app

1. The /home item from JSS Site opened in Preview and Edit modes just fine
2. Tested the GraphQL endpoint I created earlier (in the config) through the GraphiQL GUI (incognito mode) using the query below and it works, I get back the expected data

{
 item(path: "/sitecore/content/JSS Tenant/jss-sxa-site/home") {
   id
   path
   children {
     name
   }
   template {
      fields {
       name
     }
   }
 }
}

3. I tried to open home/graphql page from my app in in Edit or Preview mode, it throws an error:

Error Rendering Sitecore.JavaScriptServices.ViewEngine.Presentation.JsLayoutRenderer: Cannot read property 'datasource' of undefined TypeError: Cannot read property 'datasource' of undefined at GraphQLIntegratedDemo

I found this article Integrated GraphQL is not executed in Experience Editor

1. Tried setting the Layout service configuration from sxa-jss to jss inside the JSS Site settings.
2. Got the same error when opening the page again:

Error Rendering Sitecore.JavaScriptServices.ViewEngine.Presentation.JsLayoutRenderer: Cannot read property 'datasource' of undefined TypeError: Cannot read property 'datasource' of undefined at GraphQLIntegratedDemo

Well done for getting this far!! :-)

Did I find a bug? Or did I just miss something?

Answer 1

This is a problem that falls on the unfortunate spot in between SXA, JSS, and Sitecore Services Client. I know it doesn't help you to know that these are somewhat separate development teams inside Sitecore, but I do believe that's where this falls.

Using the new SXA/JSS features in 9.2 and above, we've also found that some Api calls and GraphQL calls fail to work correctly on an SXA-only configured JSS app. The workaround for us (as you found to be working as well) was to do an "old style" manual configuration of the JSS app.

I don't believe it should be necessary and am inclined to see this as a bug. For now however, this is the workaround.