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 GraphQLBasic 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.
- Open the GraphiQL IDE.
- Paste the previous query into the GraphiQL IDE.
- 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 schemaExplore your schema to inspect the available content types and validate filter and search queries against your instance.