Integrated GraphQL in Content SDK apps

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

In the Content Editor, an integrated GraphQL query is attached to a rendering using the GraphQL field Component GraphQL Query, as shown in the following two examples for Link List and Title components.

A Link List component rendering in Content Editor, displaying a sample integrated GraphQL query.
A Title component rendering with another sample integrated GraphQL query.

We recommend you use integrated GraphQL if:

  • Your component requires more data than just the datasource template fields in the GraphQL schema.

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

  • You don't want to use any client-side GraphQL libraries such as Apollo. Integrated GraphQL requires no additional dependency other than Content SDK.

We recommend you avoid using integrated GraphQL if:

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

  • Your GraphQL query is not performant. Integrated GraphQL blocks the app's rendering until all layout queries are complete. We recommend you use component level data fetching with GraphQL instead to send and defer longer running queries until after the initial layout is rendered.

  • The component has to issue additional GraphQL queries in response to state changes. Integrated queries only run when the layout data is being generated on SitecoreAI's side, before the data is loaded in the front-end application.

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

Important

The Sitecore Accelerate recipe Getting Component Specific Data contains additional context on component-specific data fetching, including what to consider when deciding whether to use integrated GraphQL or an alternative method.

When using integrated GraphQL queries, values for $datasource, $contextItem, and $language are automatically injected.

Do you have some feedback for us?

If you have suggestions for improving this article,