1. Developer guides

Make a GraphQL query

Version: 0.4

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.

Before you begin

  • Make sure your app is installed in the SitecoreAI environment where you want to make queries.

  • Complete the SDK quick start and initialize the xmc 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.

    // 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 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:

    React

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

    Next.js (Pages Router)

    // 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:

    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.

If you have suggestions for improving this article, let us know!