Make a SitecoreAI Sites REST API request

Version: 0.4

Make requests to the SitecoreAI Sites REST API to manage SitecoreAI sites, site collections, jobs, languages, and more. In this guide, you list sites.

Before you begin

Make sure your app is installed in the SitecoreAI environment where you want to make API requests.
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 SitecoreAI Sites REST API request:

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

// src/components/Sites.tsx

import { ClientSDK } from "@sitecore-marketplace-sdk/client";

export default function Sites({
  appContext,
  client,
}: {
  appContext: any;
  client: ClientSDK | null;
}) {
  const listSites = 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;
    }

    // List sites:
    const response = await client?.query("xmc.xmapp.listSites", {
      params: {
        query: {
          sitecoreContextId,
        },
      },
    });

    console.log(response);
  };

  return <button onClick={listSites}>List Sites</button>;
}

This script:

Accesses the Context ID of your SitecoreAI environment from the application context.
Makes a query using the Context ID: client?.query("xmc.xmapp.listSites", {<...>};
Returns a button that makes the request when clicked.

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 Sites from "./components/Sites";
Next.js (Pages Router)

// src/pages/index.tsx import Sites from "@/components/Sites";
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 ( <> {/* ... */} <Sites appContext={appContext} client={client} /> </> );
In the SitecoreAI Page builder, open your web browser's Network tab, refresh the page, then open your Marketplace app.
In the Marketplace app, click List Sites.
On the Network tab, find a POST request made to sites?. This is the request you made when you clicked the button in your app.

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

Make a SitecoreAI Sites REST API request

React

Next.js (Pages Router)