API Control Plane - API Helper

Contains the services for communicating with the backend. Commonalities in this communication are bundled here, e.g:

1. The handling of page navigation
2. authentication, SAML etc..
3. The websocket functionality

https://www.npmjs.com/package/@apiida/controlplane-api-helper

https://apiida.com/product/apiida-api-control-plane/

https://pinia.vuejs.org/

https://axios-http.com/docs/intro

https://www.npmjs.com/package/webstomp-client

Merge conflicts / version conflicts

The branches "master" and "fallback" are published on npm. Npm always takes the highest version number, the branch doesn't matter. The "master" should always contain the highest version (see examples below). If there are problems with the versions during parallel development:

1. In case of a merge conflict you have to check if there are breaking changes in the other frontends. If so, the merge must be aborted and the fallback must be used.

2. There a new version number is set.

3. With this new version number you can continue to work in the other frontends.

4. Set the version number in the frontend:

   npm install @apiida/[email protected]

5. Discuss with the team and merge the version number.

   // local version of controlplane-api-helper
   npm list @apiida/controlplane-api-helper
      
   // Highest verion in npm (online)
   npm view @apiida/controlplane-api-helper

Usage

Examples

Create the following two classes. How to implement the classes

ApiClient.ts

import axios, { AxiosInstance } from 'axios';
import { ApiClient } from '@apiida/controlplane-api-helper';
import { notify } from 'notiwind';
import config from '../config';
import { insertTenantId } from '../helper/TenantHelper';

function getBackendUrl(): string {
  return `${config.backendUrl}/`;
}

const apiClient: AxiosInstance = axios.create({
  baseURL: getBackendUrl(),
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 30000,
  validateStatus(status: number) {
    return status < 500; // Resolve only if the status code is less than 500
  },
});

// Set the AUTH token for any request
apiClient.interceptors.request.use((axiosConfig) => {
  const token = localStorage.getItem('accessToken');

  if (axiosConfig != null && axiosConfig.headers !== undefined && token != null) {
    axiosConfig.headers.Authorization = token;
  }

  return axiosConfig;
});

export default new ApiClient(apiClient, notify);

BasicService.ts

import { BasicType, BasicService as TheBasicService } from '@apiida/controlplane-api-helper';
import apiClient from './ApiClient';

export default abstract class BasicService<T extends BasicType> extends TheBasicService<T> {
  protected constructor(url: string, entityName: string) {
    super(url, entityName, apiClient);
  }
}

Now you can create a Pinia Store and a service for your entity.

SubscriptionStore.ts

import { defineStore } from 'pinia';
import Subscription from '../types/applications/Subscription';

const subscription = defineStore({
  id: 'subscription',
  state: () => ({
    subscriptions: [] as Subscription[],
  }),
});

export default subscription;

SubscriptionService.ts

import Subscription from '../../types/applications/Subscription';
import subscriptionStore from '../../stores/SubscriptionStore';
import BasicService from '../BasicService';

class SubscriptionService extends BasicService<Subscription> {
  constructor() {
    super('/subscriptions', 'Subscription');
  }

  storeFill(entitys: Subscription[]): void {
    this.getStore().subscriptions = entitys;
  }

  storeGetAllEntitys(): Subscription[] {
    return this.getStore().subscriptions;
  }

  getStore(): any {
    return subscriptionStore();
  }
}

export default new SubscriptionService();

You can send CRUD calls to the API with the SubscriptionService and the BasicService takes care of the caching.

Contribute

Version

The version is made up as follows.

BreakingChange.CreateOrUpdateComponent.BugFix (1.2.598)