AxiosFlow: Automate Type-Safe API Calls and Supercharge Your TypeScript Workflow


As a TypeScript developer, have you ever felt frustrated writing repetitive, error-prone API calls? Do you wish there were a way to automate type-safe API interactions without sacrificing flexibility? Meet AxiosFlow, a powerful TypeScript library that revolutionizes your interactions with APIs.
In this post, I'll show you how AxiosFlow can save you hours of development time, reduce boilerplate code, and ensure compile-time type safety for your API calls.
What is AxiosFlow?
AxiosFlow is a TypeScript library that automatically generates type-safe API functions for your RESTful APIs. It works seamlessly with Express.js and Axios, eliminating the need for manual type definitions and repetitive API call functions.
Key Features:
Automatic API Function Generation: Say goodbye to writing repetitive API call functions.
Compile-Time Type Safety: Catch type mismatches before runtime.
Dynamic URL Parameter Support: Easily handle dynamic routes like
/users/:id
.Minimal Configuration: Works out of the box with your existing Express.js backend.
Why Use AxiosFlow?
1. Eliminate Boilerplate Code
Writing API call functions manually is time-consuming and error-prone. With AxiosFlow, you can generate fully typed API functions with just a few lines of code.
2. Ensure Type Safety
AxiosFlow ensures that your API calls are type-safe at compile time. This means fewer runtime errors and more reliable code.
3. Seamless Integration
AxiosFlow integrates perfectly with Express.js and Axios, so you don’t need to learn a new framework or rewrite your existing code.
How AxiosFlow Works
Step 1: Define Your API Routes
Define your API routes and controllers in Express.js:
// src/controllers/userController.ts
import { Request, Response } from 'express';
export class UserController {
private users = [ { id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' }, ];
getUsers(req: Request, res: Response) { res.status(200).json({ data: this.users }); } }
Step 2: Register Routes with AxiosFlow
Use AxiosFlow to register your routes and generate type-safe API functions:
// src/routes/userRoutes.ts
import { registerRoute } from 'axiosflow-api';
import { UserController } from '../controllers/userController';
const userController = new UserController();
export function registerUserRoutes() { registerRoute( userController, 'GET', '/users', null, { id: 'number', name: 'string' }, [], 'getUsers' ); }
Step 3: Generate Type-Safe API Functions
Run the AxiosFlow CLI to generate type-safe API functions:
npx axiosflow generate
This will generate the following files in src/services/
:
apiFunctions.ts
: Type-safe API functions.types.ts
: Type definitions for your API.api-schema.json
: API schema documentation.
Step 4: Use the Generated Functions
Now, you can use the generated functions in your application to make API calls. These functions are type-safe, ensuring your requests and responses match the expected types. This helps prevent errors and makes your code more reliable.
Use the generated functions in your frontend:
import { get_users } from './services/apiFunctions';
async function fetchUsers() { try { const users = await get_users(); console.log(users); // Fully typed response! } catch (error) { console.error(error); } }
Explore the documentation and check out the live examples and the NPM Library.
Subscribe to my newsletter
Read articles from Getaw Dejen directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
