The new Optimizely Graph makes it possible to implement a headless website by giving full control to the client with the utilisation of GraphQL.
The first GraphQL query you’re likely to need will be a fetch of your website navigation. And since Optimizely CMS has a built in control called “Display in Navigation”, you’ll want to honour this setting.
1. Configure the Content Delivery API indexer to index “VisibleInMenu”
First, you need to ensure the “VisibleInMenu” property is indexed by Graph.
The Optimizely Graph Schema is generated via the Content Delivery API. By default, built in page metadata such as the VisibleInMenu is not indexed by the Content Delivery API, so you’ll want to switch this on.
Simply set “IncludeMetadataPropertiesPreview” to true in your Program.cs:
services.ConfigureContentApiOptions(o =>
{
[...]
o.IncludeMetadataPropertiesPreview = true;
});If you don’t already have this section in your Program.cs, then you should follow the setup guidance.
2. Re-sync your content with Graph
Next go to Episerver -> CMS -> Admin -> Scheduled Jobs, and run the Optimizely Graph Content synchronization job to resync your website content with the Graph.
3. Check “VisibleInMenu” is now available
Go to the provided GraphIQL instance (https://cg.optimizely.com/app/graphiql?auth={simplekey})
Execute the following GraphQL query:
{
ContentPage(where: {VisibleInMenu: {eq: true}}) {
items {
Name
Url
}
}
}and hopefully there are no errors and the VisibleInMenu prop is now available in the response:
