Skip to main content
Version: 2.x

Overview

OpenAPI Qraft is a powerful library for creating type-safe API Hooks in React applications from OpenAPI Documents. Built on top of TanStack Query v5, it implements an intelligent Proxy-based API client design that generates custom hooks with strict typing.

Features​

  • Type-safe API Requests: Leverage TypeScript for type-safe API requests, minimizing runtime errors and enhancing developer experience.
  • Modular Design: Customize the library using callbacks to handle API calls according to your project's specific requirements.
  • Integration with TanStack Query v5: Seamless integration with TanStack Query for efficient server state management, caching, and data synchronization.
  • Dynamic Proxy-Based Hooks: Generate React Query hooks for your API endpoints automatically without manual boilerplate code.
  • SSR Support: Full Server-Side Rendering (SSR) support matching the capabilities of TanStack Query, including Next.js /app directory compatibility.

Fast Run​

import { createAPIClient } from './api'; // generated by OpenAPI Qraft

import { requestFn } from '@openapi-qraft/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

// Use `createAPIClient(...)` to initialize the API client as needed.
// It's a lightweight 🪶 shortcut for working with TanStack Query 🌴
const api = createAPIClient({
  requestFn,
  queryClient,
  baseUrl: 'https://petstore3.swagger.io/api/v3',
});

function ExamplePetDetails({ petId }: { petId: number }) {
  // Executes a GET request to retrieve the pet's details:
  // GET /pet/{petId}
  const {
    data: pet,
    isPending,
    error,
  } = qraft.pet.getPetById.useQuery({
    path: { petId }, // ⬅︎ All parameters are type-safe ✨
  });

  if (isPending) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>Pet Name: {pet?.name}</div>;
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ExamplePetDetails petId={123456} />
    </QueryClientProvider>
  );
}

Supported TanStack Query Features​

Hooks​

QueryClient methods​

Qraft Utility Functions​