Get started with Optimizely Graph for CMS (SaaS)

Set up Optimizely Graph and CMS (SaaS) in minutes. Learn authentication, basic queries, and configuration for Next.js/React and C# applications using the Mosey Bank CMS example. Mosey bank episerverdata file

Prerequisites

• Optimizely CMS (SaaS) instance with content configured
• API Keys from your Optimizely Graph instance
• Basic knowledge of GraphQL

📘

Note

This article uses the Mosey Bank CMS template as an example. The Mosey Bank template includes content types like LandingPage, BlogPostPage, NewsArticleSite1, and various elements and blocks that demonstrate real-world SaaS CMS usage patterns.

What is CMS (SaaS)?

Optimizely CMS (SaaS) is a cloud-native content management system that provides:

• Headless-first architecture – Content is created and managed separately from presentation.
• Visual Builder – Content editors can create and preview experiences visually.
• Multi-channel delivery – Content can be delivered to websites, mobile apps, and other channels.
• Built-in personalization – Target content to specific audiences.
• Composable content – Mix and match content blocks and elements.

Your first query

Start with a simple query to explore the content structure in CMS (SaaS):

query GetContentItems {
  _Content(limit: 10) {
    items {
      _metadata {
        displayName
        url {
          default
        }
        types
      }
    }
    total
  }
}

Test this query with the Mosey Bank template:

1. Open the GraphQL playground, GraphiQL IDE.
2. Paste the above query in the GraphQL Playground.
3. Click Play to execute.

Understand CMS (SaaS) content structure

CMS (SaaS) content is organized differently from CMS (PaaS):

System fields

Content in CMS (SaaS) includes standard _metadata fields:

query ExploreMetadata {
  _Content(limit: 3) {
    items {
      _metadata {
        displayName      # User-friendly name
        key             # Unique identifier
        locale          # Content language
        types           # Content type names
        url {           # URL information
          default
          hierarchical
          base
        }
        published       # Publication date
        lastModified    # Last modification date
      }
    }
  }
}

Content types

The Mosey Bank example includes several content types:

• LandingPage – Marketing and promotional pages
• BlogPostPage – Blog articles and news
• Various Blocks – Reusable content components (HeroBlock, TextBlock, ButtonBlock, etc.)
• Elements – Individual content elements (HeadingElement, ParagraphElement, ImageElement, etc.)