Fynk is an ultra-high-performance reactive HTTP client featuring automatic request deduplication, integrated caching, optimistic updates, and SSE live patch. It delivers 1,700x faster performance than traditional HTTP clients while maintaining perfect data consistency.

• ⚡ Performance First: 0.04ms response time with intelligent cache-scheduler integration
• 🔄 Zero Config Dedup: Automatic request deduplication prevents redundant network calls
• 🎯 Framework Agnostic: Works seamlessly with React 19 and Vue 3
• 📦 Tiny Bundle: Minimal footprint with maximum performance

npm i fynk
# or
yarn add fynk
# or
pnpm add fynk

import { createClient, fetchAdapter } from "fynk";

// Create high-performance client
const client = createClient({
  adapter: fetchAdapter("https://api.example.com"),
});

// Define your data models for normalized caching
type User = { id: number; name: string; email: string };
const UserModel = client.defineModel<User>({
  key: "user",
  id: (u) => u.id,
});

// These 3 concurrent calls automatically become 1 network request!
const [user1, user2, user3] = await Promise.all([
  client.get<User>("/users/1"), // → Network call
  client.get<User>("/users/1"), // → Waits for above
  client.get<User>("/users/1"), // → Waits for above
]);
// Result: All 3 get the same data, but only 1 HTTP request! ⚡

import { useQuery, useMutation } from "fynk/react";

function UserProfile({ userId }: { userId: number }) {
  // Automatic deduplication + caching
  const { data, pending, error, refetch } = useQuery<User>(client, {
    key: ["user", userId],
    request: () => client.get<User>(`/users/${userId}`),
    model: UserModel, // Enables normalized caching
  });

  // Optimistic updates for instant UX
  const { mutate } = useMutation<{ name: string }, User>(client, {
    request: (vars) => client.post<User>("/users", { body: vars }),
    optimistic: (draft, vars) => {
      // UI updates instantly, rolls back if request fails
      draft.insert(UserModel, { id: -1, name: vars.name, email: "" });
    },
  });

  if (pending) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{data?.name}</h1>
      <button onClick={() => mutate({ name: "New Name" })}>Update Name</button>
    </div>
  );
}

<script setup lang="ts">
import { useQuery, useMutation } from "fynk/vue";

const { data, pending, error, refetch } = useQuery<User>(client, {
  key: ["user", 1],
  request: () => client.get<User>("/users/1"),
  model: UserModel,
});

const { mutate, pending: saving } = useMutation(client, {
  request: (vars) => client.post("/users", { body: vars }),
  optimistic: (draft, vars) => draft.insert(UserModel, vars),
});
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">Error occurred</div>
  <div v-else>
    <h1>{{ data?.name }}</h1>
    <button @click="mutate({ name: 'Updated' })" :disabled="saving">
      Update
    </button>
  </div>
</template>

Fynk delivers unprecedented performance compared to other HTTP clients:

Benchmark: 10 concurrent identical requests to same endpoint

npm run bench  # Run performance comparison

• ⚡ 0.04ms Response Time — Integrated cache-scheduler with sync cache lookup
• 🔄 Auto Request Deduplication — Concurrent requests automatically collapse into one
• 📊 HTTP/2 Optimization — Keep-alive connections with minimal overhead
• 🎯 Smart Caching — Entity-based normalized cache prevents data duplication

• 🧩 Framework Bridges — Identical API for fynk/react and fynk/vue
• 🎨 Optimistic Updates — Built-in draft API for instant UX with rollback
• 🔌 Axios-Style Interceptors — Familiar request/response chain with hooks
• 📡 Live Sync (SSE) — Real-time cache updates via Server-Sent Events

Fynk outperforms all major HTTP clients by delivering sub-millisecond response times through:

• Integrated Cache-Scheduler: Sync cache checks eliminate async overhead
• Smart Deduplication: Automatically prevents redundant requests
• HTTP/2 Optimized: Keep-alive connections with minimal network overhead

// Just works - no setup needed for deduplication & caching
const { data, pending, error } = useQuery(client, {
  key: ["user", userId],
  request: () => client.get(`/users/${userId}`),
});

// Multiple components requesting same data? Only 1 network call! ⚡

Fynk is designed for modern apps that demand both blazing performance and effortless data consistency.

// Automatically sync cache with server-sent events
client.eventSync.on("user:updated", (userData) => {
  client.normalize(UserModel, userData);
  // UI automatically updates across all components! 🎯
});

// Axios-style interceptors
client.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

client.interceptors.response.use((response) => {
  console.log("Response received:", response);
  return response;
});

// Monitor cache performance
console.log(`Cache size: ${client.scheduler.getCacheSize?.()} entries`);

// Clear cache when needed
client.scheduler.clearCache?.();

Run the included benchmark to see the performance difference:

git clone https://github.com/ljlm0402/fynk.git
cd fynk
npm install
npm run bench

Example output:

🚀 HTTP Client Performance Benchmark

📊 Results:
┌─────────┬────────────────────┬──────────────────────┬───────────────┐
│ (index) │ label              │ duration             │ calls         │
├─────────┼────────────────────┼──────────────────────┼───────────────┤
│ 0       │ 'fynk (optimized)' │ 0.043ms             │ cache+dedup   │
│ 1       │ 'alova (cached)'   │ 6.253ms             │ cache≈1       │
│ 2       │ 'fynk (basic)'     │ 68.600ms            │ dedup≈1       │
│ 3       │ 'alova'            │ 81.183ms            │ 10            │
│ 4       │ 'axios'            │ 136.828ms           │ 10            │
└─────────┴────────────────────┴──────────────────────┴───────────────┘

We welcome contributions! Please see our Contributing Guide for details.

MIT © Fynk Team