Hyper Fetch

One SDK. Any API. Fully typed.

The type-safe API layer for TypeScript apps. Connect to REST, GraphQL, Firebase, WebSockets, SSE — all with one consistent interface and the best type safety in the ecosystem.

Documentation | Quick Start | Guides

Quick Start

Define requests manually

import { createClient } from "@hyper-fetch/core";

// Create a client — this is the single entry point for all your API calls
const client = createClient({ url: "https://api.example.com" });

// Define a typed request — response shape is inferred everywhere from here
const getUsers = client.createRequest<{ response: { id: number; name: string }[] }>()({
  endpoint: "/users",
  method: "GET",
});

// Send it — data, error, and status are fully typed
const { data, error, status } = await getUsers.send();

Or generate from OpenAPI

npx @hyper-fetch/cli generate --url https://api.example.com/openapi.json

import { sdk } from "./generated";

// Every endpoint from your schema is available as a typed method
const { data } = await sdk.users.list.send();

Why HyperFetch?

• 🔮 Zero guesswork — End-to-end TypeScript types from schema to response, full autocompletion, zero any
• 📡 One interface for everything — REST, GraphQL, Firebase, WebSockets, SSE — stop learning a new library for each API
• 💾 Data management built in — Caching, queuing, offline support, retries, and deduplication out of the box
• ⚡ Works everywhere — React, Next.js, Remix, Astro, Node.js, Bun — same API, every environment

<a href="https://github.com/sponsors/prc5?tier=Platinum">



        <img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/assets/Platinum.png" alt="Platinum sponsor banner"/>



</a>







<a href="https://github.com/sponsors/prc5?tier=Platinum">



        <img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/platinum/sponsorkit/sponsors.svg" alt="Platinum sponsors"/>



</a>

Packages

Package	Version	Downloads	Size
@hyper-fetch/core
@hyper-fetch/react
@hyper-fetch/sockets
@hyper-fetch/cli
@hyper-fetch/firebase
@hyper-fetch/firebase-admin
@hyper-fetch/graphql
@hyper-fetch/axios
@hyper-fetch/plugin-devtools

<a href="https://github.com/sponsors/prc5?tier=Gold">



        <img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/assets/Gold.png" alt="Gold sponsor banner"/>



</a>







<a href="https://github.com/sponsors/prc5?tier=Gold">



        <img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/gold/sponsorkit/sponsors.svg" alt="Gold sponsors"/>



</a>

Examples

Fetching data

// Send and destructure — all return values are typed
const { data, error, status } = await getUsers.send();

Mutation with params and payload

// Params go in the URL, data goes in the body — both fully typed
const { data, error, status } = await createUser.send({
  params: { teamId: 1 },
  data: { name: "Jane", email: "jane@example.com" },
});

React hooks

import { useFetch } from "@hyper-fetch/react";

const UserList = () => {
  // useFetch triggers the request on mount and returns typed state
  const { data, loading, error } = useFetch(getUsers);

  if (loading) return 

Loading...

;
  if (error) return 

Error loading users

;
  return <ul>{data?.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
};

Documentation

• Getting Started
• Core Concepts
• React Integration
• CLI & SDK Generation
• API Reference

• Guides

      <img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/assets/Silver.png" alt="Silver sponsor banner"/>
  

      <img width="830" src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/silver/sponsorkit/sponsors.svg" alt="Silver sponsors"/>
  

Our sponsors

<a href="https://github.com/sponsors/prc5">
    <img src="https://raw.githubusercontent.com/prc5/sponsors/main/packages/other/sponsorkit/sponsors.svg?raw=true" alt="Sponsors" />
</a>

License

MIT