DataCollectionStore
DataCollectionStore is a MobX based store that can be used to retrieve entity collections. It can be created via collection initializer function:
dataCollection = collection<Pet>(Pet.NAME, {
view: 'pet-with-owner-and-type',
sort: 'identificationNumber',
filter: {conditions: [{property: 'name', operator: "contains", value: 'Ro'}]},
limit: 10,
offset: 0,
loadImmediately: true, // true by default
}
);In a functional component you’ll need to wrap the call to collection in React.useRef or use a convenience hook useCollection.
const dataCollection = useCollection<Pet>(
Pet.NAME,
{
view: 'pet-with-owner-and-type',
sort: 'identificationNumber',
filter: {conditions: [{property: 'name', operator: "contains", value: 'Ro'}]},
limit: 10,
offset: 0,
loadImmediately: true, // true by default
}
);
// Note that `dataCollection` in this case is a React's `MutableRefObject`.
// The `DataCollectionStore` is contained in its `current` property.
dataCollection.current.delete(e);DataCollectionStore will consider an entity to be a String ID entity when stringIdName parameter is provided:
dataCollection = collection<Pet>(Pet.NAME, {
stringIdName: 'identifier'
}
);Typically a DataCollectionStore is used to display a list of entities. Since it’s reactive, any changes in items and status will trigger a re-render of @observer components:
@observer
class CarList extends React.Component {
carsData = collection<Car>(Car.NAME, {view: 'car-view', sort: '-updateTs'});
render() {
if (this.carsData.status === "LOADING") return 'Loading...';
return (
<ul>
{this.carsData.items.map(car =>
<li>{car._instanceName}</li>
)}
</ul>
)
}
}