Implement the Model Lifecycle

Prerequisites

Add Model To Component

Create New Model

Configure Test Utilities

Set Up SDK

Create Data Access Service

// src/models/demo/services/demo-services.ts

import { ServiceFactory, resolveServiceUrl } from "@coca-cola/kos-ui-core";

const { URL } = resolveServiceUrl("DEMO_SERVICE");
const { getOne } = ServiceFactory.build({
  destinationAddress: "",
  basePath: `${URL}/foo`,
});

interface DemoResponse {
  id: string;
  name: string;
}
/**
 * @category Service
 * Retrieves a single demo model
 */
export const getDemo = async (id: string) => {
  const response = await getOne<DemoResponse>({
    urlOverride: `${URL}/foo/${id}`,
  });
  return response;
};

Implement the Load Lifecycle Hook

// src/models/demo/demo-model.ts

import {kosAction} from "@coca-cola/kos-ui-components";
import {getDemo} from "./services/demo-services";

    /**
     * The load lifecycle method provides an opportunity to hydrate the model with data fetched
     * from the backend.
     */
    async load(): Promise<void> {
        try {
            log.info("loading demo model");
            const response = await getDemo(this.id);
            log.debug(`received response ${response}`);
            kosAction(() => {
                const newName = response?.data.name;
                if (newName) {
                    this.name = newName;
                }
            });
        } catch(e) {
            log.error(e);
            throw e;
        }
    }