Customize layout data with Integrated GraphQL queries in code-first JSS apps
By using integrated GraphQL, you can customize the data you receive for a given component from the Sitecore Layout Service.
In a code-first JSS app, the mechanism for querying with Integrated GraphQL queries is identical to a Sitecore-first application, but the GraphQL query to execute is provided in the JSS manifest and imported into the Sitecore item's graphQLQuery
field.
To define an integrated GraphQL query for a component:
-
Identify the manifest definition file for your component. For example,
/sitecore/definitions/components/MyComponent.sitecore.js
. -
Create a parallel
.graphql
file to store the query/sitecore/definitions/components/MyComponent.sitecore.graphql
. -
In the manifest definition file for the component, read the contents of the GraphQL query definition from the
/sitecore/definitions/components/MyComponent.sitecore.graphql
file and attach the query to the component definition using thegraphQLQuery
property. For example:RequestResponseimport { readFileSync } from 'fs'; const query = readFileSync( 'sitecore/definitions/components/ComponentName.sitecore.graphql', 'utf8' ); export default manifest => { manifest.addComponent({ name: "ComponentName", graphQLQuery: query }); };
NoteWe recommend using
readFileSync
to include the GraphQL query so the query file can be linted, but you can also use literal strings. Parsed GraphQL query ASTs (usinggraphql-tag
'sgql
helper) is not allowed.