---
title: Context Data Source
slug: experience/context-data-source
docTags: 
createdAt: 2026-05-12T15:54:03.093Z
---

## Overview

The `context` data source re-exposes data that already exists in `$context` as a list, making it available to list components (swiper, list, dropdown, etc.). It performs no API call — it simply reads a value already in context and passes it through the data source pipeline, enabling features like `limit`, `offset`, `randomize`, and child component binding to work on context data.

## When to use this

Use `context` when data is already loaded into `$context` by a parent component or another data source, and you need to iterate over it in a list component. This avoids redundant API calls and is the right pattern for passing nested arrays (e.g., the `images` array on an article) into a swiper or list.

## Basic Example

```json
{
    "type": "context",
    "contextKey": "galleryImages",
    "contextPath": "article.images"
}
```

This reads `$context.article.images` (already in context) and re-exposes the array as `$context.galleryImages`. A swiper component can then iterate over `$context.galleryImages` to render each image.

## Configuration

### Type-specific properties

| Property    | Type   | Default | Description                                                                                                                 |
| ----------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------- |
| contextPath | string | —       | **Required.** Dot-notation path into `$context` where the source array lives (e.g. `article.images`, `publication.authors`) |

### Common configuration (inherited)

All common data source properties apply — `contextKey`, `limit`, `offset`, `randomize`, etc. `batchSize`, `maxCacheAge`, and `preventSSRCache` have no meaningful effect since no API call is made.

For more details, see: [Data Sources Overview](docId\:fuMBUaBWeON_OTO5wfevf)

## Advanced Features

### Slicing and limiting context arrays

Apply `limit` and `offset` to show only a subset of a large context array:

```json
{
    "type": "context",
    "contextKey": "topAuthors",
    "contextPath": "article.authors",
    "limit": 3
}
```

### Storing only a specific property

Use `contextProperty` to extract a single field from each item — useful for building ID lists:

```json
{
    "type": "context",
    "contextKey": "authorIds",
    "contextPath": "article.authors",
    "contextProperty": "id"
}
```

`$context.authorIds` will be an array of ID strings rather than full author objects.

For more details on value interpolation, see:
[TODO insert link to Value Interpolation](#)

## Testing Notes / Edge Cases

- `contextPath`** must point to an array**: If the resolved value is not an array (e.g., a string or object), the data source returns an empty list. Verify the context structure at runtime using the developer tools.
- **Path resolution timing**: The context path is resolved when the data source initializes. If the parent context hasn't loaded yet (async), the list will be empty. Ensure the parent data is loaded before the child list renders — use conditions or loading states to guard against this.
- **No caching overhead**: Since no API call is made, `maxCacheAge` and `preventSSRCache` have no effect. The data is as fresh as whatever loaded it into context.
- **Nested path notation**: Both dot notation (`article.images`) and bracket notation (`article['images']`) are supported in `contextPath`.

## Related Topics

- [Data Sources Overview](docId\:fuMBUaBWeON_OTO5wfevf)
- [Custom Data Source](docId\:Fownkj3bWKtRlGn6mGudn)