Generate TypeScript/React services and models from OpenAPI specifications with TanStack Query (React Query) hooks, useQuery, useMutation, and native fetch API for React 18+
npm install @metaengine/openapi-reactGenerate TypeScript/React services and models from OpenAPI specifications.
- ✅ React 18+ - Modern React with hooks
- ✅ TypeScript - Fully typed API clients
- ✅ TanStack Query - Optional integration with useQuery/useMutation
- ✅ Fetch API - No dependencies, uses native fetch
- ✅ Monorepo Friendly - Configurable environment variables
- ✅ Framework Agnostic - Works with Vite, Next.js, Create React App
``bash`
npm install --save-dev @metaengine/openapi-react
Or use directly with npx:
`bash`
npx @metaengine/openapi-react
- Node.js 14.0 or later
- .NET 8.0 or later runtime (Download)
If you installed the package with npm install, add a script to your package.json:
`json`
{
"scripts": {
"generate:api": "metaengine-openapi-react api.yaml ./src/api --tanstack-query --documentation"
}
}
Then run:
`bash`
npm run generate:api
Use npx for trying out the tool or in CI/CD pipelines:
`bashRecommended (with documentation and TanStack Query)
npx @metaengine/openapi-react api.yaml ./src/api \
--tanstack-query \
--documentation
Note: When the package is installed locally,
will use that version instead of downloading a new one.$3
Configure your base URL via environment variables. The generator creates an
api-config.ts file that reads from the appropriate variable:Vite (prefix:
VITE_):
`bash
.env
VITE_API_URL=http://localhost:3000/api
`Next.js (prefix:
):
`bash
.env
NEXT_PUBLIC_API_URL=http://localhost:3000/api
`Create React App (prefix:
):
`bash
.env
REACT_APP_API_BASE_URL=http://localhost:3000/api
`CLI Options
| Option | Description | Default |
|--------|-------------|---------|
|
| Filter by OpenAPI tags (comma-separated, case-insensitive) | - |
| --base-url-env | Environment variable name for base URL | REACT_APP_API_BASE_URL |
| --service-suffix | Service naming suffix | Api |
| --options-threshold | Parameter count for options object | 4 |
| --documentation | Generate JSDoc comments | false |
| --tanstack-query | Enable TanStack Query integration | false |
| --strict-validation | Enable strict OpenAPI validation | false |
| --date-transformation | Convert date strings in responses to Date objects | false |
| --clean | Clean output directory (remove files not in generation) | false |
| --verbose | Enable verbose logging | false |
| --help, -h | Show help message | - |Usage Examples
$3
`typescript
import { usersApi } from './api/users-api';// Fetch users
const users = await usersApi.getUsers();
// Create a user
const newUser = await usersApi.createUser({ name: 'John', email: 'john@example.com' });
`$3
typescript
import { useGetUsers, useCreateUser } from './api/users-api';function UserList() {
const { data: users, isLoading, error } = useGetUsers();
const createUser = useCreateUser();
if (isLoading) return
Loading...;
if (error) return Error: {error.message}; return (
{users?.map(u => {u.name})}
);
}
`$3
bash
Users microservice
npx @metaengine/openapi-react users-api.yaml ./src/api/users \
--base-url-env VITE_USERS_API_URL \
--tanstack-queryOrders microservice
npx @metaengine/openapi-react orders-api.yaml ./src/api/orders \
--base-url-env VITE_ORDERS_API_URL \
--tanstack-query
`Then configure in
:
`bash
VITE_USERS_API_URL=http://localhost:3001/api
VITE_ORDERS_API_URL=http://localhost:3002/api
``MIT
For issues and feature requests, please visit:
https://github.com/meta-engine/openapi-react/issues