Smart Fetch

Like Axios, but smarter.

smarter-fetch is a TypeScript-first, React-friendly HTTP client hook with built-in features like retry logic, caching, deduplication, and loading/error states.

✨ Features

• ✅ Built-in Retry with exponential backoff
• 🧠 Smart Caching with time-based invalidation
• 🔀 Request Deduplication to prevent duplicate calls
• 💝 Abort Support and timeout control
• 📦 Type-safe with full TypeScript support
• ⚛️ React Hook Integration
• 🔄 Automatic refetch() and manual refresh support
• 📊 Progress Reporting for uploads

📦 Installation

npm install smarter-fetch
# or
yarn add smarter-fetch

🔧 Usage

import { useSmartFetch } from 'smarter-fetch';

const MyComponent = () => {
  const { data, loading, error, refetch, isCached } = useSmartFetch<MyDataType>('https://api.example.com/data');

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

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={refetch}>Refetch</button>
      {isCached && <p>Showing cached data</p>}
    </div>
  );
};

⚙️ Options

All options are passed as the second argument:

useSmartFetch(url, {
  method: 'POST',
  body: { key: 'value' },
  retries: 5,
  cacheTime: 10000, // ms
  dedupingInterval: 2000,
  abortTimeout: 5000, // ms
  headers: { 'Content-Type': 'application/json' },
  validateStatus: (status) => status < 400,
  onUploadProgress: (e) => console.log(e.loaded / e.total),
  transformResponse: (data) => data.items,
});

🔁 Retry Logic

retry: {
  retryCondition: (error) => error.message.includes('timeout'),
  delayMs: 1000,
  backoffFactor: 2,
}

🚫 Skipping Cache

useSmartFetch('/api/data', { skipCache: true });

📤 Upload Progress

useSmartFetch('/upload', {
  method: 'POST',
  body: myFormData,
  onUploadProgress: (event) => console.log(`Progress: ${event.loaded / event.total * 100}%`),
});

🣜 Clearing Cache

const { clearCache } = useSmartFetch('/api/data');

<button onClick={clearCache}>Clear Cache</button>

🧠 Why use smarter-fetch over axios?

• React-first design with useSmartFetch
• No extra setup: deduping and caching work out of the box
• Built-in retry and exponential backoff
• Fully typed and extensible
• Supports upload progress natively

📜 License

MIT License.

🛠 Contributing

Feel free to open issues or PRs — improvements welcome!