api-fetch-lite 🚀

A lightweight API utility for React/JS projects to make GET, POST, PUT, PATCH, DELETE requests in 2–3 lines.

🔹 What is api-fetch-lite?

api-fetch-lite is a super simple wrapper around axios that helps you:

• Make GET, POST, PUT, PATCH, DELETE requests easily
• Automatically handle headers, JSON body, and parsing
• Optionally include auth tokens in headers
• Use a React hook for simple GET requests

It's perfect for React, Node.js, or any JS/TS project.

💡 Features

• Minimal boilerplate
• Reusable API instance with baseURL and auth token support
• Lightweight with minimal dependencies
• Works with modern browsers and Node.js
• React hook useFetch for simple GET requests
• TypeScript support included

⚡ Installation

npm install api-fetch-lite

📖 Usage

1. Without Authentication (Simple API Calls)

Using createApi (Recommended for multiple requests)

import { createApi } from "api-fetch-lite";

// Create an API instance
const api = createApi({
  baseURL: "https://jsonplaceholder.typicode.com"
});

// GET request
const users = await api.get("/users");
console.log(users.data); // Array of users

// POST request
const newPost = await api.post("/posts", {
  title: "My Post",
  body: "Post content",
  userId: 1
});
console.log(newPost.data); // Created post object

// PUT request
const updatedPost = await api.put("/posts/1", {
  id: 1,
  title: "Updated Title",
  body: "Updated content",
  userId: 1
});
console.log(updatedPost.data); // Updated post object

// PATCH request (partial update)
// PATCH is used for partial updates - only send the fields you want to update
const patchedPost = await api.patch("/posts/1", {
  title: "Partially Updated Title"
  // Only title is updated, other fields remain unchanged
});
console.log(patchedPost.data); // Partially updated post object

// PATCH example: Update multiple fields
const updatedFields = await api.patch("/posts/1", {
  title: "New Title",
  body: "New Body"
  // Only title and body are updated
});

// DELETE request
const result = await api.delete("/posts/1");
console.log(result.data); // Deleted post object

Using useFetch Hook (React - GET requests only)

import { useFetch } from "api-fetch-lite";

function MyComponent() {
  const { data, loading, error } = useFetch("https://jsonplaceholder.typicode.com/posts");

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

  return (
    <ul>
      {data?.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Using quickRequest (One-liner helper)

import { quickRequest } from "api-fetch-lite";

// GET request
const users = await quickRequest(
  "https://jsonplaceholder.typicode.com",
  "get",
  "/users"
);

// POST request
const newPost = await quickRequest(
  "https://jsonplaceholder.typicode.com",
  "post",
  "/posts",
  { title: "New Post", body: "Content", userId: 1 }
);

// PUT request
const updated = await quickRequest(
  "https://jsonplaceholder.typicode.com",
  "put",
  "/posts/1",
  { id: 1, title: "Updated", body: "Content", userId: 1 }
);

// PATCH request (partial update)
// PATCH updates only the fields you specify
const patched = await quickRequest(
  "https://jsonplaceholder.typicode.com",
  "patch",
  "/posts/1",
  { title: "Partially Updated" } // Only updates title field
);

// DELETE request
const deleted = await quickRequest(
  "https://jsonplaceholder.typicode.com",
  "delete",
  "/posts/1"
);

2. With Authentication (Bearer Token)

Using createApi with Token

import { createApi } from "api-fetch-lite";

// Create an API instance with authentication
const api = createApi({
  baseURL: "https://api.example.com",
  getToken: () => localStorage.getItem("token") // or sessionStorage, or any function that returns a token
});

// All requests will automatically include: Authorization: Bearer <token>
const profile = await api.get("/user/profile");
const posts = await api.post("/posts", { title: "New Post" });
const updated = await api.put("/posts/1", { title: "Updated" });
const patched = await api.patch("/posts/1", { title: "Partially Updated" });
const deleted = await api.delete("/posts/1");

Example: Dynamic Token from Multiple Sources

import { createApi } from "api-fetch-lite";

const api = createApi({
  baseURL: "https://api.example.com",
  getToken: () => {
    // Try localStorage first, then sessionStorage, then return null
    return localStorage.getItem("authToken") 
      || sessionStorage.getItem("authToken") 
      || null;
  }
});

// All requests automatically include the token if available
const data = await api.get("/protected-endpoint");

Using quickRequest with Token

import { quickRequest } from "api-fetch-lite";

// With authentication
const profile = await quickRequest(
  "https://api.example.com",
  "get",
  "/user/profile",
  undefined, // no body for GET
  () => localStorage.getItem("token") // token getter function
);

// POST with authentication
const newPost = await quickRequest(
  "https://api.example.com",
  "post",
  "/posts",
  { title: "New Post", body: "Content" },
  () => localStorage.getItem("token")
);

// PATCH with authentication
const patched = await quickRequest(
  "https://api.example.com",
  "patch",
  "/posts/1",
  { title: "Partially Updated" },
  () => localStorage.getItem("token")
);

🔄 Understanding PATCH vs PUT

When to Use PATCH

PATCH is used for partial updates - you only send the fields you want to update:

import { createApi } from "api-fetch-lite";

const api = createApi({
  baseURL: "https://api.example.com"
});

// PATCH: Update only the title field
// Other fields (body, userId, etc.) remain unchanged
const result = await api.patch("/posts/1", {
  title: "New Title"
});

When to Use PUT

PUT is used for full replacement - you send the complete resource:

// PUT: Replace the entire post with new data
// All fields must be provided
const result = await api.put("/posts/1", {
  id: 1,
  title: "New Title",
  body: "New Body",
  userId: 1
});

PATCH Examples

Example 1: Update Single Field

import { createApi } from "api-fetch-lite";

const api = createApi({
  baseURL: "https://api.example.com",
  getToken: () => localStorage.getItem("token")
});

// Update only the title
const updated = await api.patch("/posts/1", {
  title: "Updated Title"
});
console.log(updated.data);

Example 2: Update Multiple Fields

// Update title and body, but keep userId unchanged
const updated = await api.patch("/posts/1", {
  title: "New Title",
  body: "New Body"
});

Example 3: Update User Profile (Partial)

// Update only email, other profile fields remain unchanged
const profile = await api.patch("/user/profile", {
  email: "[email protected]"
});

Example 4: PATCH with Authentication

const api = createApi({
  baseURL: "https://api.example.com",
  getToken: () => localStorage.getItem("token")
});

// PATCH request automatically includes Authorization header
const updated = await api.patch("/posts/1", {
  title: "Updated Title"
});

Example 5: Using quickRequest with PATCH

import { quickRequest } from "api-fetch-lite";

// Simple PATCH request
const result = await quickRequest(
  "https://api.example.com",
  "patch",
  "/posts/1",
  { title: "Updated Title" }
);

// PATCH with authentication
const result = await quickRequest(
  "https://api.example.com",
  "patch",
  "/posts/1",
  { title: "Updated Title" },
  () => localStorage.getItem("token")
);

Example 6: React Component Using PATCH

import React, { useState } from "react";
import { createApi } from "api-fetch-lite";

function EditPost({ postId }) {
  const [title, setTitle] = useState("");
  const [loading, setLoading] = useState(false);

  const api = createApi({
    baseURL: "https://api.example.com",
    getToken: () => localStorage.getItem("token")
  });

  const handleUpdate = async () => {
    setLoading(true);
    try {
      // PATCH: Only update the title field
      const response = await api.patch(`/posts/${postId}`, {
        title: title
      });
      console.log("Updated:", response.data);
      alert("Post updated successfully!");
    } catch (error) {
      console.error("Error updating post:", error);
      alert("Failed to update post");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Enter new title"
      />
      <button onClick={handleUpdate} disabled={loading}>
        {loading ? "Updating..." : "Update Title"}
      </button>
    </div>
  );
}

🔧 Complete Examples

React Component with Authentication

import React, { useState } from "react";
import { createApi } from "api-fetch-lite";

function PostsComponent() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);

  // Create API instance with auth
  const api = createApi({
    baseURL: "https://api.example.com",
    getToken: () => localStorage.getItem("token")
  });

  const fetchPosts = async () => {
    setLoading(true);
    try {
      const response = await api.get("/posts");
      setPosts(response.data);
    } catch (error) {
      console.error("Error fetching posts:", error);
    } finally {
      setLoading(false);
    }
  };

  const createPost = async () => {
    try {
      const response = await api.post("/posts", {
        title: "New Post",
        body: "Post content",
        userId: 1
      });
      console.log("Created:", response.data);
      fetchPosts(); // Refresh list
    } catch (error) {
      console.error("Error creating post:", error);
    }
  };

  const updatePost = async (postId) => {
    try {
      // PATCH: Update only specific fields
      const response = await api.patch(`/posts/${postId}`, {
        title: "Updated Title"
        // Only title is updated, body and other fields remain unchanged
      });
      console.log("Updated:", response.data);
      fetchPosts(); // Refresh list
    } catch (error) {
      console.error("Error updating post:", error);
    }
  };

  return (
    <div>
      <button onClick={fetchPosts} disabled={loading}>
        {loading ? "Loading..." : "Fetch Posts"}
      </button>
      <button onClick={createPost}>Create Post</button>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            {post.title}
            <button onClick={() => updatePost(post.id)}>Update Title</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Node.js Example

import { createApi } from "api-fetch-lite";

// Without auth
const publicApi = createApi({
  baseURL: "https://jsonplaceholder.typicode.com"
});

// With auth (e.g., from environment variable)
const privateApi = createApi({
  baseURL: "https://api.example.com",
  getToken: () => process.env.API_TOKEN || null
});

// Usage
async function main() {
  const users = await publicApi.get("/users");
  const profile = await privateApi.get("/user/profile");
  
  // PATCH example: Update user profile partially
  const updatedProfile = await privateApi.patch("/user/profile", {
    email: "[email protected]"
    // Only email is updated, other profile fields remain unchanged
  });
  
  console.log(users.data);
  console.log(profile.data);
  console.log(updatedProfile.data);
}

main();

Handling FormData (File Uploads)

import { createApi } from "api-fetch-lite";

const api = createApi({
  baseURL: "https://api.example.com",
  getToken: () => localStorage.getItem("token")
});

// Upload file
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("title", "My File");

// FormData is automatically detected - Content-Type header is omitted
const response = await api.post("/upload", formData);
console.log(response.data);

📚 API Reference

createApi(config)

Creates a reusable API instance.

Parameters:

• config.baseURL (string, required): Base URL for all requests
• config.getToken (function, optional): Function that returns the auth token (e.g., () => localStorage.getItem("token"))

Returns: Object with methods:

• get(endpoint) - GET request
• post(endpoint, body?) - POST request
• put(endpoint, body?) - PUT request (full resource replacement)
• patch(endpoint, body?) - PATCH request (partial update - only send fields you want to update)
• delete(endpoint) - DELETE request

Note: All methods return an axios response object. Access data via .data property.

PATCH Method Details:

• Use PATCH when you want to update only specific fields of a resource
• Only include the fields you want to change in the body
• Other fields remain unchanged on the server
• Example: api.patch("/posts/1", { title: "New Title" }) - only updates the title

useFetch(url)

React hook for GET requests.

Parameters:

• url (string, required): Full URL to fetch

Returns: Object with:

• data - Response data (null initially)
• loading - Boolean indicating loading state
• error - Error message string (null if no error)

quickRequest(baseURL, method, endpoint, payload?, getToken?)

One-liner helper for making requests.

Parameters:

• baseURL (string, required): Base URL
• method (string, required): "get" | "post" | "put" | "patch" | "delete"
• endpoint (string, required): API endpoint
• payload (any, optional): Request body for POST/PUT
• getToken (function, optional): Token getter function

Returns: Promise resolving to response data (already extracted from axios response)

🔐 Authentication Details

How Authentication Works

1. Without getToken: Requests are made without any Authorization header
2. With getToken:
   • The function is called before each request
   • If it returns a token (non-null), Authorization: Bearer <token> header is added
   • If it returns null or undefined, no Authorization header is added

Token Storage Examples

// localStorage
getToken: () => localStorage.getItem("token")

// sessionStorage
getToken: () => sessionStorage.getItem("token")

// Cookie (requires a cookie library)
getToken: () => getCookie("authToken")

// Environment variable (Node.js)
getToken: () => process.env.API_TOKEN || null

// Custom logic
getToken: () => {
  const token = localStorage.getItem("token");
  const expires = localStorage.getItem("tokenExpires");
  if (expires && Date.now() > parseInt(expires)) {
    return null; // Token expired
  }
  return token;
}

🛠️ Error Handling

All methods can throw errors. Always use try-catch:

import { createApi } from "api-fetch-lite";

const api = createApi({
  baseURL: "https://api.example.com",
  getToken: () => localStorage.getItem("token")
});

try {
  const response = await api.get("/posts");
  console.log(response.data);
} catch (error) {
  if (error.response) {
    // Server responded with error status
    console.error("Status:", error.response.status);
    console.error("Data:", error.response.data);
  } else if (error.request) {
    // Request made but no response
    console.error("No response received");
  } else {
    // Error setting up request
    console.error("Error:", error.message);
  }
}

📦 Dependencies

• axios - For HTTP requests

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Tanishk TT

⭐ Show Your Support

If you find this package useful, please consider giving it a star on GitHub!