@dreipol/default-api-interfaces

default-api-interfaces

This repo shows some default data structure for the APIs.

Folder Structure

src/interfaces/api All interfaces are stored here, where data comes via api and from the backend

src/interfaces/api/cms Interfaces that represent data coming from the backend/cms

src/interfaces/api/content Content interfaces that are used within a plugin

src/interfaces/api/partials Default partials.

src/interfaces/api/plugins Default plugins that are common and reusable across projects

Guide for adding a new interface

Definitions

Extend framework interface

If you have to extends for example the IRouteData interface that is already given from the framework you can do it like this

export {IRouteData as IAbstractRouteData} from '@dreipol/default-api-interfaces';

export namespace App {
    export interface IRouteData extends IAbstractRouteData {
        isHeaderColorPrimary: boolean;
    }
}

The export namespace App will provide your new IRouteData within the App namespace. This means you can reference your interface by typing App.IRouteData.

Group properties

Group properties together. Seperate primitives and non-primitives props for better readability

DO

export interface IProduct {
    name: string;
    color: string;
    abstract: string;
    
    product_image: IImage;
    product_logo: IImage;
    specs: IProductSpecs
    link: ILink;
}

DON'T

export interface IProduct {
    name: string;
    product_logo: IImage;
    specs: IProductSpecs
    color: string;
    product_image: IImage;
    abstract: string;
    link: ILink;
}

Use primitive types

DO Use primitve types like string, or number

export interface IImage {
    url: string;
    alt: string;
}

DON'T - Do not use the type String or Number

export interface IImage {
    url: String;
    alt: String;
}

What a default response should look like

Interface

{
    "data": {
        "containers": {
            "main": {
                "type": "cmp-main",
                "plugins": [...]
            }
        },
        "meta": {
            "title": "Cas Study #2",
            "description": ""
        }
    }
}