Development API Interceptor

Software is an agile process where waiting for an actual API endpoint to be develop is not an option, So Development API Interceptor package creates a mock RESTful API backend without having to create an actual HTTP server, it also generates an IndexedDB database in the browser from the provided JSON representation which in turn helps to speed up the development process.

Getting Started

The below instructions will help you in installing the package into the Client application. See Usage for notes on how to use the basic functionalities of the package.

Installation and Setup

Step 1

Create a db-v1.json file based on the below JSON Schema and JSON Representation Example.

JSON Schema

{
    "database": "[Database Name]",
    "tables": [
        {
            "table_name": "[Table name]",
            "columns": [
                {
                    "entity_name": "[Column name]",
                    "type": "[string, integer, boolean, date, json, float, decimal]",
                    "constraints": {
                        "PRIMARY_KEY": boolean, //One column must be a primary key
                        "AUTO_INCREMENT": boolean, //Only primary key column must have auto increment key
                        MAX_LENGTH: [NUMBER],
                        NOT_NULL: [BOOLEAN],
                    }
                },
            ],
            "relationships": [
                {
                   "associated_table": "[Related table name]",
                   "associated_column": "[Related table primary column]",
                   "foreign_key_column": "[Foreign key column]"
                }
             ]
        }
}

JSON Representation Example

{
    "database": "db-v1",
    "tables": [
        {
            "table_name": "employees",
            "columns": [
                {
                    "entity_name": "id",
                    "type": "integer",
                    "constraints": {
                        "NOT_NULL": false,
                        "PRIMARY_KEY": true,
                        "AUTO_INCREMENT": true

                    }
                },
                {
                    "entity_name": "name",
                    "type": "string",
                    "constraints": {
                        "MAX_LENGTH": 5,
                        "NOT_NULL": true
                    }
                },
                {
                    "entity_name": "designation",
                    "type": "string",
                    "constraints": {
                        "MAX_LENGTH": 20,
                        "NOT_NULL": true
                    },
                {
                    "entity_name": "details",
                    "type": "json",
                },
                {
                    "entity_name": "project_id",
                    "type": "integer",
                    "constraints": {
                       "NOT_NULL": true,
                       "FOREIGN_KEY": true
                    }
                 }
            ],
            "relationships": [
                {
                   "associated_table": "projects",
                   "associated_column": "id",
                   "foreign_key_column": "project_id"
                }
             ]
        },
        {
            "table_name": "projects",
            "columns": [
                {
                    "entity_name": "project_name",
                    "type": "string",
                    "constraints": {
                        "MAX_LENGTH": 32,
                        "NOT_NULL": true
                    }
                },
                {
                    "entity_name": "id",
                    "type": "integer",
                    "constraints": {
                        "NOT_NULL": true,
                        "PRIMARY_KEY": true,
                        "AUTO_INCREMENT":true
                    }
                }
            ]
        }

    ]
}

Note:

• Each table must have a primary key. If there is no PRIMARY_KEY and AUTO_INCREMENT column, the user would get an error - 'Primary key is not present in schema' on subsequent interceptor operations.
• The primary key constraint NOT_NULL must be true if auto_increment is false.
• The auto_increment can be only set to true for the column that is a primary key and is of type number else auto Increment feature would not work.
• The primary key constraint NOT_NULL can be false if auto_increment is true.
• Type in foreign key must be equal to the type of column it is referring to.
• If the type of entity is an json, it won't require any constraints.
• If the schema is to be changed in the future, it must be accompanied by a change in database key. For eg.- If there is any change in employees table in the future, then the database name needs to be changed in the JSON and it could be "database": "db-v2".

Step 2

Installation

Run the following command in your project's root directory

npm install @jsstudio/development-api-interceptor --save-dev

Usage

Angular application

Step 1. Execute the init command of the Mock Service Worker CLI in the root of angular app

npx msw init ./src

Note: Add newly created file path to the assets of the angular.json file

Step 2. Place the created json schema file in src folder

Step 3. Usage example(Place the below code inside app.module.ts)

import MockApi from '@jsstudio/development-api-interceptor'
import json from '../schema.json';
const mockApi = new MockApi(json);
mockApi.initialize()

React application(CRA)

Step 1. Execute the init command of the Mock Service Worker CLI in the root of react app

npx msw init ./public

Step 2. Place the created json schema file in src folder of react app

Step 3. Usage example (Place the below code inside App.js)

import MockApi from '@jsstudio/development-api-interceptor'
import json from '../schema.json';
const mockApi = new MockApi(json);
 mockApi.initialize()

Vue application

Similar steps as react application can be followed for vue app.

Output : Below indexedDB database will be created using example json representation.

Routes

Once you start the application after completion of above steps, package will expose the following set of api endpoints.

GET    /api/{tableName}
GET    /api/{tableName}/{id}
POST   /api/{tableName}
PUT    /api/{tableName}/{id}
DELETE /api/{tableName}/{id}

Usage(React/Vue application)

Using Axios

// get all request
const response = await axios.get('/api/employees');
console.log(response.data);
//{data: Array(3), message: "Data fetched successfully", status: 200, success: true}

// get by id request
const response = await axios.get('/api/employees/1');
console.log(response.data)
//{data: {id:1...}, message: "Data fetched successfully", status: 200, success: true}

// post request
const response = await axios.post('/api/employees', { name: 'John Doe', designation: 'Software Developer' })
console.log(response.data)
//{data: 1, message: "Data created successfully", status: 200, success: true}

Note: In case of AUTO_INCREMENT false, pass primary key in request body.

// post request
const response = await axios.post('/api/employees', { id:1, name: 'John Doe', designation: 'Software Developer' })
console.log(response.data)
//{data: 1, message: "Data created successfully", status: 200, success: true}

// put request
const response = await axios.post('/api/employees/1', { name: 'Elvis', designation: 'Software Developer' })
console.log(response.data)
//{data: 1, message: "Data updated successfully", status: 200, success: true}

Using Fetch

Always pass the config while using fetch api. Below is the sample code.

// get all request
 const getOptions = {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
  };
  const result = await fetch('/api/employees', getOptions)
  const data = await result.json()
  //{data: Array(3), message: "Data fetched successfully", status: 200, success: true}

// get by id request
 const getOptions = {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
  };
  const result = await fetch('/api/employees/1', getOptions)
  const data = await result.json()
  //{data: {id:1...}, message: "Data fetched successfully", status: 200, success: true}

// post request
const postOptions = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(
      { name:'Mohit', details: { mobile: 1231231, dob: '01-01-1970', project :true }, designation: 'dev' }
    )
};
var response = await fetch('/api/employees', postOptions);
var data = await response.json();
//{data: 1, message: "Data created successfully", status: 200, success: true}

Note: In case of AUTO_INCREMENT false, pass primary key in request body

// put request
const postOptions = {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(
      { name:'Alex', details: { mobile: 1231231, dob: '01-01-1970', project :true }, designation: 'dev' }
    )
};
var response = await fetch('/api/employees/1', postOptions);
var data = await response.json();
//{data: 1, message: "Data updated successfully", status: 200, success: true}

Usage(Angular application)

// get request
const response = this.http.get(`api/employees/1`);

// get all request
const response = this.http.put(`api/employees`);

// post request
 const body = {
      name: 'Alex',
      details: JSON.stringify({
        mobile: 12312312,
        dob: 10/10/1991,
        project: 'internal'
      }),
      designation: 'developer'
    };
  const response = this.http.post('api/employees', body);

Note: In case of AUTO_INCREMENT false, pass primary key in request body

// put
 const body = {
     name: 'Elvis',
     details: JSON.stringify({
       mobile: 12312312,
       dob: 10/10/1991,
       project: 'internal'
     }),
     designation: 'developer'
   };
const response = this.http.put(`api/employees/1`);

Package Import Suggestion

Since it is a dev package, you can create src/config/environment/development.js and paste the below code in that file and import it in the entry point file of your app.

import MockApi from '@jsstudio/development-api-interceptor'
import json from '../schema.json';
const mockApi = new MockApi(json);
 mockApi.initialize()

Features

• Creating mock api endpoints without actually creating a HTTP server.
• Generating version based indexedDB database.
• Intercepting API request using service worker.
• Performing RESTful API functions using browser IndexedDB.

Technologies Used

• Languages : Typescript
• Database: IndexedDB
• Client : React, Vue, Angular
• Validation Library: Ajv
• Logger Library : Logger
• Interceptor Library : MSW(Mock Service Worker)
• Unit Test Cases : Mocha and Chai

Author

👤 srijanone

• Website: http://www.srijan.net
• Github: @srijanone

Show your support

Give a ⭐️ if this project helped you!

License

(c) Copyright JSSTUDIO Inc. 2020