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
- Created JSS Tenant and JSS Site in Sitecore
- Created an API Key
- Tested JSS server components with
[host]/api/layout/render/jss?item=/&sc_apikey={[api key]}
and getting back the400 - API key is not valid
error as is expected - Used JSS CLI to create a new React site (Node.js v12.13.1)
- Ran
JSS setup
- Copied Deployment Secret to
/sitecore/content/JSS Tenant/JSS Site/Settings
- Skipped the config deployment as per documentation
- Copied the example endpoint config, updated the XML and url param and placed into
\App_Config\Include\zzz
- Verified my JSS app runs OK locally with
jss start
- 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
- Created new JSS Site with name that matches my JSS App (jss-sxa-site), deleted old Site with Remove Site script.
- 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
- The
/home
item from JSS Site opened in Preview and Edit modes just fine - 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
}
}
}
}
- 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
- Tried setting the
Layout service configuration
fromsxa-jss
tojss
inside the JSS Site settings. - 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?