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