Integrated GraphQL in JSS apps

Abstract

Modify the Layout Service output for a component using GraphQL queries

With integrated GraphQL, the format of the layout data returned for a specific component by the Sitecore Layout Service can be modified into the result of a GraphQL query. This means that you can define a GraphQL query that defines the data you require to power a front-end component, and then receive the data from that query back as a property, such as props.fields for a React component. This gives you tight control over getting only the data you need and also gives you the power of GraphQL if you require advanced data sources such as child items or CRM data.

In Sitecore, the GraphQL query is attached to a rendering in the GraphQL field Component GraphQL Query.

We recommend you use integrated GraphQL when:

  • Your component needs more data than its datasource template fields that are part of your GraphQL schema.

  • The datasource template contains extra fields that you do not want to render.

  • You do not want to have any client-side GraphQL libraries such as Apollo (integrated requires no additional dependency other than JSS).

We recommend you avoid using integrated GraphQL when:

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

  • Your GraphQL query is not performant. For example, it aggregates multiple REST API calls behind the scenes. Integrated GraphQL blocks the rendering of the app until all queries for the layout have been completed. We recommend you use Connected GraphQL to defer longer running queries until after the initial layout is rendered.

  • The component needs to issue additional GraphQL queries in response to state changes. Integrated queries run only when the layout data is loaded.

  • The component needs to run mutations (updates) or subscriptions (real-time data). In integrated GraphQL, you can only run queries.