0.3.1 • Published 4 months ago

openapi-react-query v0.3.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

openapi-react-query

openapi-react-query is a type-safe tiny wrapper (1 kb) around @tanstack/react-query to work with OpenAPI schema.

It works by using openapi-fetch and openapi-typescript so you get all the following features:

  • ✅ No typos in URLs or params.
  • ✅ All parameters, request bodies, and responses are type-checked and 100% match your schema
  • ✅ No manual typing of your API
  • ✅ Eliminates any types that hide bugs
  • ✅ Eliminates as type overrides that can also hide bugs

Setup

Install this library along with openapi-fetch and openapi-typescript:

npm i openapi-react-query openapi-fetch
npm i -D openapi-typescript typescript

Next, generate TypeScript types from your OpenAPI schema using openapi-typescript:

npx openapi-typescript ./path/to/api/v1.yaml -o ./src/lib/api/v1.d.ts

Usage

Once your types have been generated from your schema, you can create a fetch client, a react-query client and start querying your API.

import createFetchClient from "openapi-fetch";
import createClient from "openapi-react-query";
import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript

const fetchClient = createFetchClient<paths>({
  baseUrl: "https://myapi.dev/v1/",
});
const $api = createClient(fetchClient);

const MyComponent = () => {
  const { data, error, isPending } = $api.useQuery(
    "get",
    "/blogposts/{post_id}",
    {
      params: {
        path: { post_id: 5 },
      },
    }
  );

  if (isPending || !data) return "Loading...";

  if (error) return `An error occurred: ${error.message}`;

  return <div>{data.title}</div>;
};

You can find more information about createFetchClient in the openapi-fetch documentation.

📓 Docs

View Docs

0.2.10

5 months ago

0.3.0

5 months ago

0.2.7

7 months ago

0.2.6

7 months ago

0.2.9

6 months ago

0.2.8

7 months ago

0.3.1

4 months ago

0.2.5

8 months ago

0.2.1

8 months ago

0.2.3

8 months ago

0.2.2

8 months ago

0.2.4

8 months ago

0.2.0

9 months ago

0.1.7

10 months ago

0.1.4

10 months ago

0.1.3

10 months ago

0.1.6

10 months ago

0.1.5

10 months ago

0.1.2

11 months ago

0.1.1

11 months ago

0.1.0

11 months ago

0.0.3

11 months ago

0.0.2

11 months ago

0.0.1

11 months ago

0.0.1-empty

1 year ago