@waiin/openapi-tools

Effortless API Integration for React with OpenAPI

🔧 @waiin/openapi-tools is a powerful tool and library designed to streamline API development by generating proxy services and Redux integrations for React applications based on OpenAPI specifications. It supports any JSON from Swagger, allowing seamless API consumption with minimal effort.

✨ Features

🔹 Proxy Generation

✅ Automatically creates API service layers from OpenAPI specs.
✅ Supports RESTful API requests with built-in configurations.
✅ Reduces boilerplate code for API calls.

🔹 Redux Integration

✅ Generates Redux slices and hooks for API state management.
✅ Provides seamless state management for API responses.
✅ Enables easy caching and refetching of data.

🔹 Swagger & OpenAPI Compatibility

✅ Works with any JSON format from Swagger/OpenAPI.
✅ Parses OpenAPI definitions to generate type-safe API services.

🔹 Customizable Output

✅ Allows modifications to generated services.
✅ Configurable templates for service generation.

🔹 Developer-Friendly Usage

✅ Simple CLI commands for API generation.
✅ Minimal configuration required for setup.

📦 Installation

Install using npm:

npm install @waiin/openapi-tools

⚙️ Setup & Usage

1️⃣ Add script in package.json

"scripts": {
  "generate": "npx openapi-tools --source <local_path_or_url> --output <output_directory>"
}

2️⃣ Example Script Execution

📂 Using a Local File

"scripts": {
  "generate": "npx openapi-tools --source D:/Waiin/controller-api/gen/http/openapi3.json --output src/middleware"
}

🌐 Using a URL

"scripts": {
  "generate": "npx openapi-tools --source https://petstore3.swagger.io/api/v3/openapi.json --output src/middleware"
}

3️⃣ Run the Script in Terminal

npm run generate

🔗 Expected Integration in React

Generated API hooks and Redux slices allow easy integration:

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { listFindPetsByStatus, StatusEnum } from "./api/petService";

const App = () => {
  const dispatch = useDispatch();
  const pets = useSelector((state: any) => state.petReducer);

  useEffect(() => {
    dispatch(listFindPetsByStatus(StatusEnum.Sold));
  }, [dispatch]);

  return <div>{JSON.stringify(pets)}</div>;
};

🔧 Create New File or Existing section for Calls

const axiosInstance = axios.create({ baseURL: 'https://petstore3.swagger.io/api/v3' });
 
axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);
export const store = configureStore({
  reducer: CombineReducers,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk, axiosMiddleware(axiosInstance)),
});
export type RootStateType = ReturnType<typeof store.getState>;

📜 Why Choose @waiin/openapi-tools?

🚀 Boost Productivity – Save time on writing API calls manually.
⚡ Seamless Redux Integration – Get auto-generated slices & hooks.
📖 Type-Safe Code – Ensures strong typing with OpenAPI.
🔧 Customizable & Scalable – Modify templates as per project needs.

🔥 Supercharge your API workflow today! Install and start using @waiin/openapi-tools now. 🚀