swagger-extractor

Extract

- axios functions
- TypeScript types
- ReactQuery hooks

from Swagger json link

!NPM Downloads
!GitHub License
!GitHub last commit
!NPM Version

$3

Usage

npx swagger-extractor [options]

$3

Option	Description
--url*	url path to swagger json
--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:

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

#### 2. use this function to set token to axios

axios/configAxios.ts:

`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

`ts
/ CODES /
enqueueSnackbar(t("CREATED_SUCCESSFULLY", { name: t("") }));
/ CODES /
`
#### config error message
change function add your message based on response

`ts
/ 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