XM Cloud Basics – Part 2

💡How to Use GraphQL with Sitecore XM Cloud

Sitecore XM Cloud offers a headless CMS solution that allows developers to deliver content-rich experiences across various platforms. One of the most efficient ways to interact with Sitecore's content is through GraphQL, a query language that enables precise data retrieval.If you're building a frontend using frameworks like Next.js, React, or Vue, using GraphQL to query content from XM Cloud can make your development more efficient and structured.

In this post, we’ll walk through how to use GraphQL with Sitecore XM Cloud, covering everything from authentication to writing your first content query.

✅ Why Use GraphQL?

GraphQL allows you to fetch exactly the content you need in a single request — no overfetching, no underfetching. Here’s what makes it a great choice with XM Cloud:

• Flexible: Query only the fields you need.

• Structured: Strongly typed schema with auto-complete support.

• Efficient: Reduces API calls, especially in nested content structures.

🔧 Prerequisites

Before you begin, you’ll need:

• An active Sitecore XM Cloud environment.

• Access to your environment’s GraphQL endpoint.

• A Sitecore API key.

• A frontend framework or REST client (like Postman) to test your queries.

---

🔗 Step 1: Get Your GraphQL Endpoint & API Key

1. Log in to the Sitecore Cloud Portal.

2. Open your project and go to your environment settings.

3. Copy the GraphQL endpoint (usually ends with /sitecore/api/graph/edge/ide).

4. Go to API Keys and generate a new key if you don’t have one already.

---

📥 Step 2: Test a Basic Query

Use a tool like GraphQL Playground, Postman, or a browser plugin.

Example Headers:

Content-Type: application/json
sc_apikey: YOUR_API_KEY

Example Query:

query {
  item(path: "/home", language: "en") {
    id
    name
    fields {
      title {
        value
      }
      text {
        value
      }
    }
  }
}

This query retrieves the /home item in English and returns its title and text fields.

---

💻 Step 3: Use GraphQL in a Next.js App

If you’re building with Next.js, install a GraphQL client like graphql-request:

npm install graphql-request

Sample Code:

// pages/index.js or index.tsx
import { GraphQLClient, gql } from 'graphql-request';

export async function getStaticProps() {
  const endpoint = process.env.GRAPHQL_ENDPOINT;
  const client = new GraphQLClient(endpoint, {
    headers: {
      sc_apikey: process.env.SITECORE_API_KEY,
    },
  });

  const query = gql`
    query {
      item(path: "/home", language: "en") {
        fields {
          title {
            value
          }
        }
      }
    }
  `;

  const data = await client.request(query);

  return {
    props: {
      title: data.item.fields.title.value,
    },
  };
}

export default function Home({ title }) {
  return <h1>{title}</h1>;
}

---

🔎 Step 4: Explore the Schema

XM Cloud’s GraphQL supports schema introspection. Use tools like Altair, Insomnia, or Apollo Explorer to:

• Browse content models

• Auto-generate queries

• Test multi-language or personalized content

---

⚡ Bonus: Best Practices

• Use fragments for reusable field structures.

• Cache queries for performance

• Never expose sensitive API keys to the frontend — use server-side fetching.

• Version your queries if you evolve your content structure over time.

---

🚀 Final Thoughts

GraphQL with XM Cloud gives you full control over your content delivery — making your applications faster, more maintainable, and future-proof. Whether you're building a static site or a complex app with personalization, GraphQL empowers you to query smarter and develop faster.