Early Adopter's Guide to Umbraco v14 Packages : Communicating with the server! - Part 2 (Stores)

The code for this series of posts can be viewed here : https://github.com/KevinJump/TimeDashboard

2. Stores

The store sits between the repository and the resource (which fetches the data). and to be honest, i think its probibly a bit over kill for most people to have a store here, but following on from the Umbraco pattern the store is the thing that will call your resources (auto generated clients).

our complete store is :

import { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
import { UmbDataSourceResponse  } from "@umbraco-cms/backoffice/repository";
import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
import { TimeResource } from "../../api";


export interface TimeDataSource {

    getTime() : Promise<UmbDataSourceResponse<string>>;
    getDate() : Promise<UmbDataSourceResponse<string>>;

}

export class TimeManagementDataSource implements TimeDataSource {

    #host: UmbControllerHost;

    constructor(host: UmbControllerHost) {
        this.#host = host;
    }

    async getTime(): Promise<UmbDataSourceResponse<string>> {
        return await tryExecuteAndNotify(this.#host, TimeResource.getUmbracoTimeApiV1TimeTime())
    }

    async getDate(): Promise<UmbDataSourceResponse<string>> {
        return await tryExecuteAndNotify(this.#host, TimeResource.getUmbracoTimeApiV1TimeDate())
    }

}

the important Umbraco'y bit here is using tryExecuteAndNotify which wraps a lot of the logic around the request, so you get notification boxes when things go wrong, and the calls have all the right bits set on them to work.

As you can see we are returning a Promise now and with the async calls we are waiting for requests to come back without blocking any other code that might want to run.

3. Repositories.

Respositores are the interface between the objects you manage in your application (entities) and the things coming from the server, you might manipulate/conolidate/check items here, but in our case its going to look a lot like our store.:

import { UmbControllerbase } from "@umbraco-cms/backoffice/class-api";
import { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
import { TimeManagementDataSource } from "./sources/time.datasource";

export class TimeManagementRespository extends UmbControllerBase {
    #timeDataSource: TimeManagementDataSource;

    constructor(host: UmbControllerHost) {
        super(host);
        this.#timeDataSource = new TimeManagementDataSource(this);

        console.log('repository constructor');
    }

    async getTime() {
        return this.#timeDataSource.getTime();
    }

    async getDate() {
        return this.#timeDataSource.getDate();
    }
}

In our repositoty we are newing up the store, and then calling the methods to get the values back from the API.

Next .. The context !!

---

Updated: 2/3/2024: preview008. DataSouceReponse -> UmbDataSourceResponse
Updated: 2/3/2024: preview008. UmbBaseController-> UmbControllerBase