React Query Codegen from OpenAPI

#reactquery #openapi #codegen #typescript

Rapini is a new tool that can generate custom React Query hooks using OpenAPI (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 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 CLI, here is an example to generate your react query hooks, axios requests and typescript types from Open API.

# 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.

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 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, 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:

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!