Simplifying HTTP API Requests with Client HTTP API Request Builder

In the world of modern web development, making HTTP requests to RESTful APIs is a common task. It involves handling various complexities such as setting headers, dealing with different HTTP methods, and managing endpoints. The Client HTTP API Request Builder is a powerful tool designed to simplify this process for client-side JavaScript applications.

Overview

The Client HTTP API Request Builder introduces a builder pattern for constructing API requests, providing utilities to streamline the interaction with RESTful APIs. Let's delve into some key files that make this library robust:

1. api-builder.js

This file contains the heart of the builder pattern - ApiBuilder. It offers methods for constructing API requests for entities or endpoints. When utilizing this library, the ApiBuilder function is crucial. It takes an options object as a parameter, including entities, endpoints, a name, and an endpoint.

2. request.js

Here, the apiRequest function is defined to make actual HTTP requests, and the toQueryString function is provided, which converts an object to a query string for GET requests. These utilities enhance the flexibility of the library.

3. restEntityApi.js

The RestEntityAPI encapsulates the logic for making HTTP requests to a REST API. It includes functionalities for creating, reading, updating, and deleting resources, ensuring comprehensive API interaction.

Installation

To integrate the Client HTTP API Request Builder into your project, you can easily install it using npm or yarn:

npm install client-http-api-request-builder
# or
yarn add client-http-api-request-builder

Usage

Once installed, utilizing the library is straightforward. Import the ApiBuilder into your project and create an instance for a specific API endpoint. Here's an example:

import ApiBuilder from 'client-http-api-request-builder';

const UsersAPI = ApiBuilder({
    name: 'users',
    endpoint: () => 'https://your.baseUrl/users',
    headers: {
        'Authorization': `Bearer ${token}`
    },
});

// Now UsersAPI has HTTP request methods for create, update, destroy, getById, and list.

Generate Multiple Entities in a Single Run

You can efficiently generate methods for multiple entities in a single run, enhancing code organization:

import ApiBuilder from 'client-http-api-request-builder';

const API = ApiBuilder({
    entities: {
        users: {
            name: 'users',
            endpoint: () => 'https://your.baseUrl/users',
        },
        books: {
            name: 'books',
            endpoint: () => 'https://your.baseUrl/books',
        },
    },
   headers: {
        'Authorization': `Bearer ${token}`
    },
});

// Now API has API.users and API.books with HTTP request methods for each endpoint.

Generate Multiple Endpoints in a Single Run

For scenarios where different methods are needed for distinct endpoints, you can define your own method names with specific request method types:

import ApiBuilder, { METHOD_TYPES } from 'client-http-api-request-builder';

const API = ApiBuilder({
    endpoints: {
        getUsers: {
            type: METHOD_TYPES.LIST,
            endpoint: () => 'https://your.baseUrl/users-list',
        },
        getSingleBookByUserId: {
            type: METHOD_TYPES.GET,
            endpoint: (bookId) => `https://your.baseUrl/book/${bookId}/users`,
        },
    },
   headers: {
        'Authorization': `Bearer ${token}`
    },
});

// Now API has API.getUsers and API.getSingleBookByUserId functions.

Generate Custom Request Methods & FormData Requests

You can even create custom request methods to cater to specific needs, like FormData requests:

import ApiBuilder, { METHOD_TYPES, request } from 'client-http-api-request-builder';

const API = ApiBuilder({
    endpoints: {
        getUsers: {
            type: METHOD_TYPES.LIST,
            endpoint: () => 'https://your.baseUrl/users-list',
        },
    },
   headers: {
        'Authorization': `Bearer ${token}`
    },
});

const getSingleBookByUserId = (userId, bookId) => request(
    `https://your.baseUrl/book/${bookId}/users/${userId}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },
    },
);

const uploadPhoto = (data) => request(
    'https://your.baseUrl/api/photo', {
        method: 'POST',
        body: data,
        formData: true,
    },
);

// Combine custom methods with the generated API functions.
const CustomAPI = {
    ...API,
    getSingleBookByUserId,
    uploadPhoto,
};

Author and Contributors

Author:

• Haider Khan - Full Stack Javascript Developer

  • LinkedIn

  • GitHub

Contributors:

• Welcome contributing! Please use GitHub's Issues/PRs for collaboration.

• Github Repo: client-http-api-request-builder

In conclusion, the Client HTTP API Request Builder is a valuable tool for simplifying the process of interacting with HTTP APIs in client-side JavaScript applications. Its modular and flexible design allows for easy integration into various projects, making API requests more manageable and efficient.