> ## 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 use a `preview-token` header instead of `x-api-key`:

```javascript theme={null}
headers: {
  'preview-token': 'YOUR_PREVIEW_TOKEN',
  'Content-Type': 'application/json'
}
```

## 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": "Invalid or expired preview token",
      "extensions": {
        "code": "INVALID_PREVIEW_TOKEN"
      },
      "path": ["preview"]
    }
  ],
  "data": { "preview": null }
}
```

### Version Not Found

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

### Preview Resource Deleted

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

```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>