Troubleshooting connected GraphQL in JSS apps

Current version: 20.x

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:

RequestResponse
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.

Do you have some feedback for us?

If you have suggestions for improving this article,