Skip to main content

Class: CloudRepository

Defined in: helpers/CloudRepository.ts:189

Overview​

The CloudRepository class serves as a centralized data access layer for retrieving user flows and components from the Myop.dev cloud service. It implements a singleton pattern and provides caching mechanisms to optimize API calls and improve performance.

Class Structure​

Constructor​

constructor(private _baseUrl = 'https://cloud.myop.dev')

Parameters:

  • _baseUrl (optional): The base URL for the Myop.dev cloud API. Defaults to 'https://cloud.myop.dev'

Static Properties​

Main​

static Main = new CloudRepository();

A singleton instance of the CloudRepository class that can be used throughout the application without creating multiple instances.

Private Properties​

userFlows​

private userFlows: Record<string, Promise<IUserFlow>> = {};

A cache object that stores promises for user flows, indexed by flow ID. This prevents duplicate API calls for the same flow and ensures consistent data retrieval.

_baseUrl​

private _baseUrl: string

The base URL for the cloud API endpoints, set during construction.

Methods​

fetchFlow(flowId: string)​

Retrieves a complete user flow from the cloud repository, including all resolved components.

Parameters:

  • flowId: The unique identifier for the user flow to retrieve

Returns:

  • Promise<IUserFlow>: A promise that resolves to the complete user flow object

Behavior:

  • Implements request caching to avoid duplicate API calls for the same flow ID
  • Makes a GET request to /flow?id={flowId}&resolve=components
  • Automatically resolves component references within the flow
  • Stores the promise in the cache for future use

Example Usage:

const flow = await CloudRepository.Main.fetchFlow('my-flow-id');
console.log(flow.components);

fetchComponent(componentId: string, flowId: string)​

Retrieves a specific component from within a user flow.

Parameters:

  • componentId: The unique identifier for the component to retrieve
  • flowId: The unique identifier for the user flow containing the component

Returns:

  • Promise<Component | undefined>: A promise that resolves to the component object if found, or undefined if not found

Behavior:

  • First fetches the complete flow using fetchFlow()
  • Searches through the flow's components array to find the matching component
  • Uses the component's type.id property for matching

Example Usage:

const component = await CloudRepository.Main.fetchComponent('button-component', 'my-flow-id');
if (component) {
    console.log('Component found:', component);
} else {
    console.log('Component not found in flow');
}

API Integration​

Endpoint Structure​

The class integrates with the following Myop.dev cloud API endpoint:

GET {baseUrl}/flow?id={flowId}&resolve=components

Query Parameters:

  • id: The flow identifier
  • resolve=components: Instructs the API to include resolved component data in the response

Response Format​

The API is expected to return a JSON response with the following structure:

{
    "item": {
        // IUserFlow object with resolved components
        "components": [
            {
                "type": {
                    "id": "component-id"
                }
                // ... other component properties
            }
        ]
        // ... other flow properties
    }
}

Caching Strategy​

The CloudRepository implements a promise-based caching mechanism:

  1. Cache Key: Flow ID is used as the cache key
  2. Cache Value: Promises are cached rather than resolved values to handle concurrent requests
  3. Cache Duration: Cache persists for the lifetime of the repository instance
  4. Cache Invalidation: No automatic cache invalidation is implemented

Error Handling​

  • Network errors and API failures are propagated through promise rejection
  • No specific error handling or retry logic is implemented at the repository level
  • Consumers should implement appropriate error handling when calling repository methods

Usage Patterns​

Singleton Access​

import { CloudRepository } from './path/to/CloudRepository';

// Use the singleton instance
const flow = await CloudRepository.Main.fetchFlow('flow-id');

Custom Instance​

// Create a custom instance with different base URL
const customRepo = new CloudRepository('https://custom-api.example.com');
const flow = await customRepo.fetchFlow('flow-id');

Component Retrieval​

// Get a specific component from a flow
const component = await CloudRepository.Main.fetchComponent('component-id', 'flow-id');

Dependencies​

  • IUserFlow: Interface imported from ../common that defines the structure of user flow objects
  • Fetch API: Uses the native fetch function for HTTP requests

Performance Considerations​

  • Caching: Prevents duplicate API calls for the same flow ID
  • Promise Caching: Handles concurrent requests efficiently by caching promises
  • Component Resolution: The resolve=components parameter ensures components are fully resolved in a single API call

Future Enhancements​

The class structure suggests planned functionality that could be implemented:

  • Component Caching: The commented components property indicates potential individual component caching
  • Cache Invalidation: Methods to clear or refresh cached data
  • Error Retry Logic: Automatic retry mechanisms for failed requests
  • Batch Operations: Methods to fetch multiple flows or components in a single request

Constructors​

new CloudRepository()​

new CloudRepository(_baseUrl): CloudRepository

Defined in: helpers/CloudRepository.ts:195

Parameters​

_baseUrl​

string = 'https://cloud.myop.dev'

Returns​

CloudRepository

Properties​

Main​

static Main: CloudRepository

Defined in: helpers/CloudRepository.ts:190

Methods​

fetchComponent()​

fetchComponent(componentId, flowId): Promise<undefined | IComponentConfig>

Defined in: helpers/CloudRepository.ts:198

Parameters​

componentId​

string

flowId​

string

Returns​

Promise<undefined | IComponentConfig>

fetchFlow()​

fetchFlow(flowId): Promise<IUserFlow>

Defined in: helpers/CloudRepository.ts:203

Parameters​

flowId​

string

Returns​

Promise<IUserFlow>