Installation

npm install openapi-query openapi-fetch @tanstack/react-query

Setup

Generate TypeScript types from your OpenAPI schema using openapi-typescript:

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

Create your client:

import createFetchClient from "openapi-fetch";
import createQueryClient from "openapi-query";
import type { paths } from "./api.d.ts";

const $fetch = createFetchClient<paths>({
  baseUrl: "https://api.example.com",
});

const $query = createQueryClient($fetch);

Usage

Queries

Use queryOptions() to get a type-safe object ready for useQuery:

import { useQuery } from "@tanstack/react-query";

const { data, error } = useQuery(
  $query.queryOptions("get", "/blogposts/{post_id}", {
    params: { path: { post_id: "123" } },
  }),
);

Both data and error are fully typed from your OpenAPI schema.

Query Keys

Use queryKey() for cache operations. Keys are structured as [method, path, options] and carry type information via TanStack Query's DataTag.

// Read cached data (typed!)
const cached = queryClient.getQueryData($query.queryKey("get", "/blogposts"));

// Invalidate queries
queryClient.invalidateQueries({
  queryKey: $query.queryKey("get", "/blogposts"),
});

Infinite Queries

import { useInfiniteQuery } from "@tanstack/react-query";

const { data } = useInfiniteQuery({
  ...$query.infiniteQueryOptions("get", "/blogposts", {
    params: { query: { tags: ["news"] } },
  }),
  getNextPageParam: (lastPage) => lastPage.nextCursor,
  initialPageParam: 0,
});

Mutations

import { useMutation } from "@tanstack/react-query";

const { mutate } = useMutation($query.mutationOptions("put", "/tag/{name}"));

mutate({
  params: { path: { name: "my-tag" } },
  body: { description: "A new tag" },
});

API

License

MIT