New React Library: API Integration Made Easy with Axiosflow's Automatic Client Generation

Hey developers

I am excited to introduce a new open-source library that bridges the gap between Express backends and Axios frontend clients with unrivaled type safety. Axiosflow automatically generates type-safe Axios client functions directly from your Express.js backend API definitions. This eliminates tedious boilerplate code and ensures seamless integration between your frontend and backend, boosting developer productivity and reducing errors.

Core capabilities:

• express backend integration
• client function generation
• dynamic route support
• type-safe
• minimal configuration

Github:link

and, I'm eager to hear your thoughts.

You can use axiosflow by executing commands in the root project folder :

# Basic generation

axiosflow generate

# With specific options

axiosflow generate -b http://localhost:3000 -o ./src/services

These API functions generated by Axiosflow look like this:

/**

 * Auto-generated types based on API schema

 * Generated by axiosflow

 * @generated

 * @timestamp 2024-12-30T08:09:14.272Z

 */

import axios, { AxiosRequestConfig, isAxiosError } from 'axios';

import { BASE_URL, endpoints } from './apiConfig';

import { UserRequest, User } from './types';

/**
 *  * Performs a GET request to /users
 * @param {AxiosRequestConfig} [config] - Optional Axios request configuration
 * @returns {Promise<User>} - User response data
 * @throws {Error} - Throws an error for network or API-related issues
 * @example
 *  * const result = await get_users();
 */
export const get_users = async (
    data?: Record<string, unknown>,
    config?: AxiosRequestConfig
): Promise<User> => {
    // URL parameter replacement utility
    const replaceUrlParams = (url: string, data?: Record<string, unknown>) => {
        if (!data) return url;
        return url.replace(/:(\w+)/g, (_, key) =>
            data[key as keyof typeof data] !== undefined
                ? String(data[key as keyof typeof data])
                : ''
        );
    };

    // Construct base URL
    const baseUrl = BASE_URL + endpoints.get_users;

    // Replace URL parameters
    const url = replaceUrlParams(baseUrl, data);

    const requestConfig: AxiosRequestConfig = {
        method: 'GET',
        url,
        params: data,
        ...config,
    };

NPM link is here: link