DEV Community

Cover image for New React Library: API Integration Made Easy with Axiosflow's Automatic Client Generation
Getaw Dejen
Getaw Dejen

Posted on

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

#webdev #react #express #axios

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
Enter fullscreen mode Exit fullscreen mode

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, };
Enter fullscreen mode Exit fullscreen mode

NPM link is here: link

Top comments (0)