Step 6 of 11 (55% complete)

Preview Mode

Step Code

The code for this specific step can be found on the following branch:

szymonuryga/Optimizely-CMS-Feature-Exp-Next.js-15(main)
Click on a link to view the code for this step on GitHub.

Preview Mode and Content Variations

After the previous step (GraphQL updates), we know that changes have occurred in the Optimizely Graph.

To correctly preview all possible content variations, we need to include all variations in our GraphQL queries using:

variation: { include: ALL, includeOriginal: true }

This ensures that the preview mode displays all content variants properly.

Why this matters

By default, GraphQL queries to Optimizely CMS do not include variations. When using preview mode, we want to retrieve all versions of a content item so that the preview can select the correct variation based on the experiment or user context. Without this, preview will only show the default content.

GraphQL Queries to Update for Preview

Add the variation: { include: ALL, includeOriginal: true } parameter to the following queries used in preview mode:

  • lib/optimizely/queries/draft/GetContentByKeyAndVersion.graphql
  • lib/optimizely/queries/draft/GetPreviewPageByUrl.graphql
  • lib/optimizely/queries/draft/GetPreviewStartPage.graphql
  • lib/optimizely/queries/draft/GetVisualExperience.graphql

This small change enables preview to fetch and display all content variants correctly.

More details on content variations and preview mode can be found in this commit example

Have questions? I'm here to help!

Contact Me