fetchquack

🌐 Universal

Works on Browser, Node.js, Bun, and Deno with zero configuration

🌊 Streaming

First-class support for streaming responses (text and binary)

📡 Server-Sent Events

Full SSE spec support with auto-reconnect and Last-Event-ID

⏳ Progress Tracking

Upload and download progress monitoring on all platforms

🔄 Interceptors

Powerful middleware system (auth, logging, retry, etc.)

🅰️ Angular 17+ Integration

RxJS Observable wrapper with injection context support

🔒 Type-Safe

Complete TypeScript definitions with generics

📦 Zero Dependencies

No runtime dependencies, just the Fetch API

🪶 Lightweight

~4KB minified + gzipped (browser bundle)

Install

npm install fetchquack

Quick Examples

Basic Request

import { HttpClient } from 'fetchquack';

const client = new HttpClient();

// Simple, typed requests
const user = await client.fetch<User>({
  method: 'GET',
  url: '/api/users/1'
});

console.log(user.name);

AI Streaming

import { HttpClient } from 'fetchquack';

const client = new HttpClient();

// Stream AI responses chunk by chunk
const controller = new AbortController();
let response = '';

client.fetchStream({
  method: 'POST',
  url: '/api/ai/chat',
  body: { prompt: 'Explain HTTP streaming' },
  decodeToString: true,
  signal: controller.signal,
  onData: (chunk) => {
    response += chunk;
    updateUI(response); // Real-time updates
  },
  onComplete: () => console.log('Done')
});

// Cancel at any time
// controller.abort();

Server-Sent Events

import { HttpClient } from 'fetchquack';

const client = new HttpClient();

// SSE with auto-reconnect
const controller = new AbortController();

client.sse({
  method: 'GET',
  url: '/api/events',
  autoReconnect: true,
  parseJson: true,
  signal: controller.signal,
  onEvent: (event) => {
    console.log(event.data);
  }
});

// Close the connection
// controller.abort();

Progress Tracking

import { HttpClient } from 'fetchquack';

const client = new HttpClient();

// Monitor upload progress
await client.fetch({
  method: 'POST',
  url: '/api/upload',
  body: file,
  onUploadProgress: (progress) => {
    progressBar.style.width = `${progress.percentage}%`;
  }
});

// Monitor download progress
await client.fetch({
  method: 'GET',
  url: '/api/download',
  onDownloadProgress: (progress) => {
    progressBar.style.width = `${progress.percentage}%`;
  }
});

Angular

import { NgxHttpClient } from "fetchquack/ngx";

// Angular with RxJS
@Component({...})
export class ChatComponent {

  private http = inject(NgxHttpClient);
  response = signal('');

  streamChat(prompt: string) {
    this.http.fetchStream({
      method: 'POST',
      url: '/api/ai/chat',
      body: { prompt },
      decodeToString: true
    }).pipe(
      takeUntilDestroyed()
    ).subscribe(chunk => {
      this.response.update(r => r + chunk);
    });
  }
}

Read the Docs →