React Query Codegen from OpenAPI
Tags: reactquery, openapi, codegen, typescript
Published: 2022-06-09 19:50:53


[Rapini](https://github.com/rametta/rapini) is a new tool that can generate custom [React Query](https://react-query.tanstack.com/) hooks using [OpenAPI](https://www.openapis.org/) (Swagger) files.

The Command Line Interface (CLI) tool will take a path to an Open API file and generate a package that includes react hooks, typescript types and [axios](https://axios-http.com/) http requests - and this package is conveniently bundled in a way that it can be published to NPM or any other package registry of your choosing.

No need to manually write axios request functions and react query code to start using your backend endpoints, just generate and import your code to ship features faster.

## How to generate react hooks from Open API files

Using the [rapini](https://github.com/rametta/rapini) CLI, here is an example to generate your react query hooks, axios requests and typescript types from Open API.

```sh
# Install the CLI tool globally (need npm)
npm i -g rapini

# Pass the path to your Open API file to rapini
rapini -p path/to/openapi.yaml
```

And that's it! 1 command to install the CLI globally and 1 command to generate everything you will ever need.

The generated code will be outputted to `rapini-generated-package` folder in your current directory, but that could be changed with a CLI option `--output-dir`, like this: `rapini -p path/to/openapi.yaml --output-dir /my-custom-package`.

There are many CLI options to customize the generated code, including options for:
- specifying the name and package version for the generated package's `package.json` file
- specifying a base url for every request since it may not be included in the OpenAPI files
- specifying `replacers` to customize the route used in the requests incase you may need to modify what's in the OpenAPI file without actually changing the OpenAPI file

All the options can be found on the rapini [readme](https://github.com/rametta/rapini#cli-options).

## Why codegen React-Query with OpenAPI?

Code generation or codegen is a popular way to increase productivity, reduce bugs, and lower the amount of time it takes to ship features quickly.

OpenAPI already provides all the necessary information for writing code automatically, so we don't need to write the code manually anymore. We no longer need to manually write out the Typescript types for every requests payload and response, because they are already specified in the OpenAPI file. No longer do we need to write axios functions for every request, or react query hooks for every axios call.

Every GET request will get it's own React Query custom Query hook, and every non-GET, such as POST/PUT/PATCH/DELETE will get their own custom React Query Mutation hook.

## Why codegen Axios requests with OpenAPI?

[Rapini](https://github.com/rametta/rapini) uses axios as it's main http client because of it's flexibility for request and response interceptors and global configs. Rapini takes an axios instance when initializing and uses that instance for all react query hooks under the hood.

## React Query OpenAPI Codegen Example

Once you generate the custom npm package using [rapini](https://github.com/rametta/rapini), you can start to import all the react query hooks, types, requests and query keys from the package. Let's say you generated your package with output name of `my-package`, like this: `rapini -p path/to/openapi.yaml --output-dir /my-package` then you can start importing like this:

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

const rapini = initialize(axiosInstance);

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

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

  return (
    <ul>
      {data.pets.map((pet) => (
        <li key={pet.id}>{pet.name}</li>
      ))}
    </ul>
  );
};
```

Rapini uses the OpenAPI `operationId` to name all the hooks and requests in the code, so if you have a request with `operationId` like `createPet`, then an axios request will be made called `createPet` and react query mutation hook will be created called `useCreatePet` and a query key will be created called `createPet`, and all relevant request payload will be taken into account.

I hope you enjoy rapini and start deleting old code to replace with new generated code!