Skip to main content
Preview queries allow accessing components and content via a shareable token without requiring an API key. This enables sharing draft work with stakeholders, testing components in isolation, and previewing unpublished content.

​
Authentication

Preview queries use a preview-token header instead of x-api-key: 
headers: {
  'preview-token': 'YOUR_PREVIEW_TOKEN',
  'Content-Type': 'application/json'
}

​
Preview Query

query GetPreview($token: String!, $version: Int) {
  preview(token: $token, version: $version) {
    ... on ComponentPreview {
      componentId
      componentName
      component {
        id
        name
        title
        compiled
        schema
      }
      resolvedRef {
        package
        dependencies
      }
    }
    ... on ContentPreview {
      contentId
      contentName
      contentTypeName
      content {
        id
        name
        compiled
        contentType {
          name
          schema
        }
      }
      resolvedRef {
        package
        dependencies
      }
    }
  }
}

​
Parameters

ParameterTypeRequiredDescription
tokenString!YesPreview link token
versionIntNoSpecific component version (defaults to latest draft)

​
Component Preview

Fetch a component preview (defaults to latest draft): 
query GetComponentPreview($token: String!) {
  preview(token: $token) {
    ... on ComponentPreview {
      componentId
      component {
        compiled
        schema
      }
      resolvedRef {
        package
        dependencies
      }
    }
  }
}
Response: 
{
  "data": {
    "preview": {
      "__typename": "ComponentPreview",
      "componentId": "comp123",
      "component": {
        "compiled": "const body = (props) => { ... }",
        "schema": "{\"type\":\"object\",\"properties\":{...}}"
      },
      "resolvedRef": {
        "package": "draft:proj123:org456",
        "dependencies": ["xyz789ghi012..."]
      }
    }
  }
}

​
Specific Version

Fetch a specific published version of a component: 
query GetComponentVersion($token: String!, $version: Int!) {
  preview(token: $token, version: $version) {
    ... on ComponentPreview {
      componentId
      component {
        compiled
      }
      resolvedRef {
        package
        dependencies
      }
    }
  }
}
Variables: 
{
  "token": "abc123def456",
  "version": 2
}

​
Content Preview

Fetch a content preview: 
query GetContentPreview($token: String!) {
  preview(token: $token) {
    ... on ContentPreview {
      contentId
      content {
        id
        name
        compiled
        tags
        locale
        contentType {
          name
        }
      }
      resolvedRef {
        package
        dependencies
      }
    }
  }
}

​
Preview Types

​
ComponentPreview

FieldTypeDescription
componentIdID!Component ID
componentNameString!Component name for display/recents
componentComponentComponent data (null if exceeds 100KB)
resolvedRefResolvedPackageRef!Package IDs for caching

​
ContentPreview

FieldTypeDescription
contentIdID!Content ID
contentNameString!Content name for display/recents
contentTypeNameString!Content type name for display/recents
contentContentContent data (null if exceeds 100KB)
resolvedRefResolvedPackageRef!Package IDs for caching

​
Error Handling

​
Invalid Token

{
  "errors": [
    {
      "message": "Invalid or expired preview token",
      "extensions": {
        "code": "INVALID_PREVIEW_TOKEN"
      },
      "path": ["preview"]
    }
  ],
  "data": { "preview": null }
}

​
Version Not Found

{
  "errors": [
    {
      "message": "Component version not found",
      "extensions": {
        "code": "VERSION_NOT_FOUND",
        "version": 5
      },
      "path": ["preview"]
    }
  ],
  "data": { "preview": null }
}

​
Preview Resource Deleted

{
  "errors": [
    {
      "message": "Preview resource not found or deleted",
      "extensions": {
        "code": "PREVIEW_NOT_FOUND"
      },
      "path": ["preview"]
    }
  ],
  "data": { "preview": null }
}

​
Draft Package Handling

Draft packages use a special ID format: draft:{projectId}:{organizationId} 
function isDraftPackage(id) {
  return id.startsWith('draft:');
}

// Draft packages should not be cached long-term
if (isDraftPackage(packageId)) {
  // Always fetch fresh or use short TTL
}
For real-time updates to previewed content, use the previewUpdated subscription.