Skip to main content

Selectors

Selectors are a powerful tool to reduce the payload and minimize the needed privileges. They are used in data.subscribe and data.get. Selectors are an array of strings. Each string represents a path to a property in the dataset.

Example:

Imagine this payload:

{
"name": "My Product",
"manufacturer": {
"name": "My Manufacturer"
},
"price": 100,
"variants": [
{
"name": "First Variant",
"price": 110
},
// contains more variants
],
// contains more properties
}

If you are only interested in the names of the product and manufacturer, you can use the following selectors:

data.get({
id: 'sw-product-detail__product',
selectors: ['name', 'manufacturer.name'],
}).then((product) => {
console.log(product); // prints { name: "My Product", manufacturer: { name: "My Manufacturer" } }
});

Combining selectors

Again for the above payload, if you are interested in multiple properties of the manufacturer, you can use the following selectors:

data.get({
id: 'sw-product-detail__product',
selectors: ['manufacturer.id', 'manufacturer.name'],
}).then((product) => {
console.log(product); // prints { manufacturer: { id: '065e71ab94d778a980008e8c3e890270', name: "My Manufacturer" }
});

Arrays

If you are interested in a specific variant, you can use the following selectors:

data.get({
id: 'sw-product-detail__product',
selectors: ['variants.[0].name'],
}).then((product) => {
console.log(product); // prints { variants: [ { name: "First Variant" } ] }
});

If you are interested in all variants, you can use wildcards. A wildcard is the asterix symbol (*)

data.get({
id: 'sw-product-detail__product',
selectors: ['variants.*.name'],
}).then((product) => {
console.log(product); // prints { variants: [ { name: "First Variant" }, // same structure for all entries ] }
});