---
title: "Make a GraphQL query"
slug: "make-a-graphql-query"
abstract: "How to make queries to the Authoring and Management GraphQL API to manage Sitecore content directly from your Marketplace app."
---
# Make a GraphQL query

*Required extension points: any*

*Required SDK packages: client, xmc*

*Required API access: SitecoreAI APIs*

Make queries to the Authoring and Management GraphQL API to manage Sitecore content directly from your Marketplace app.

> [!note]
> **Before you begin**
> -   Make sure your app is [installed](https://doc.sitecore.com/mp/en/developers/marketplace/install-an-activated-custom-app.html) in the SitecoreAI environment where you want to make queries.
>
> -   Complete the [SDK quick start](https://doc.sitecore.com/mp/en/developers/sdk/0/sitecore-marketplace-sdk/quick-start--manual-.html "Quick start (manual)") and [initialize the `xmc`](https://doc.sitecore.com/mp/en/developers/sdk/0/sitecore-marketplace-sdk/initialize-the-xmc-package.html "Initialize the xmc package") package. In the quick start, you set up your app so it queries the application context and stores the app details in state. This is required to access the Context ID of your SitecoreAI environment when making requests to SitecoreAI APIs.

To make a GraphQL query:

1. In the `src` folder, create a component, for example, `components/GraphQLQuery.tsx`, then save your changes.

    ```typescript
    // src/components/GraphQLQuery.tsx
    import { ClientSDK } from "@sitecore-marketplace-sdk/client";

    // GraphQL query to retrieve item details:
    const graphQLQuery = {
      query: `query { sites { name } }`,
    };

    export default function GraphQLQuery({
      appContext,
      client,
    }: {
      appContext: any;
      client: ClientSDK | null;
    }) {
      const makeGraphQLQuery = async () => {
        // Get the Sitecore Context ID from the application context:
        const sitecoreContextId = appContext.resourceAccess?.[0]?.context.live;

        // Check if the Sitecore Context ID is available:
        if (!sitecoreContextId) {
          console.error(
            "Sitecore Context ID not found in application context. Make sure your app is configured to use SitecoreAI APIs."
          );
          return;
        }

        // Make the GraphQL query:
        const response = await client?.mutate("xmc.authoring.graphql", {
          params: {
            query: {
              sitecoreContextId,
            },
            body: graphQLQuery,
          },
        });

        console.log(response);
      };

      return <button onClick={makeGraphQLQuery}>Make GraphQL query</button>;
    }
    ```

    This script:

    - Creates a GraphQL query (`const graphQLQuery`). You can update the template literal string with the query of your choice.

        > [!tip]
        > If you're new to the Authoring and Management GraphQL API, try queries directly in the [GraphQL IDE](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-authoring-and-management-graphql-api.html#graphql-ide) before adding them to your app's source code. This lets you quickly refine your queries so you get the exact API response you need.

    - Accesses the Context ID of your SitecoreAI environment from the application context.
    - Makes a mutation using the GraphQL query and the Context ID: `client?.mutate("xmc.authoring.graphql", {<...>};`
    - Returns a button that makes the query when clicked.
2. In the SDK initialization code where you run the `useMarketplaceClient` hook, import the component you created in the previous step:

    :::tab{title="react"}
    ## React

    ```typescript
    // src/App.tsx
    import GraphQLQuery from "./components/GraphQLQuery";
    ```

    :::
    :::tab{title="nextjs-pages"}
    ## Next.js (Pages Router)

    ```typescript
    // src/pages/index.tsx
    import GraphQLQuery from "@/components/GraphQLQuery";
    ```

    :::

3. In the same file, include the component in the return statement, then save your changes. Make sure to pass `client` and the application context to the component:

    ```typescript
    return (
      <>
        {/* ... */}
        <GraphQLQuery appContext={appContext} client={client} />
      </>
    );
    ```

4. In the SitecoreAI Page builder, open your web browser's **Network** tab, refresh the page, then open your Marketplace app.
5. In the Marketplace app, click **Make GraphQL query**.
6. On the **Network** tab, find a POST request made to `graphql?`. This is the GraphQL query request you made when you clicked the button in your app.