React Question Codegen from OpenAPI

Rapini is a brand new device that may generate {custom} React Question hooks utilizing OpenAPI (Swagger) information.

The Command Line Interface (CLI) device will take a path to an Open API file and generate a package deal that features react hooks, typescript varieties and axios http requests – and this package deal is conveniently bundled in a approach that it may be printed to NPM or another package deal registry of your selecting.

No have to manually write axios request capabilities and react question code to begin utilizing your backend endpoints, simply generate and import your code to ship options quicker.

How one can generate react hooks from Open API information

Utilizing the rapini CLI, right here is an instance to generate your react question hooks, axios requests and typescript varieties from Open API.

# Set up the CLI device globally (want npm)
npm i -g rapini

# Move the trail to your Open API file to rapini
rapini -p path/to/openapi.yaml

And that is it! 1 command to put in the CLI globally and 1 command to generate the whole lot you’ll ever want.

The generated code can be outputted to rapini-generated-package folder in your present listing, however that may very well be modified with a CLI choice --output-dir, like this: rapini -p path/to/openapi.yaml --output-dir /my-custom-package.

There are various CLI choices to customise the generated code, together with choices for:

• specifying the identify and package deal model for the generated package deal’s package deal.json file
• specifying a base url for each request because it might not be included within the OpenAPI information
• specifying replacers to customise the route used within the requests incase it’s possible you’ll want to change what’s within the OpenAPI file with out truly altering the OpenAPI file

All of the choices will be discovered on the rapini readme.

Why codegen React-Question with OpenAPI?

Code technology or codegen is a well-liked approach to enhance productiveness, scale back bugs, and decrease the period of time it takes to ship options shortly.

OpenAPI already gives all the required info for writing code mechanically, so we needn’t write the code manually anymore. We now not have to manually write out the Typescript varieties for each requests payload and response, as a result of they’re already specified within the OpenAPI file. Not do we have to write axios capabilities for each request, or react question hooks for each axios name.

Each GET request will get it is personal React Question {custom} Question hook, and each non-GET, equivalent to POST/PUT/PATCH/DELETE will get their very own {custom} React Question Mutation hook.

Why codegen Axios requests with OpenAPI?

Rapini makes use of axios because it’s major http consumer due to it is flexibility for request and response interceptors and world configs. Rapini takes an axios occasion when initializing and makes use of that occasion for all react question hooks beneath the hood.

React Question OpenAPI Codegen Instance

When you generate the {custom} npm package deal utilizing rapini, you can begin to import all of the react question hooks, varieties, requests and question keys from the package deal. As an instance you generated your package deal with output identify of my-package, like this: rapini -p path/to/openapi.yaml --output-dir /my-package then you can begin importing like this:

import { initialize } from "my-package";
import kind { Pet } from "my-package";
import { axiosInstance } from "./your-custom-axios-instance";

const rapini = initialize(axiosInstance);

const { queries, mutations, queryIds, requests } = rapini;

const MyComponent = () => {
  const { information, isLoading, isError } = queries.usePets();

  return (
    <ul>
      {information.pets.map((pet) => (
        <li key={pet.id}>{pet.identify}</li>
      ))}
    </ul>
  );
};

Rapini makes use of the OpenAPI operationId to call all of the hooks and requests within the code, so you probably have a request with operationId like createPet, then an axios request can be made referred to as createPet and react question mutation hook can be created referred to as useCreatePet and a question key can be created referred to as createPet, and all related request payload can be taken into consideration.

I hope you take pleasure in rapini and begin deleting outdated code to interchange with new generated code!