# @seriouslag/openapi-react-query-codegen

> OpenAPI React Query Codegen

Latest version **0.3.5** (published 2023-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @seriouslag/openapi-react-query-codegen
pnpm add @seriouslag/openapi-react-query-codegen
yarn add @seriouslag/openapi-react-query-codegen
bun add @seriouslag/openapi-react-query-codegen
```

Provides the command `openapi-rq`.

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.3.5 |
| Published | 2023-04-13 |
| First published | 2023-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 429 |
| Author | Daiki Urata |
| Maintainers | seriouslag |
| Keywords | codegen, react-query, react, openapi, swagger, typescript, openapi-typescript-codegen |

## Links

- npm: https://www.npmjs.com/package/@seriouslag/openapi-react-query-codegen
- Repository: https://github.com/7nohe/openapi-react-query-codegen
- Issues: https://github.com/7nohe/openapi-react-query-codegen/issues
- npm.io page: https://npm.io/package/@seriouslag/openapi-react-query-codegen

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.5 (latest) — 2023-04-13
- 1.0.7-1713579695.0 (next) — 2024-04-20
- 1.0.7-1713578954.0 — 2024-04-20
- 0.3.3 — 2023-03-27
- 0.3.2 — 2023-03-27
- 0.3.1 — 2023-03-27
- 0.3.0 — 2023-03-27

## README

# OpenAPI React Query Codegen

> Node.js library that generates [React Query (also called TanStack Query)](https://tanstack.com/query) hooks based on an OpenAPI specification file.

## Features

- Supports generation of custom react hooks that use React Query's `useQuery` and `useMutation` hooks
- Supports generation of query keys for query caching
- Supports the option to use pure TypeScript clients generated by [OpenAPI Typescript Codegen](https://github.com/ferdikoomen/openapi-typescript-codegen)

## Install

```
$ npm install -D @seriouslag/openapi-react-query-codegen
```

## Usage

```
$ openapi-rq --help

Usage: openapi-rq [options]

Generate React Query code based on OpenAPI

Options:
  -V, --version              output the version number
  -i, --input <value>        OpenAPI specification, can be a path, url or string content (required)
  -o, --output <value>       Output directory (default: "openapi")
  -c, --client <value>       HTTP client to generate [fetch, xhr, node, axios, angular] (default: "fetch")
  --useUnionTypes            Use union types (default: false)
  --exportSchemas <value>    Write schemas to disk (default: false)
  --indent <value>           Indentation options [4, 2, tabs] (default: "4")
  --postfixServices <value>  Service name postfix (default: "Service")
  --postfixModels <value>    Modal name postfix
  --request <value>          Path to custom request file
  -h, --help                 display help for command
```

## Example Usage

### Command

```
$ openapi-rq -i ./petstore.yaml
```

### Output directory structure

```
- openapi
  - queries
    - index.ts <- custom react hooks
  - requests <- output code generated by OpenAPI Typescript Codegen
```

### In your app

```tsx
// App.tsx
import {
  usePetServiceFindPetsByStatus,
} from "../openapi/queries";
function App() {
  const { data } = usePetServiceFindPetsByStatus({ status: ["available"] });

  return (
    <div className="App">
      <h1>Pet List</h1>
      <ul>
        {data?.map((pet) => (
          <li key={pet.id}>{pet.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
```

You can also use pure TS clients.

```tsx
import { useQuery } from "@tanstack/react-query";
import { PetService } from '../openapi/requests/services/PetService';
import {
  usePetServiceFindPetsByStatusKey,
} from "../openapi/queries";

function App() {
  // You can still use the auto-generated query key
  const { data } = useQuery([usePetServiceFindPetsByStatusKey], () => {
    // Do something here
    
    return PetService.findPetsByStatus(['available']);
  });

  return (
    <div className="App">
      {/* .... */}
    </div>
  );
}

export default App;
```

## License
MIT

---
_Source: https://npm.io/package/@seriouslag/openapi-react-query-codegen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._