Get started with Optimizely Graph and CMS 12

Optimizely Graph exposes CMS 12 content through GraphQL so applications fetch only the fields they need. Use this guide to connect a CMS 12 instance to Optimizely Graph, expose content for querying, and run a first GraphQL request against the Alloy template.

Prerequisites

Confirm the following before you start:

• An Optimizely CMS 12 site that runs locally or in a hosted environment.
• Access to your Optimizely Graph environment.
• Basic knowledge of GraphQL. For an introduction, go to GraphQL Basics.

📘

Note

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

CMS 12 overview

Optimizely CMS 12 is a developer-centric content management system that runs in your own infrastructure or cloud environment. CMS 12 provides the following capabilities:

• Code-first architecture – Define content types in C# code.
• MVC rendering model – 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.

Run a first query

Run a starter GraphQL query against the Alloy template to confirm that CMS 12 content reaches Optimizely Graph and to learn the request shape. The following query lists the most recently modified articles:

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

To run the query against the Alloy template:

1. Open your Graph endpoint in a browser at GraphiQL Playground (IDE).
2. Paste the query into the GraphiQL Playground editor.
3. Click Play to run the query.

Adapt the query above to your own content types by replacing ArticlePage with the type name and adjusting the requested fields.