TLDR: You can find the plugin on NPM https://www.npmjs.com/package/fetchff and Github: https://github.com/MattCCC/fetchff

Hey there, fellow developers! 🌟 If you’re like me, you know that managing HTTP requests can sometimes feel like navigating a maze. That’s where fetchff comes in to save the day! With the release of version v3, this nifty npm plugin has rolled out some fantastic new features and improvements that are sure to make your life easier. So, grab a coffee (or your beverage of choice) and let’s dive into it!

🌟 What is fetchff?

fetchff is a powerful and flexible npm plugin designed to enhance the native fetch API in JavaScript. It simplifies the process of making HTTP requests by providing advanced features such as:

Automatic Response Handling: Seamlessly transforms JSON responses based on the Content-Type, reducing the need for manual parsing.
Request Cancellation: Easily cancels ongoing requests, improving user experience by avoiding unnecessary network calls.
Retry Mechanisms: Configurable retry options allow developers to handle transient errors gracefully, enhancing the reliability of their applications.
Declarative API Management: With the createApiFetcher() function, you can manage multiple API endpoints with minimal boilerplate code, making it easier to maintain and scale your codebase.
First class TypeScript Support: Provides enhanced typings for better development experience and type safety.

🌟 How does it differ from 1500 similar plugins?

Let's take some of widely known plugins as example.

🌟 What’s New in fetchff?

1. Goodbye, Stale Requests! Hello, Improved Cancellation!

One of the biggest headaches for developers is managing ongoing requests, especially when users navigate away or when new requests are triggered. With this release, fetchff now offers improved request cancellation. This means you can easily cancel requests that are no longer needed, keeping your application snappy and efficient. The new settings—cancellable and rejectCancelled—make this process smoother than ever!

2. Automatic Response Transformation? Yes, Please!

Let’s face it: parsing JSON responses can be a drag. But fear not! fetchff v3.0.1 automatically transforms response data into JSON if the Content-Type is set to application/json. This little magic trick reduces boilerplate code and lets you focus on what really matters: building awesome features.

3. Custom Fetcher Functions: Tailor-Made for You!**

Every project is unique, and fetchff understands that. Now, you can create custom fetcher functions that fit your specific needs. Whether it’s handling authentication or logging errors, you have the power to make fetchff work just the way you want it!

4. Polling Made Easy

Need real-time updates? No problem! fetchff now supports polling out of the box. This feature lets you effortlessly implement functionality that requires frequent updates without overwhelming your server. Your users will thank you for it!

5. TypeScript Just Got Better!

For my fellow TypeScript lovers out there, this update brings significant improvements in typings. Enjoy enhanced type safety for your requests and responses, making it easier to catch those pesky bugs during development.

🛠️ Why Should You Choose fetchff?

You might be asking yourself: “Why should I give fetchff a try?” Here are some great reasons:

Simplicity - It’s designed to be easy to use, helping you avoid the complexity of managing HTTP requests.
Flexibility - With custom fetcher functions and cancellation options, it adapts to your specific use cases effortlessly.
Performance - fetchff optimizes network requests, ensuring your application runs smoothly without unnecessary calls.
Community Spirit - The fetchff community is vibrant and welcoming, ready to support you in your journey.

📦 Getting Started is a Breeze!

Ready to jump in? Installing fetchff is super simple! Just run the following command in your terminal:

Using NPM:

npm install fetchff

Standalone Usage

You can use fetchf() as a functional wrapper for fetch(). It seamlessly enhances it with additional settings like the retry mechanism and error handling improvements. The fetchf() function can be used directly, simplifying usage and making it easier to integrate with functional programming styles. It makes requests independently of createApiFetcher() settings.

import { fetchf } from 'fetchff';

const { data, error } = await fetchf('/api/user-details', {
  timeout: 5000,
  cancellable: true,
  retry: { retries: 3, delay: 2000 },
  // Specify some other settings here... The fetch() settings work as well...
});

Multiple API Endpoints

To manage multiple API endpoints, you can use createApiFetcher(). It is a powerful factory function for creating API fetchers with advanced features. This function provides a convenient way to configure and manage multiple API endpoints using a declarative approach, offering integration with retry mechanisms and error handling improvements.

import { createApiFetcher } from 'fetchff';

// Create some endpoints declaratively
const api = createApiFetcher({
  baseURL: 'https://example.com/api',
  endpoints: {
    getUser: {
      url: '/user-details/:id/',
      method: 'GET',
      // Each endpoint accepts all settings declaratively
      retry: { retries: 3, delay: 2000 },
      timeout: 5000,
      cancellable: true,
    },
    // Define more endpoints as needed
  },
  // You can set all settings globally
  strategy: 'softFail', // no try/catch required in case of errors
});

// Make a GET request to http://example.com/api/user-details/2/?rating[]=1&rating[]=2
const { data, error } = await api.getUser({
  params: { rating: [1, 2] }, // Passed arrays, objects, etc. will be parsed automatically
  urlPathParams: { id: 2 }, // Replace :id with 2 in the URL
});

Let me know what you think about the plugin in the comments, cheers!

You can find the plugin on Github: https://github.com/MattCCC/fetchff