Get started with Optimizely Graph and CMS 12

Access and deliver CMS content efficiently with Optimizely Graph. GraphQL enables precise, flexible queries from your CMS 12 instance, allowing applications to fetch exactly the content they need and keep data synchronized across channels.

Prerequisites

• An Optimizely CMS 12 site running locally or hosted
• Access to your Optimizely Graph environment
• Basic knowledge of GraphQL (see GraphQL Basics if you are new to GraphQL)

📘

Note

This guide uses the Alloy template as an example. The Alloy template includes content types like ArticlePage, ProductPage, StandardPage, and others that demonstrate real-world usage patterns.

What is CMS 12?

Optimizely CMS 12 is a developer-centric content management system hosted in your own infrastructure or cloud environment. It provides:

• Code-first architecture – Developers define content types in C# code.
• MVC rendering model – Developers control routing, rendering, and templates.
• Server-side extensibility – Add custom logic, events, and integrations.
• Full hosting control – Choose infrastructure, scaling behavior, and deployment model.
• Deep .NET extensibility – Build modules, plugins, and custom functionality.

Your First Query

Execute a simple query to fetch content:

query ListArticles($skip: Int = 0, $limit: Int = 10) {
  ArticlePage(
    orderBy: { _modified: DESC }
    skip: $skip
    limit: $limit
  ) {
    items {
      Name
      RelativePath
      TeaserText
      PageImage {
        Url
      }
    }
    total
  }
}

Test this query with the Alloy template:

1. Open your Graph endpoint in a browser: GraphiQL Playground (IDE).
2. Paste the query in the GraphQL Playground.
3. Click Play to execute.

Use the following query as a starting point:

query ListArticles($skip: Int = 0, $limit: Int = 10) {
  ArticlePage(
    orderBy: { _modified: DESC }
    skip: $skip
    limit: $limit
  ) {
    items {
      Name
      RelativePath
      TeaserText
      PageImage {
        Url
      }
    }
    total
  }
}