Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
Clean up readme, add link to NPMJS page with badge
  • Loading branch information
seriouslag authored Apr 30, 2024
1 parent c7f76ec commit df87116
Showing 1 changed file with 14 additions and 12 deletions.
26 changes: 14 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@

> Node.js library that generates [React Query (also called TanStack Query)](https://tanstack.com/query) hooks based on an OpenAPI specification file.
[![npm version](https://badge.fury.io/js/%407nohe%2Fopenapi-react-query-codegen.svg)](https://badge.fury.io/js/%407nohe%2Fopenapi-react-query-codegen)

## 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 [@hey-api/openapi-ts](https://github.com/hey-api/openapi-ts)
- Generates custom react hooks that use React Query's `useQuery`, `useSuspenseQuery` and `useMutation` hooks
- Generates query keys and functions for query caching
- Generates pure TypeScript clients generated by [@hey-api/openapi-ts](https://github.com/hey-api/openapi-ts)

## Install
## Installation

```
$ npm install -D @7nohe/openapi-react-query-codegen
Expand Down Expand Up @@ -58,15 +60,15 @@ Options:
-h, --help display help for command
```

## Example Usage
### Example Usage

### Command
#### Command

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

### Output directory structure
#### Output directory structure

```
- openapi
Expand All @@ -81,9 +83,9 @@ $ openapi-rq -i ./petstore.yaml

- [Prefetching docs](https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#prefetching-and-dehydrating-data)

### In your app
#### In your app

#### Using the generated hooks
##### Using the generated hooks

```tsx
// App.tsx
Expand All @@ -102,7 +104,7 @@ function App() {
export default App;
```

#### Using the generated typescript client
##### Using the generated typescript client

```tsx
import { useQuery } from "@tanstack/react-query";
Expand All @@ -125,7 +127,7 @@ function App() {
export default App;
```

#### Using Suspense Hooks
##### Using Suspense Hooks

```tsx
// App.tsx
Expand Down Expand Up @@ -158,7 +160,7 @@ function App() {
export default App;
```

#### Runtime Configuration
##### Runtime Configuration

You can modify the default values used by the generated service calls by modifying the OpenAPI configuration singleton object.

Expand Down

0 comments on commit df87116

Please sign in to comment.