Get started with Optimizely Graph for CMS (SaaS)

Configure Optimizely Graph and Content Management System (SaaS) in minutes. This guide covers 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 CMS (SaaS) usage patterns.

About CMS (SaaS)

Optimizely CMS (SaaS) is a cloud-native content management system. The capabilities in the following list shape how content flows into Optimizely Graph and what your queries can retrieve.

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

Run your first query

Run a baseline _Content query to confirm the connection to Optimizely Graph and inspect the content structure in CMS (SaaS) before building application-specific queries.

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

Test this query with the Mosey Bank template.

1. Open the GraphiQL IDE.
2. Paste the previous query into the GraphiQL IDE.
3. Click Play to run the query.

Understand CMS (SaaS) content structure

CMS (SaaS) organizes content differently from CMS 12. The following sections describe the system fields and content types you encounter when querying a CMS (SaaS) instance through Optimizely Graph.

System fields

CMS (SaaS) attaches a standard _metadata object to every content item. Use these fields to identify, locate, and version content in your queries.

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 ships with the following content types, which represent the building blocks you query against in this guide.

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

Next steps

Continue with Explore your schema to inspect the available content types and validate filter and search queries against your instance.