Advanced use cases with Optimizely Graph: Headless, omnichannel, and composable architecture

Optimizely Graph powers modern, composable digital experiences across multiple channels and technologies. This section provides advanced implementation patterns, architectural guidance, and best practices for building performant, personalized, and scalable headless experiences.

What you'll learn

This section covers advanced scenarios that unlock Graph's full potential in real-world applications:

Headless architecture patterns – Design modern frontends powered by Graph as your content API
Personalized and filtered experiences – Structure complex queries while avoiding performance pitfalls
Omnichannel delivery – Deliver content across web, mobile apps, and kiosks
Dynamic frontend integration – Bind Graph results to React, Vue, and other modern frameworks
Composable architecture at scale – Build flexible, maintainable systems with Graph

Who this is for

These advanced use cases are designed for:

Developers building headless solutions who need architectural patterns for Graph-powered frontends
Engineers implementing complex queries requiring personalized or filtered experiences
Teams building multi-channel experiences across web, mobile, and IoT devices
Architects evaluating Graph's flexibility for composable, modern architecture patterns

Prerequisites

Before diving into advanced use cases, you should have:

A working Optimizely Graph instance
Familiarity with GraphQL basics and query structure
Understanding of your content model and schema
Experience with modern frontend frameworks (React, Vue, etc.)

Topics in this section

These guides work together with minimal redundancy. Each focuses on a specific aspect while cross-referencing others for implementation details:

Topic	Description	Focus
Headless architecture patterns	Architectural patterns for using Graph as the content API in modern headless solutions	SSG, SSR, CSR, Hybrid patterns and when to use each
Dynamic frontend integration	Framework-specific integration code for React, Vue, Angular, Next.js, iOS, Android	Complete implementation examples for all major frameworks
Personalized search and filtering	Complex query patterns for personalized experiences while avoiding performance pitfalls	GraphQL query structure, filtering, query performance
Omnichannel content delivery	Platform-specific content delivery strategies for web, mobile, kiosk, voice, and IoT	Query optimization per platform, adaptive delivery, offline support
Composable architecture with Graph	Design flexible, scalable systems using composable architecture patterns	Multi-service integration, BFF patterns, GraphQL federation

How to use these guides

Each document has a distinct focus. Here's how they work together:

Starting a new project?

Step 1: Understand architectural options
→ Read Headless architecture patterns
Learn WHEN to use SSG vs SSR vs CSR and WHY each matters

Step 2: Implement with your framework
→ Read Dynamic frontend integration
Get complete HOW-TO code for React, Vue, Angular, Next.js, iOS, Android

Step 3: Add advanced features (as needed)

Complex search/filtering? → Personalized search
Multiple platforms? → Omnichannel delivery
Integrating multiple services? → Composable architecture

Looking for something specific?

I need to...	Read this guide
Decide between SSG, SSR, or CSR	Headless architecture patterns
Set up Apollo Client in React	Dynamic frontend integration
Build complex filter queries	Personalized search
Optimize for mobile vs web	Omnichannel delivery
Combine Graph with Shopify/Commerce	Composable architecture
Integrate with iOS/Android native	Dynamic frontend integration

Related resources

GraphQL best practices – Foundation for optimal query structure
Performance and monitoring – Optimize Graph performance
Architecture overview – Understand Graph's core architecture
Caching best practices – When and how to use caching effectively

Next steps

Start with Headless architecture patterns to understand how Graph powers modern frontend architectures, or jump to the specific use case that matches your needs.