🔥 Hyper Fetch Firebase

📖 About

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.

🎯 Key Capabilities

• 🔥 Same API for Firebase — Use createRequest / .send() for Firestore and Realtime Database, just like REST
• 🔮 Typed CRUD — getDoc, addDoc, updateDoc, deleteDoc with full TypeScript types on every field
• 📡 Realtime subscriptions — Listen to document and collection changes with typed data flowing in
• ⚛️ React hooks for Firebase — useFetch and useSubmit work with Firebase operations — same patterns, different backend
• 💾 Cache and offline support — HyperFetch's caching and offline queue work with Firebase out of the box

🚀 Quick Start

npm install @hyper-fetch/core @hyper-fetch/firebase firebase

import { 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));

📚 Documentation

• Firebase Adapter Docs
• Getting Started
• API Reference

💡 Examples

Read a document

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);

Write a document

const createUser = client.createRequest<{
  payload: { name: string; email: string };
  response: null;
}>()({
  endpoint: "/users",
  method: "addDoc",
});

await createUser.send({ data: { name: "Jane", email: "[email protected]" } });

List documents

const listUsers = client.createRequest<{ response: User[] }>()({
  endpoint: "/users",
  method: "getDocs",
});

const { data: users } = await listUsers.send();
users.forEach((user) => console.log(user.name));

Use with React hooks

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>;
};

License

MIT