Context Data Source

8 min

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

{
    "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 Overviewcon

Advanced Features

Slicing and limiting context arrays

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

{
    "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:

{
    "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.

Data Sources Overviewd

Custom Data Sourcecus