🚀 API Client (Axios + TanStack Query)

A lightweight, opinion-free API client built on Axios and TanStack Query, designed for modern React applications.

✔ No UI dependencies
✔ Global success & error hooks
✔ Works with any toast library
✔ React Query–ready
✔ Production-grade architecture

📦 Installation

npm install axios @tanstack/react-query

Peer requirements

• React 18+
• TanStack Query v5+

🔧 Quick Start

1️⃣ Setup React Query Provider

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export function AppProviders({ children }) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

2️⃣ Configure the API (Required)

Call setupApi once, ideally at application startup.

import { setupApi } from "react-api-kit";
import { toast } from "react-toastify";

setupApi({
  baseURL: "/api",

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

  toast: {
    success: (msg) => toast.success(msg),
    error: (msg) => toast.error(msg),
  },

  errorMessages: {
    401: "Session expired",
    403: "Access denied",
    500: "Server error",
  },

  onSuccess: (data) => {
    console.log("Global success:", data);
  },

  onError: (error, message) => {
    console.error("Global error:", message, error);
  },

  onLogout: () => {
    localStorage.clear();
    window.location.href = "/login";
  },
});

🔔 Toast Integration (Optional)

This package does not ship a toast library.

You pass your own implementation.

🪝 Hooks

api

import { api } from "react-api-kit";

const fetchUsers = () => api.get("/users").then((res) => res.data);

useApiQuery get

const { data, isLoading } = useApiQuery( ["users"],"GET","/ENDPOINT/,{parems:value},{ ...options} );

useApiMutation

import { useApiMutation, api } from "react-api-kit";

// POST Req
const { mutate, isPending } = useApiMutation(["POST KEY"], "POST", "/users", [
  "Validate",
]);

// GET Req
const { mutate, isPending } = useApiMutation(["GET KEY"], "GET", "/users", [
  "Validate",
]);

// PATCH Req
const { mutate, isPending } = useApiMutation(["PATCH KEY"], "PATCH", "/users", [
  "Validate",
]);

//Delete Feq
const { mutate, isPending } = useApiMutation(
  ["DELETE KEY"],
  "DELETE",
  "/users",
  ["Validate"]
);