📦 universal-fetcher

universal-fetcher is a lightweight TypeScript-based NPM package that simplifies API interactions by providing a unified way to fetch and update data. It helps developers streamline HTTP requests with a consistent and modular approach, reducing repetitive code and improving maintainability.

✨ Features

• 📡 Consistent API for data fetching (GET).
• 🔄 Simplified data updating (POST, PUT, etc.).
• 🔍 Dynamic data fetching with URL parameters.
• ✅ Built-in error handling.
• 🔧 TypeScript support for type-safe development.

📦 Installation

Install the package using npm:

npm install universal-fetcher

Or with yarn:

yarn add universal-fetcher

🚀 Usage

1. Create an API Registry

Define an API registry to map component names to their respective endpoints.

registry.ts

export const API_REGISTRY: Record<string, string> = {
    students: "http://localhost:3000/api/fetch/data?component=students",
    teachers: "http://localhost:3000/api/fetch/data?component=teachers",
    dynamicData: "http://localhost:3000/api/fetch/data?component=",
    dummy: "https://jsonplaceholder.typicode.com/todos/1",
};

2. Extend the Base Class

Create a data.ts file that extends the Base class from universal-fetcher to customize your API calls.

data.ts

import { API_REGISTRY } from "./registry";
import { Base } from "universal-fetcher";

export class Data extends Base {
  // Fetch data for a specific component
  async fetchData(component: string) {
    const url = API_REGISTRY[component];
    if (!url) {
      return { error: "Component not found in registry" };
    }
    return await this.fetchFromAPI(url);
  }

  // Update data for a specific component
  async updateData(component: string, changes: string) {
    const url = API_REGISTRY[component];
    if (!url) {
      return { error: "Component not found in registry" };
    }
    return await this.updateAPIData(url, changes);
  }

  // Fetch data dynamically based on URL parameters
  async fetchComponent(component: string, data: string) {
    const url = API_REGISTRY[component];
    if (!url) {
      return { error: "Component not found in registry" };
    }
    return await this.fetchDataDynamic(url, data);
  }
}

3. Fetch Data in Your Application

Example: Fetch student data

import { Data } from "./data";

const data = new Data();

async function loadStudents() {
  const students = await data.fetchData("students");
  console.log(students);
}

loadStudents();

Example: Update data

async function updateTeacher() {
  const result = await data.updateData("teachers", JSON.stringify({ name: "John Doe" }));
  console.log(result);
}

updateTeacher();

Example: Fetch dynamic data

async function loadDynamicData() {
  const dynamic = await data.fetchComponent("dynamicData", "courses");
  console.log(dynamic);
}

loadDynamicData();

📚 API Reference

🟢 fetchFromAPI(url: string)

• Description: Fetches data from a specified URL.
• Parameters:
  url — The API endpoint.
• Returns: JSON response or error.

🟢 fetchDataDynamic(url: string, component: string)

• Description: Fetches data dynamically based on component and URL.
• Parameters:
  url — Base URL.
  component — Endpoint parameter.
• Returns: JSON response or error.

🟢 updateAPIData(url: string, changes: string)

• Description: Updates data on the server.
• Parameters:
  url — API endpoint.
  changes — JSON string of data to update.
• Returns: JSON response or error.

🎯 Why Use universal-fetcher?

1. Unified API Calls: Consistent way to fetch and update data.
2. Code Reusability: Reduces boilerplate code for API interactions.
3. Type Safety: Ensures type-safe API calls with TypeScript.
4. Error Handling: Handles HTTP errors gracefully.

🛠️ Development Setup

1. Clone the repository

   git clone https://github.com/your-username/universal-fetcher.git
   cd universal-fetcher

2. Install dependencies

   npm install

3. Build the package

   npm run build

4. Run tests

   npm run test