Blog posts by Daniel Halse

Graph access with only JS and Fetch

Wed, 04 Feb 2026 17:15:08 GMT

Postman is a popular tool for testing APIs. However, when testing an API like Optimizely Graph that I will be consuming in the front-end I prefer to do this with JS + Fetch.

This allows me to identify any quirks involved in consuming the API in JavaScript. The code can then be passed to the front-end team for use in the relevant framework, and JSON results can be saved for Storybook mock data.

Example

import projectConfig from "../../CMS12/appsettings.json" assert { type: "json" };

// Define the GraphQL query to fetch StandardPages in the "Acme" category with their associated form templates
const formQuery =
`fragment FormContainerBlock on FormContainerBlock { __typename FormRenderTemplate }
query MyQuery { 
    StandardPage( where: { PrimaryCategory: { Name: { eq: "Acme" } } } ) 
    { items { Name Url MainContent { ContentLink { Expanded { ...FormContainerBlock } } } } }
}`

// Wrap the query in the expected JSON structure for the Content Graph API Request Body
const queryWrapper = `{"query":${JSON.stringify(formQuery)}}`;

// Public key access - Review security implications before using outside of local development
const publicKey = projectConfig.Optimizely.ContentGraph.SingleKey;
const graphUrl = `https://cg.optimizely.com/content/v2?auth=${publicKey}`;

const outputData = (data) => {
    const formPages = data.StandardPage.items
        .map(i => { 
            return { 
                name: i.Name, 
                url: i.Url, 
                forms: i.MainContent
                    .filter(b => b.ContentLink.Expanded.FormRenderTemplate)
                    .map(b => b.ContentLink.Expanded.FormRenderTemplate) 
                }; 
        })
        .filter(i => i.forms?.length);
    formPages.forEach(page => page.forms.forEach(f => console.log(f)));
}

const executeQuery = async () => {
    return fetch(graphUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: queryWrapper
    })
    .then((response) => {
        if (response.status >= 400) {
            throw new Error(`Error fetching data`, {cause: response});
        } else {
         return response.json();
        }
    })
    .then((data) => outputData(data.data))
    .catch(async error => {
        if (error.cause.status === 400) {
            // Graph returns JSON on most errors. Normally this is caused by a query syntax error.
            const result = await error.cause.json();
            console.log(`CODE: ${result.code}`);
            console.log(`DETAILS:\n${JSON.stringify(result.details)}`);
        }
    })
}

const result = await executeQuery();
console.log("Completed");

Skip to breakdown

How to run

First of all there are some prerequisites:

Access to an Optimizely Graph index.
Request a developer index.

We only need a public key for this example.

How to debug in VS Code

We can setup VS Code to debug the JavaScript. This gives us the usual access to variables to inspect and review.

Debug Current File

This should be added to the launch.json file in the .vscode folder in your source root. This allows you to run and debug the currently viewed JavaScript file.

{
    "version": "0.2.0",
      "configurations": [
        {
          "type": "node",
          "request": "launch",
          "name": "Launch Current Opened File",
          "program": "${file}"
        }
      ]
 }

If you are running a front-end framework then you will typically need to run the framework and attach the debugging using a standard configuration.

Breakdown

So I will do a breakdown of what is going on in this code.

Settings and Variables

import projectConfig from "../../CMS12/appsettings.json" assert { type: "json" };

// Define the GraphQL query to fetch StandardPages in the "Acme" category with their associated form templates
const formQuery =
`fragment FormContainerBlock on FormContainerBlock { __typename FormRenderTemplate }
query MyQuery { 
    StandardPage( where: { PrimaryCategory: { Name: { eq: "Acme" } } } ) 
    { items { Name Url MainContent { ContentLink { Expanded { ...FormContainerBlock } } } } }
}`

// Wrap the query in the expected JSON structure for the Content Graph API Request Body
const queryWrapper = `{"query":${JSON.stringify(formQuery)}}`;

// Public key access - Review security implications before using outside of local development
const publicKey = projectConfig.Optimizely.ContentGraph.SingleKey;
const graphUrl = `https://cg.optimizely.com/content/v2?auth=${publicKey}`;

First I am importing the config file from a project that contains the usual Optimizely Graph settings. You will want to target one with the developer settings if you have multiple configs.

Then we have the GraphQL query. This can be copy and pasted from the GraphiQL page. This example query finds the Form Blocks within the Main Content of the Standard Page Type. This was written for the Headless Forms BETA which nested the form data in a property of the Form Container Block.

The wrapper builds the standard request body that Optimizely Graph expects.

Finally we extract the single key from the shared config and build the URL.

CAUTION: See security concerns

Render Function

const outputData = (data) => {
    const formPages = data.StandardPage.items
        .map(i => { 
            return { 
                name: i.Name, 
                url: i.Url, 
                forms: i.MainContent
                    .filter(b => b.ContentLink.Expanded.FormRenderTemplate)
                    .map(b => b.ContentLink.Expanded.FormRenderTemplate) 
                }; 
        })
        .filter(i => i.forms?.length);
    formPages.forEach(page => page.forms.forEach(f => console.log(f)));
}

This function handles the Graph results data. As we are working in JavaScript and the results are JSON we can work with this dynamically. Using the debugger we can inspect the data structure then access it as needed. In this example I am drilling down to the FromRenderTemplate. In the Headless Forms beta this was a blob of JSON containing all of the form elements and form settings.

For my testing I normally output to the console which will show up in VS Code. I would experiment mapping the data here using JSON.stringify() to dump data to console or view via the debugger inspector.

Fetch -> Then -> Catch Chain Function

const executeQuery = async () => {
    return fetch(graphUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: queryWrapper
    })
    .then((response) => {
        if (response.status >= 400) {
            throw new Error(`Error fetching data`, {cause: response});
        } else {
         return response.json();
        }
    })
    .then((data) => outputData(data.data))
    .catch(async error => {
        if (error.cause.status === 400) {
            // Graph returns JSON on most errors. Normally this is caused by a query syntax error.
            const result = await error.cause.json();
            console.log(`CODE: ${result.code}`);
            console.log(`DETAILS:\n${JSON.stringify(result.details)}`);
        }
    })
}

This is a fairly standard API call chain. If you drop the debugging it's very simple but we will get GraphQL syntax errors while experimenting, so this detects and logs these.

Fetch

The fetch sends the POST call with the wrapped query to a public URL. If you have secured your Graph index then you will also need to add an authentication header in the Fetch call.

For example:

return fetch(graphUrl, {
        method: "POST",
        headers: { 
            "Content-Type": "application/json",
            "Authorization": `Bearer ${projectConfig.Authorization_Token}` 
        },
        body: queryWrapper
    })

If you are working with an API that has a seperate call to request authorization then do that Fetch call, extract the token and pass to the main Fetch call. In production code you will want to cache the key based on lifetime the API states.

Then - Response

The first then checks the status code. Most APIs will return data on 4xx responses but this will often be a different format to the working response. So here we raise an error so we can handle it separately.

response.JSON() grabs the body for the success path.

Then - Data

Here we delegate the data to the output function.

Catch

In the catch function we expect to read the GraphQL errors so we log the data to the console.

Summary

This process can be used for any API you would consume on the front-end.

Graph is a good example as both the queries and data responses can be complicated and verbose. You will find nested data has multiple wrappers before you hit the expected properties. Testing from JS you can also see how missing data affects the use of the data.

Next Steps

Next time I will expand this explanation out to TypeScript with simple types that allow dynamic processing of child objects in data and strong typing for the rendering in templates.

References

Security Considerations

Note that many production implementations will want to control and obfuscate access to the graph data. This can be done in a number of ways. For example pushing the keys and access to Graph to server components or SSG the page or site.

How to run Optimizely CMS on VS Code Dev Containers

Fri, 30 Jan 2026 10:06:10 GMT

VS Code Dev Containers is an extension that allows you to use a Docker container as a full-featured development environment. Instead of installing tools like DotNet, SQL and Optimizely CMS directly on your local machine, you run them inside a container that VS Code connects to.

For this example I set up an Optimizely CMS Dev Container on my M3 MacBook to keep everything isolated from my personal system.

Prerequisites

Before we start with we need to install a few prerequisite tools:

Start Docker Desktop and VS Code. This tutorial is done from VS Code and Terminal sessions within VS Code.

Quick Start

Click the container icon in the bottom left of VS Code.
Select "New Dev Container..."
Choose the C# (.NET) devcontainer
Then confirm that you want to create the dev container.

If this is your first container of this type it will take a while to download. When it has finished you can open a terminal in VS Code and verify the file structure is different to your local PC. ls / for example. If you open a terminal on your host system that will still be your local PC.

Missing Features

We now have an isolated .NET development environment in a Dev Container. However we are missing some features to work with CMS 12 and 13 preview.

First we install additional .NET SDKs:

wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh
chmod +x dotnet-install.sh
dotnet-install.sh --channel 8.0 --install-dir /usr/share/dotnet
dotnet-install.sh --channel 10.0 --install-dir /usr/share/dotnet
dotnet --list-sdks

Next we add the Optimizely tools:

dotnet new install EPiServer.Templates
dotnet dev-certs https --trust
dotnet tool install EPiServer.Net.Cli --global --add-source https://nuget.optimizely.com/feed/packages.svc/

We can now create a site and rebuild the container environment when needed. However we will need to rerun these commands after rebuilding the container so lets integrate them into a new devcontainer config.

Dev Container JSON

You will find this configuration file in .devcontainer above .github

Replace your devcontainer.json content with this example:

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
{
    "name": "Optimizely (.NET)",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
    "runArgs": [
        "--network=host"
    ],

    // Features to add to the dev container. More info: https://containers.dev/features.
    "features": {
        "ghcr.io/devcontainers/features/dotnet:2.4.2": {
            "version": "8.0",
            "additionalVersions": ["9.0, 10.0"]
        }
    },

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    "forwardPorts": [5000],
    "portsAttributes": {
        "5000": {
            "protocol": "https"
        }
    },

    // Use 'postCreateCommand' to run commands after the container is created.
    "postCreateCommand": {
        "Templates": "/usr/bin/dotnet new install EPiServer.Templates && /usr/bin/dotnet dev-certs https --trust",
        "ToolInstall": "/usr/bin/dotnet tool install EPiServer.Net.Cli --global --add-source https://nuget.optimizely.com/feed/packages.svc/"
    }

    // Configure tool-specific properties.
    // "customizations": {},

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

In this example:

Multiple versions of .NET SDK installed for CMS 12 and 13 support.
Ubuntu base image used for compatibility with the .NET tooling.
Network access added to be able to connect to other services and containers.
Port 5000 opened up for CMS site hosting.
Post create commands added to setup Optimizely tools.

When you save the configuration you will get a prompt in the bottom right to Rebuild. Click it. If you miss it then click the icon in the bottom left to get the an option list, select Rebuild Container.

After rebuild we will be in the same state as before but with no manual steps required.

Alloy Tech Build Test

Now we can create and build an Optimizely Alloy Tech site in a VS code command prompt.

dotnet new epi-alloy-mvc -n alloy13preview
dotnet build
dotnet run

When you run this in a Silicon Mac you will get an error that the local DB is not supported on this hardware.

To resolve this we can connect to a SQL server on a container that does support Silicion Macs. The DevContainer is configured to use the host network so it can access any network shared database.

Lets download Azure SQL Edge container for a multi-platform SQL server:

docker pull mcr.microsoft.com/azure-sql-edge:latest

This requires some settings to run correctly. Review the below command and change details as required. We will need these values to build the Connection String in the CMS solution.

docker run --cap-add SYS_PTRACE -e 'ACCEPT_EULA=1' -e 'MSSQL_SA_PASSWORD=s3cret-Ninja' -p 1433:1433 --name azuresqledge -d mcr.microsoft.com/azure-sql-edge

Install the SQL Server extension to VS Code. Note that this gets installed to the container not your host system.

MS SQL Extension VS Code

Now we need to connect to the DB server using the settings we started the docker container with.

Connection Dialog

Once connected we create a database for the CMS to use. There is minimal GUI in this extension so an SQL script can be used for this.

-- Create a new database called 'CMS'
-- Connect to the 'master' database to run this snippet
USE master
GO
-- Create the new database if it does not exist already
IF NOT EXISTS (
    SELECT name
        FROM sys.databases
        WHERE name = N'CMS'
)
CREATE DATABASE CMS
GO

Now we build up a standard connection string using the values from previous commands. Place this in appsettings.Development.json in the Optimizely solution.

  "ConnectionStrings": {
    "EPiServerDB": "data source=tcp:localhost,1433;Database=CMS;User Id=sa;Password=s3cret-Ninja;Encrypt=True;TrustServerCertificate=True;Connect Timeout=30"
  },

Finally setup database schema updates:

Enable Automatic Creation of Database Schemas

Now we can run the solution again and confirm it can start. Click the button prompt to open a host browser window for you while the solution and DB run on containers.

dotnet run

We have port 5000 exposed to the host system so you access Optimizely admin setup and site as usual. You will see a 1 on the ports tab and can check that tab to review network ports enabled.

Finished for now

You are now ready to experiment, isolated away from your host system. Git can be used with the solution files as normal. In VS Code make sure you save the workspace, you may want to relocate the solution to your standard source / repos folder. The devcontainer.json is a lightweight way to share your container from Git.

Personally I will be using this to experiment with CMS 13, extensions and add ons. Disposing and recreating them to work with different setups.

Clean up

If you experiment with the container configs you will have multiple container instances in Docker Desktop. In the images section there will be the base images used to build containers and the instance images. In volumes will be the drive mounts for the containers.

References

Prevent SQL error on CMS 12 minor version update

Thu, 08 Jun 2023 09:47:09 GMT

If using an early version of CMS 12, like 12.0, you will get an SQL error after upgrading to newer patch versions.

The fix for this is minor locally using SQL:

CREATE PROCEDURE dbo.netSoftLinksGetBroken
AS
BEGIN
SELECT 1;
END
GO

This will create the missing stored procedure and allow it to proceed.

But as this is a pain when dealing with DXP environments there is a better way to fix this before deployment:

Go to reports in the CMS
Run the broken links report
If this fails then you may need to get Optimizely support involved
If this succeeds then the stored procedure above has been created correctly and used
Optionally download the DB from PAAS portal and verify that the dbo.netSoftLinksGetBroken stored procedure is present

This has been raised before:

EPiServer.Framework 12.13.0 - Failed to update database (optimizely.com)

The bug for which was closed without being fixed:
Bug - CMS-26818 (optimizely.com)

I suspect the issue is mainly visible on new sites / databases only so will more commonly be seen in early development.