GraphQL | Sitecore JSS

Using GraphQL with JSS

This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app. For more information on GraphQL use in JSS, please see the documentation.

GraphQL Integrated Demo

Integrated GraphQL executes GraphQL queries within the Layout Service endpoint, and merges the query results into the Layout Service result JSON. The query results can be seen by inspecting the Layout Service response.

Datasource Item (via Integrated GraphQL)

id: 8B18913E622552718055721921040FC7
name: graphql-jss-graphql-layout-A9FBC7CC-F00B-58A2-873B-4C70C726476C-0-GraphQL-IntegratedDemo-1
sample1: Hello integrated GraphQL world!
sample1 (editable): Hello integrated GraphQL world!
sample2:

text: GraphQL lets you get structured field data too
url: https://www.sitecore.com
target: _blank
editable: GraphQL lets you get structured field data too
field type: General Link
field is shared?: false

Route Item (via Integrated GraphQL)

id: A25DF9564773559F887B92FBC2E95D8D
page title: GraphQL | Sitecore JSS
children:

Sample 1 Page Title (editable title too! Sample 1 Page Title)
Sample 2 Page Title (editable title too! Sample 2 Page Title)

GraphQL Connected Demo

Connected GraphQL executes GraphQL queries directly against the Sitecore GraphQL endpoint. This example runs the query server-side using component-level getStaticProps/getServerSideProps, a feature of the Sitecore JSS Next.js SDK. These are aggregated during the the Next.js page-level getStaticProps/getServerSideProps execution.

Datasource Item (via Connected GraphQL)

id: 7C611395A4FA5B0EA5D5DB01270BF058
name: graphql-jss-graphql-layout-A9FBC7CC-F00B-58A2-873B-4C70C726476C-0-GraphQL-ConnectedDemo-2
sample1: Hello connected GraphQL world!
sample1 (editable): Hello connected GraphQL world!
sample2:

text: GraphQL lets you get structured field data too
url: https://www.sitecore.com
target: _blank
editable: GraphQL lets you get structured field data too
field type: General Link
field is shared?: false

Route Item (via Connected GraphQL)

id: A25DF9564773559F887B92FBC2E95D8D
page title: GraphQL | Sitecore JSS
children:

Sample 1 Page Title(editable title too! Sample 1 Page Title)
Sample 2 Page Title(editable title too! Sample 2 Page Title)