Graph access with only JS and Fetch

2026-02-04T00:00:00+00:00

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</h2>

import</span> projectConfig</span> from</span> "</span>../../CMS12/appsettings.json</span>"</span> assert</span> {</span> type</span>:</span> "</span>json</span>"</span> }</span>;</span></span>
</span>
//</span> Define the GraphQL query to fetch StandardPages in the "Acme" category with their associated form templates</span></span>
const</span> formQuery</span> =</span></span>
`</span>fragment FormContainerBlock on FormContainerBlock { __typename FormRenderTemplate }</span></span>
query MyQuery { </span></span>
    StandardPage( where: { PrimaryCategory: { Name: { eq: "Acme" } } } ) </span></span>
    { items { Name Url MainContent { ContentLink { Expanded { ...FormContainerBlock } } } } }</span></span>
}</span>`</span></span>
</span>
//</span> Wrap the query in the expected JSON structure for the Content Graph API Request Body</span></span>
const</span> queryWrapper</span> =</span> `</span>{"query":</span>${</span>JSON</span>.</span>stringify</span>(</span>formQuery</span>)</span>}</span>}</span>`</span>;</span></span>
</span>
//</span> Public key access - Review security implications before using outside of local development</span></span>
const</span> publicKey</span> =</span> projectConfig</span>.</span>Optimizely</span>.</span>ContentGraph</span>.</span>SingleKey</span>;</span></span>
const</span> graphUrl</span> =</span> `</span>https://cg.optimizely.com/content/v2?auth=</span>${</span>publicKey</span>}</span>`</span>;</span></span>
</span>
const</span> outputData</span> =</span> (</span>data</span>)</span> =></span> {</span></span>
    const</span> formPages</span> =</span> data</span>.</span>StandardPage</span>.</span>items</span></span>
        .</span>map</span>(</span>i</span> =></span> {</span> </span></span>
            return</span> {</span> </span></span>
                name</span>:</span> i</span>.</span>Name</span>,</span> </span></span>
                url</span>:</span> i</span>.</span>Url</span>,</span> </span></span>
                forms</span>:</span> i</span>.</span>MainContent</span></span>
                    .</span>filter</span>(</span>b</span> =></span> b</span>.</span>ContentLink</span>.</span>Expanded</span>.</span>FormRenderTemplate</span>)</span></span>
                    .</span>map</span>(</span>b</span> =></span> b</span>.</span>ContentLink</span>.</span>Expanded</span>.</span>FormRenderTemplate</span>)</span> </span></span>
                }</span>;</span> </span></span>
        }</span>)</span></span>
        .</span>filter</span>(</span>i</span> =></span> i</span>.</span>forms</span>?.</span>length</span>)</span>;</span></span>
    formPages</span>.</span>forEach</span>(</span>page</span> =></span> page</span>.</span>forms</span>.</span>forEach</span>(</span>f</span> =></span> console</span>.</span>log</span>(</span>f</span>)</span>)</span>)</span>;</span></span>
}</span></span>
</span>
const</span> executeQuery</span> =</span> async</span> (</span>)</span> =></span> {</span></span>
    return</span> fetch</span>(</span>graphUrl</span>,</span> {</span></span>
        method</span>:</span> "</span>POST</span>"</span>,</span></span>
        headers</span>:</span> {</span> "</span>Content-Type</span>"</span>:</span> "</span>application/json</span>"</span> }</span>,</span></span>
        body</span>:</span> queryWrapper</span></span>
    }</span>)</span></span>
    .</span>then</span>(</span>(</span>response</span>)</span> =></span> {</span></span>
        if</span> (</span>response</span>.</span>status</span> >=</span> 400</span>)</span> {</span></span>
            throw</span> new</span> Error</span>(</span>`</span>Error fetching data</span>`</span>,</span> {</span>cause</span>:</span> response</span>}</span>)</span>;</span></span>
        }</span> else</span> {</span></span>
         return</span> response</span>.</span>json</span>(</span>)</span>;</span></span>
        }</span></span>
    }</span>)</span></span>
    .</span>then</span>(</span>(</span>data</span>)</span> =></span> outputData</span>(</span>data</span>.</span>data</span>)</span>)</span></span>
    .</span>catch</span>(</span>async</span> error</span> =></span> {</span></span>
        if</span> (</span>error</span>.</span>cause</span>.</span>status</span> ===</span> 400</span>)</span> {</span></span>
            //</span> Graph returns JSON on most errors. Normally this is caused by a query syntax error.</span></span>
            const</span> result</span> =</span> await</span> error</span>.</span>cause</span>.</span>json</span>(</span>)</span>;</span></span>
            console</span>.</span>log</span>(</span>`</span>CODE: </span>${</span>result</span>.</span>code</span>}</span>`</span>)</span>;</span></span>
            console</span>.</span>log</span>(</span>`</span>DETAILS:</span>\n</span>${</span>JSON</span>.</span>stringify</span>(</span>result</span>.</span>details</span>)</span>}</span>`</span>)</span>;</span></span>
        }</span></span>
    }</span>)</span></span>
}</span></span>
</span>
const</span> result</span> =</span> await</span> executeQuery</span>(</span>)</span>;</span></span>
console</span>.</span>log</span>(</span>"</span>Completed</span>"</span>)</span>;</span></span></code></pre>
Skip to breakdown</a></p>
How to run</h3>
First of all there are some prerequisites:</p>

Access to an Optimizely Graph index.</li>
Request a developer index.</li>
</ul>
We only need a public key for this example.</p>
How to debug in VS Code</h3>
We can setup VS Code to debug the JavaScript. This gives us the usual access to variables to inspect and review.</p>
Debug Current File</h4>
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.</p>
{</span></span>
    "</span>version</span>"</span>:</span> "</span>0.2.0</span>"</span>,</span></span>
      "</span>configurations</span>"</span>:</span> [</span></span>
        {</span></span>
          "</span>type</span>"</span>:</span> "</span>node</span>"</span>,</span></span>
          "</span>request</span>"</span>:</span> "</span>launch</span>"</span>,</span></span>
          "</span>name</span>"</span>:</span> "</span>Launch Current Opened File</span>"</span>,</span></span>
          "</span>program</span>"</span>:</span> "</span>${file}</span>"</span></span>
        }</span></span>
      ]</span></span>
 }</span></span></code></pre>
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.</p>
Breakdown</h2>
So I will do a breakdown of what is going on in this code.</p>
Settings and Variables</h3>
import</span> projectConfig</span> from</span> "</span>../../CMS12/appsettings.json</span>"</span> assert</span> {</span> type</span>:</span> "</span>json</span>"</span> }</span>;</span></span>
</span>
//</span> Define the GraphQL query to fetch StandardPages in the "Acme" category with their associated form templates</span></span>
const</span> formQuery</span> =</span></span>
`</span>fragment FormContainerBlock on FormContainerBlock { __typename FormRenderTemplate }</span></span>
query MyQuery { </span></span>
    StandardPage( where: { PrimaryCategory: { Name: { eq: "Acme" } } } ) </span></span>
    { items { Name Url MainContent { ContentLink { Expanded { ...FormContainerBlock } } } } }</span></span>
}</span>`</span></span>
</span>
//</span> Wrap the query in the expected JSON structure for the Content Graph API Request Body</span></span>
const</span> queryWrapper</span> =</span> `</span>{"query":</span>${</span>JSON</span>.</span>stringify</span>(</span>formQuery</span>)</span>}</span>}</span>`</span>;</span></span>
</span>
//</span> Public key access - Review security implications before using outside of local development</span></span>
const</span> publicKey</span> =</span> projectConfig</span>.</span>Optimizely</span>.</span>ContentGraph</span>.</span>SingleKey</span>;</span></span>
const</span> graphUrl</span> =</span> `</span>https://cg.optimizely.com/content/v2?auth=</span>${</span>publicKey</span>}</span>`</span>;</span></span></code></pre>
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.</p>
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.</p>
The wrapper builds the standard request body that Optimizely Graph expects.</p>
Finally we extract the single key from the shared config and build the URL.</p>

CAUTION: See security concerns</a></p>
</blockquote>
Render Function</h3>
const</span> outputData</span> =</span> (</span>data</span>)</span> =></span> {</span></span>
    const</span> formPages</span> =</span> data</span>.</span>StandardPage</span>.</span>items</span></span>
        .</span>map</span>(</span>i</span> =></span> {</span> </span></span>
            return</span> {</span> </span></span>
                name</span>:</span> i</span>.</span>Name</span>,</span> </span></span>
                url</span>:</span> i</span>.</span>Url</span>,</span> </span></span>
                forms</span>:</span> i</span>.</span>MainContent</span></span>
                    .</span>filter</span>(</span>b</span> =></span> b</span>.</span>ContentLink</span>.</span>Expanded</span>.</span>FormRenderTemplate</span>)</span></span>
                    .</span>map</span>(</span>b</span> =></span> b</span>.</span>ContentLink</span>.</span>Expanded</span>.</span>FormRenderTemplate</span>)</span> </span></span>
                }</span>;</span> </span></span>
        }</span>)</span></span>
        .</span>filter</span>(</span>i</span> =></span> i</span>.</span>forms</span>?.</span>length</span>)</span>;</span></span>
    formPages</span>.</span>forEach</span>(</span>page</span> =></span> page</span>.</span>forms</span>.</span>forEach</span>(</span>f</span> =></span> console</span>.</span>log</span>(</span>f</span>)</span>)</span>)</span>;</span></span>
}</span></span></code></pre>
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.</p>
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()</code> to dump data to console or view via the debugger inspector.</p>
Fetch -> Then -> Catch Chain Function</h3>
const</span> executeQuery</span> =</span> async</span> (</span>)</span> =></span> {</span></span>
    return</span> fetch</span>(</span>graphUrl</span>,</span> {</span></span>
        method</span>:</span> "</span>POST</span>"</span>,</span></span>
        headers</span>:</span> {</span> "</span>Content-Type</span>"</span>:</span> "</span>application/json</span>"</span> }</span>,</span></span>
        body</span>:</span> queryWrapper</span></span>
    }</span>)</span></span>
    .</span>then</span>(</span>(</span>response</span>)</span> =></span> {</span></span>
        if</span> (</span>response</span>.</span>status</span> >=</span> 400</span>)</span> {</span></span>
            throw</span> new</span> Error</span>(</span>`</span>Error fetching data</span>`</span>,</span> {</span>cause</span>:</span> response</span>}</span>)</span>;</span></span>
        }</span> else</span> {</span></span>
         return</span> response</span>.</span>json</span>(</span>)</span>;</span></span>
        }</span></span>
    }</span>)</span></span>
    .</span>then</span>(</span>(</span>data</span>)</span> =></span> outputData</span>(</span>data</span>.</span>data</span>)</span>)</span></span>
    .</span>catch</span>(</span>async</span> error</span> =></span> {</span></span>
        if</span> (</span>error</span>.</span>cause</span>.</span>status</span> ===</span> 400</span>)</span> {</span></span>
            //</span> Graph returns JSON on most errors. Normally this is caused by a query syntax error.</span></span>
            const</span> result</span> =</span> await</span> error</span>.</span>cause</span>.</span>json</span>(</span>)</span>;</span></span>
            console</span>.</span>log</span>(</span>`</span>CODE: </span>${</span>result</span>.</span>code</span>}</span>`</span>)</span>;</span></span>
            console</span>.</span>log</span>(</span>`</span>DETAILS:</span>\n</span>${</span>JSON</span>.</span>stringify</span>(</span>result</span>.</span>details</span>)</span>}</span>`</span>)</span>;</span></span>
        }</span></span>
    }</span>)</span></span>
}</span></span></code></pre>
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.</p>
Fetch</h4>
The fetch</code> 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.</p>
For example:</h5>
return</span> fetch</span>(</span>graphUrl</span>,</span> {</span></span>
        method</span>:</span> "</span>POST</span>"</span>,</span></span>
        headers</span>:</span> {</span> </span></span>
            "</span>Content-Type</span>"</span>:</span> "</span>application/json</span>"</span>,</span></span>
            "</span>Authorization</span>"</span>:</span> `</span>Bearer </span>${</span>projectConfig</span>.</span>Authorization_Token</span>}</span>`</span> </span></span>
        }</span>,</span></span>
        body</span>:</span> queryWrapper</span></span>
    }</span>)</span></span></code></pre>
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.</p>
Then - Response</h4>
The first then</code> 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.</p>
response.JSON()</code> grabs the body for the success path.</p>
Then - Data</h3>
Here we delegate the data to the output function.</p>
Catch</h3>
In the catch</code> function we expect to read the GraphQL errors so we log the data to the console.</p>
Summary</h2>
This process can be used for any API you would consume on the front-end.</p>
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.</p>
Next Steps</h3>
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.</p>
References</h2>

Source File</a></li>
Optimizely Graph Learning Centre</a></li>
Optimizely Graph Dev Guide</a></li>
</ul>
Security Considerations</h2>
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.</p>

How to run Optimizely CMS on VS Code Dev Containers

2026-01-29T00:00:00+00:00

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</h2>
Before we start with we need to install a few prerequisite tools:

VS Code</a></li>
Docker Desktop</a></li>
Dev Containers Extension for VS Code</a></li> </ul>
Start Docker Desktop and VS Code. This tutorial is done from VS Code and Terminal sessions within VS Code.
Quick Start</h2>

Click the container icon in the bottom left of VS Code.
 </li>

Select "New Dev Container..." </li>

Choose the C# (.NET) devcontainer </li>

Then confirm that you want to create the dev container. </li> </ol>
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 /</code> for example. If you open a terminal on your host system that will still be your local PC.`
`Missing Features</h2> 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</code></pre></li> 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/</code></pre></li> </ol> 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</h2> 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" }</code></pre> In this example: Multiple versions of .NET SDK installed for CMS 12 and 13 support.</li> Ubuntu base image used for compatibility with the .NET tooling.</li> Network access added to be able to connect to other services and containers.</li> Port 5000 opened up for CMS site hosting.</li> Post create commands added to setup Optimizely tools.</li> </ol> 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</h2> 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</code></pre> 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</code></pre> 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</code></pre> 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</a> </blockquote> Now we need to connect to the DB server using the settings we started the docker container with. Connection Dialog</a> </blockquote> 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</code></pre> 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" },</code></pre> Finally setup database schema updates: Enable Automatic Creation of Database Schemas</a> 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</code></pre> 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</h2> 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</h2> 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</h2> Developing inside a Container</a></li> Dev Container Features</a></li> Dev Container Templates</a></li> </ul>

How to debug in VS Code</h3>
We can setup VS Code to debug the JavaScript. This gives us the usual access to variables to inspect and review.</p>

Breakdown</h2>
So I will do a breakdown of what is going on in this code.</p>

Fetch</h4>
The `fetch</code> 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.</p>`

Catch</h3>
In the `catch</code> function we expect to read the GraphQL errors so we log the data to the console.</p>`

Next Steps</h3>
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.</p>

Security Considerations</h2>
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.</p>

Clean up</h2>
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.</p>

References</h2>

Developing inside a Container</a></li>
Dev Container Features</a></li>
Dev Container Templates</a></li> </ul>

Intuitive Tech

Graph access with only JS and Fetch

How to run Optimizely CMS on VS Code Dev Containers

Intuitive Tech

Graph access with only JS and Fetch

How to run</h3> First of all there are some prerequisites:</p> Access to an Optimizely Graph index.</li>

How to debug in VS Code</h3> We can setup VS Code to debug the JavaScript. This gives us the usual access to variables to inspect and review.</p>

Debug Current File</h4> 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.</p>

Breakdown</h2> So I will do a breakdown of what is going on in this code.</p>

Fetch</h4> The fetch</code> 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.</p>

Catch</h3> In the catch</code> function we expect to read the GraphQL errors so we log the data to the console.</p>

Next Steps</h3> 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.</p>

Security Considerations</h2> 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.</p>

How to run Optimizely CMS on VS Code Dev Containers

Prerequisites</h2> Before we start with we need to install a few prerequisite tools:</p>

Quick Start</h2> Click the container icon in the bottom left of VS Code.</p> </p> </li> Select "New Dev Container..." </p> </li> Choose the C# (.NET) devcontainer </p> </li>

Clean up</h2> 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.</p>

References</h2> Developing inside a Container</a></li> Dev Container Features</a></li> Dev Container Templates</a></li> </ul>

How to debug in VS Code</h3>
We can setup VS Code to debug the JavaScript. This gives us the usual access to variables to inspect and review.</p>

Breakdown</h2>
So I will do a breakdown of what is going on in this code.</p>

Fetch</h4>
The `fetch</code> 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.</p>`

Catch</h3>
In the `catch</code> function we expect to read the GraphQL errors so we log the data to the console.</p>`

Next Steps</h3>
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.</p>

Security Considerations</h2>
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.</p>

Clean up</h2>
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.</p>

References</h2>

Developing inside a Container</a></li>
Dev Container Features</a></li>
Dev Container Templates</a></li> </ul>