Type-safe Firebase/Firestore client built on HyperFetch. CRUD, realtime listeners, auth — all typed.
This adapter brings HyperFetch's typed request system to Firebase. Use the same createRequest / .send() patterns for
Firestore and Realtime Database operations with typed responses, caching, queuing, and React hooks — the same API you
use for REST.
- 🔥 Same API for Firebase — Use
createRequest/.send()for Firestore and Realtime Database, just like REST - 🔮 Typed CRUD —
getDoc,addDoc,updateDoc,deleteDocwith full TypeScript types on every field - 📡 Realtime subscriptions — Listen to document and collection changes with typed data flowing in
- ⚛️ React hooks for Firebase —
useFetchanduseSubmitwork with Firebase operations — same patterns, different backend - 💾 Cache and offline support — HyperFetch's caching and offline queue work with Firebase out of the box
npm install @hyper-fetch/core @hyper-fetch/firebase firebaseimport { createClient } from "@hyper-fetch/core";
import { FirebaseAdapter } from "@hyper-fetch/firebase";
import { getFirestore } from "firebase/firestore";
const db = getFirestore();
const client = createClient({ url: "" }).setAdapter(FirebaseAdapter(db));interface User {
id: string;
name: string;
email: string;
}
const getUser = client.createRequest<{ response: User }>()({
endpoint: "/users/:userId",
method: "getDoc",
});
const { data } = await getUser.setParams({ userId: "abc123" }).send();
console.log(data.name, data.email);const createUser = client.createRequest<{
payload: { name: string; email: string };
response: null;
}>()({
endpoint: "/users",
method: "addDoc",
});
await createUser.send({ data: { name: "Jane", email: "jane@example.com" } });const listUsers = client.createRequest<{ response: User[] }>()({
endpoint: "/users",
method: "getDocs",
});
const { data: users } = await listUsers.send();
users.forEach((user) => console.log(user.name));import { useFetch } from "@hyper-fetch/react";
const UserProfile = ({ userId }: { userId: string }) => {
const { data, loading } = useFetch(getUser.setParams({ userId }));
if (loading) return <p>Loading...</p>;
return <h1>{data?.name}</h1>;
};