Preview Data

Generating a Preview Token

In order to request preview data from either the Storefront API or the Storefront SDK, a Nacelle Preview Token is required. Currently, preview data is available for Contentful and Sanity.

Follow these steps to generate a preview token:

From your space in the Nacelle Dashboard, select Space Settings from the primary navigation pane and then select the API Details tab

In the Storefront API section, click the Create New Key button under the Preview Token field. Then, follow the prompts.

A prompt will now be presented with the newly generated preview token. Copy this key down as it will not be displayed again. Please take care to not expose the Nacelle Preview Token in your frontend project’s production environment variables.

Storefront API

Requests for preview data via the Storefront API will use the standard Storefront API URL with the addition of a preview=true query parameter. The header will require the x-nacelle-space-token and an additional x-nacelle-preview-token header. GraphQL queries written for the Storefront API will work when requesting preview data and require no changes.

Example URL:

Example Headers:

x-nacelle-space-token: <your-space-token>

x-nacelle-preview-token: <your-preview-token>

Storefront SDK

Initializing the Storefront SDK in Preview Mode

When initializing the Storefront SDK, an optional previewToken option can be provided to trigger the client to fetch preview data. Initializing the client with the preview token is useful if the entire project needs to have preview data, such as a separate preview site.

import Storefront from "@nacelle/storefront-sdk"; 
const client = Storefront({
  storefrontEndpoint: "<your-storefront-endpoint>",
  token: "<your-public-storefront-token>",
  previewToken: "<your-preview-token>"

Entering Preview Mode on-the-fly

Alternatively, the setConfig method can be used to trigger the fetching of preview data dynamically.

First, initialize the client normally:

import Storefront from "@nacelle/storefront-sdk";

const client = Storefront({
  storefrontEndpoint: "<your-storefront-endpoint>",
  token: "<your-public-storefront-token>"

Then use setConfig and provide the preview token whenever preview data is needed:

client.setConfig({ previewToken: "<your-preview-token>" });

Now, client methods such as content will return preview data.

Exiting Preview Mode on-the-fly

To exit preview mode, simply pass a false previewToken to the setConfig method:

client.setConfig({ previewToken: null });