Customize layout data with Integrated GraphQL queries in code-first JSS apps

Version: 21.x

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:

  1. Identify the manifest definition file for your component. For example, /sitecore/definitions/components/MyComponent.sitecore.js.

  2. Create a parallel .graphql file to store the query /sitecore/definitions/components/MyComponent.sitecore.graphql.

  3. 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 the graphQLQuery property. For example:

    RequestResponse
    import { readFileSync } from 'fs';
    
    const query = readFileSync(
      'sitecore/definitions/components/ComponentName.sitecore.graphql',
      'utf8'
    );
    
    export default manifest => {
        manifest.addComponent({
            name: "ComponentName",
            graphQLQuery: query
        });
    };
    Note

    We 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 (using graphql-tag's gql helper) is not allowed.

Do you have some feedback for us?

If you have suggestions for improving this article,