Skip to main content

Connected GraphQL in JSS apps


Query GraphQL endpoints asynchronously and use GraphQL mutations and subscriptions

With Connected GraphQL, a JSS app makes direct HTTP requests to a Sitecore GraphQL endpoint. This mode is identical to using a GraphQL API in any JavaScript application and is not JSS-specific.

We recommend you use a JavaScript GraphQL client, such as the Apollo GraphQL Client.

We recommend you use connected GraphQL when:

  • You want to load data asynchronously after the page layout is rendered, or in response to app state changes other than route change.

  • The component has to run mutations (updates) or subscriptions (real-time data).

  • You want full control over the lifecycle of your queries and states, such as integration with Redux or the apollo-link-state package.

We recommend you avoid using connected GraphQL when:

  • The component uses only content template field data. The default layout data output is sufficient without needing additional GraphQL queries.

  • The added page weight of a GraphQL client library is undesirable.


When you set a GraphQL endpoint, the data output of the connected GraphQL component is tied to that source. The output is identical for both editing and normal modes.