---
title: "Customize layout data with Integrated GraphQL queries in code-first JSS apps"
slug: "customize-layout-data-with-integrated-graphql-queries-in-code-first-jss-apps"
abstract: "Example for defining Integrated GraphQL queries using the JSS manifest"
---
# Customize layout data with Integrated GraphQL queries in code-first JSS apps

By using [integrated GraphQL](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/integrated-graphql-in-jss-apps.html "Integrated GraphQL in JSS apps"), 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:

    ```csharp
    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.