swr-openapi

Generate typed SWR hooks and client types from OpenAPI schemas.

1|Updated Mar 9, 2026

Search Tags:#typescript #react #openapi #hooks #swr #api-client #data-fetching

Ready to run

npx skills add https://github.com/prescottprue/agent-skills --skill swr-openapi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: swr-openapi
Source: https://github.com/prescottprue/agent-skills/tree/main/skills/swr-openapi
Command: npx skills add https://github.com/prescottprue/agent-skills --skill swr-openapi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

OpenAPI-based React data fetching with type-safe SWR hooks simplifies building robust client code.

Core Features & Use Cases

Generate typed hooks and types from OpenAPI schemas using openapi-fetch and openapi-typescript.
Support multiple API clients with distinct prefixes for clean cache separation.
Provide end-to-end guidance for setup, usage, and patterns like pagination and mutation in React components.

Quick Start

Install the packages, generate types with openapi-typescript, then create a client and export typed hooks for your API.

Frequently Asked Questions about swr-openapi

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate type-safe SWR hooks from an OpenAPI schema in React?▼

You generate type-safe SWR hooks from an OpenAPI schema by using openapi-typescript to create client types, then using openapi-fetch to build a client and export typed hooks for your React components. This provides end-to-end type safety for data fetching.

Can I use multiple API clients with SWR while keeping their caches separate?▼

Yes, you can support multiple API clients with distinct prefixes to ensure clean cache separation when fetching data from different OpenAPI-defined endpoints using SWR hooks in your React application.

What is the best way to handle pagination and mutation with OpenAPI-generated React hooks?▼

The best way to handle pagination and mutation with OpenAPI-generated React hooks is to apply documented SWR patterns directly to your React components, utilizing the generated typed hooks to manage caching and data synchronization strategies.

Does this approach to React data fetching work without external state management libraries?▼

Yes, this approach to React data fetching works without external state management libraries by leveraging SWR's built-in caching and mutation strategies to manage server state directly within your React components via generated hooks.

Why use openapi-typescript and openapi-fetch for React data fetching instead of manually typing API responses?▼

Using openapi-typescript and openapi-fetch for React data fetching eliminates manual typing errors by automatically generating client types and typed SWR hooks directly from your OpenAPI schemas, ensuring your React components remain robust and type-safe.

What setup is required to start fetching data with typed SWR hooks from OpenAPI?▼

The required setup to start fetching data with typed SWR hooks involves installing the necessary packages, generating TypeScript types from your OpenAPI schema, creating an API client, and exporting the typed hooks for use in your React components.