swagger-extractor

Extract

• axios functions
• TypeScript types
• ReactQuery hooks

from Swagger json link

Example (files after run npx)

Usage

npx swagger-extractor [options]

Options

--url*

--name

name use for axios file and folders (default is output)

--output

output directory (default is /)

--reactQuery

Generate react-query hooks and keys for each route

--rq

Same as --reactQuery

Usage after run NPX

1. add your base url for your API

axios/configAxios.ts:

/* code */
export const axiosInstance = axios.create({
  baseURL: "BASE_URL",
});
/* code */

2. use this function to set token to axios

axios/configAxios.ts:

/* code */
export const fixAxiosToken = (token: string) => {
  fixAxiosHeader({ Authorization: `Bearer ${token}` });
};
/* code */

Output directory structure (without --reactQuery)

after run:

npx swagger-extractor --url="https://petstore.swagger.io/v2/swagger.json" --name="pet"

create folder and file like this:

axios
│   configAxios.ts
|   petAxios.ts
│
└───models
│   └───pet
│       │   api-response.ts
│       │   category.ts
│       │   index.ts
│       │   order.ts
│       │   pet.ts
│       │   tag.ts
│       │   update-pet-with-form-request.ts
│       │   upload-file-request.ts
│       │   user.ts

With react-query

Usage

add --reactQuery parameter at the end

example:

npx swagger-extractor --url="https://petstore.swagger.io/v2/swagger.json" --name="pet" --reactQuery

after run command these library are needed (beside Axios, Typescript)

| Library | Usage | |-------------------------|------------------------------------------------------------| | @tanstack/react-query | Main library of react-query | | i18next , react-i18next | Library for translation (use for success message template) | | notistack | Library show message (use for success message template) |

install

npm i @tanstack/react-query i18next  react-i18next notistack

config success message

change name variable and add "CREATED_SUCCESSFULLY" key to i18n

/* CODES */
  enqueueSnackbar(t("CREATED_SUCCESSFULLY", { name: t("") }));
/* CODES */

config error message

change function add your message based on response

/* CODES */
 export const onError = (t: TFunction<"translation", undefined>, enqueueSnackbar: EnqueueSnackbar) => (error: any) => {
   enqueueSnackbar(t("Error"), {
     variant: "error",
   });
 };
/* CODES */

Output directory structure (with --reactQuery)

after run:

npx swagger-extractor --url="https://petstore.swagger.io/v2/swagger.json" --name="pet" --reactQuery

create folder and file like this:

axios
│   configAxios.ts
|   petAxios.ts
|   constants.ts
│
└───reactQuery
│   └───pet
|       |   Pet.ts
|       |   Store.ts
|       |   User.ts
|
└───models
│   └───pet
│       │   api-response.ts
│       │   category.ts
│       │   index.ts
│       │   order.ts
│       │   pet.ts
│       │   tag.ts
│       │   update-pet-with-form-request.ts
│       │   upload-file-request.ts
│       │   user.ts

how this library work?

I use openapi-generator-cli and swagger-typescript-api and some node.js code to create this library