Troubleshooting connected GraphQL in JSS apps
When using connected GraphQL in JSS apps, you might encounter the following issues:
The component does not receive data when querying using typed fragments
You might execute a query using template typing-based fragments. For example:
item {
# AppRoute is a Sitecore Template-based GraphQL type
...on AppRoute {
pageTitle {
value
}
}
}
In this case, you might encounter a situation with the Apollo Client where the raw GraphQL response returns the value
, but the JSS app does not receive it at the component level. The Apollo Client maintains a smart cache of GraphQL data. To cache GraphQL types effectively, it must know some information about the schema of the GraphQL API. When the schema changes, such as in response to refactoring your Sitecore templates, this data can become outdated - and incorrect schema data can result in improper caching.
To update the schema data, run jss graphql:update
to get the latest schema data from the GraphQL endpoint. You must commit the updated data to source control.
Template name collisions
In GraphQL, names of types and fields must be unique, while Sitecore allows multiple templates to have the same name. When used with strongly-typed template fields, the Experience Edge schema handles naming collisions by appending a _{guid}
to the item or field item with the newest creation date.