> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview

> Access draft content via preview tokens

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 don't need an `x-api-key` header. The `token` argument of the `preview` query authorizes the request.

## Preview Query

```graphql theme={null}
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

| Parameter | Type | Required | Description |
| - | - | - | - |
| `token` | String! | Yes | Preview link token |
| `version` | Int | No | Specific component version (defaults to latest draft) |

## Component Preview

Fetch a component preview (defaults to latest draft):

```graphql theme={null}
query GetComponentPreview($token: String!) {
  preview(token: $token) {
    ... on ComponentPreview {
      componentId
      component {
        compiled
        schema
      }
      resolvedRef {
        package
        dependencies
      }
    }
  }
}
```

Response:

```json theme={null}
{
  "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:

```graphql theme={null}
query GetComponentVersion($token: String!, $version: Int!) {
  preview(token: $token, version: $version) {
    ... on ComponentPreview {
      componentId
      component {
        compiled
      }
      resolvedRef {
        package
        dependencies
      }
    }
  }
}
```

Variables:

```json theme={null}
{
  "token": "abc123def456",
  "version": 2
}
```

## Content Preview

Fetch a content preview:

```graphql theme={null}
query GetContentPreview($token: String!) {
  preview(token: $token) {
    ... on ContentPreview {
      contentId
      content {
        id
        name
        compiled
        tags
        locale
        contentType {
          name
        }
      }
      resolvedRef {
        package
        dependencies
      }
    }
  }
}
```

## Preview Types

### ComponentPreview

| Field | Type | Description |
| - | - | - |
| `componentId` | ID! | Component ID |
| `componentName` | String! | Component name for display/recents |
| `component` | Component | Component data (null if exceeds 100KB) |
| `resolvedRef` | ResolvedPackageRef! | Package IDs for caching |

### ContentPreview

| Field | Type | Description |
| - | - | - |
| `contentId` | ID! | Content ID |
| `contentName` | String! | Content name for display/recents |
| `contentTypeName` | String! | Content type name for display/recents |
| `content` | Content | Content data (null if exceeds 100KB) |
| `resolvedRef` | ResolvedPackageRef! | Package IDs for caching |

## Error Handling

### Invalid Token

```json theme={null}
{
  "errors": [
    {
      "message": "Preview link not found",
      "extensions": {
        "code": "PREVIEW_NOT_FOUND"
      },
      "path": ["preview"]
    }
  ],
  "data": { "preview": null }
}
```

### Version Not Found

```json theme={null}
{
  "errors": [
    {
      "message": "Component not found",
      "extensions": {
        "code": "COMPONENT_NOT_FOUND"
      },
      "path": ["preview"]
    }
  ],
  "data": { "preview": null }
}
```

### Previewed Content Not Found

```json theme={null}
{
  "errors": [
    {
      "message": "Content not found",
      "extensions": {
        "code": "CONTENT_NOT_FOUND"
      },
      "path": ["preview"]
    }
  ],
  "data": { "preview": null }
}
```

## Draft Package Handling

Draft packages use a special ID format: `draft:{projectId}:{organizationId}`

```javascript theme={null}
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
}
```

<Note>
  For real-time updates to previewed content, use the [previewUpdated subscription](/graphql/subscriptions/overview).
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.