api 🚀

A powerful fetch wrapper for Next.js & React

Features

• ⚡ Smart caching
• 🔁 Retry logic
• 🧠 Request deduplication
• 🧪 DevTools panel
• ⚛️ Next.js support

Install

npm install alkasadi-api

Usage

import { useApi } from 'alkasadi-api';

// GET request (default)
const { data, loading, error } = useApi('/api/posts');

// POST request
const { data: postData, loading: postLoading, error: postError } = useApi('/api/posts', {
  method: 'POST',
  body: { title: 'New Post', content: 'Content here' }
});

// PUT request
const { data: putData, loading: putLoading, error: putError } = useApi('/api/posts/1', {
  method: 'PUT',
  body: { title: 'Updated Post' }
});

// DELETE request
const { data: deleteData, loading: deleteLoading, error: deleteError } = useApi('/api/posts/1', {
  method: 'DELETE'
});

Example

'use client';

import { useState } from 'react';
import { useApi } from 'alkasadi-api';

// ======================
// Type
// ======================
type User = {
  id: number;
  name: string;
  email: string;
};

const API = 'http://127.0.0.1:8000/api/users';

export default function UsersPage() {
  // ======================
  // GET
  // ======================
  const { data, loading, error } = useApi(API) as {
    data: User[] | { data: User[] } | undefined;
    loading: boolean;
    error: unknown;
  };

  const users: User[] = Array.isArray(data)
    ? data
    : data?.data || [];

  // ======================
  // STATE
  // ======================
  const [form, setForm] = useState({
    name: '',
    email: '',
    password: '',
  });

  const [id, setId] = useState<number | null>(null);

  // ======================
  // POST
  // ======================
  const { execute: createUser } = useApi(API, {
    manual: true,
    method: 'POST',
  });

  // ======================
  // PUT
  // ======================
  const { execute: updateUser } = useApi('', {
    manual: true,
    method: 'PUT',
  });

  // ======================
  // DELETE
  // ======================
  const { execute: deleteUser } = useApi('', {
    manual: true,
    method: 'DELETE',
  });

  // ======================
  // SUBMIT
  // ======================
  const submit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (id) {
      await updateUser({
        url: `${API}/${id}`,
        body: form,
      });
    } else {
      await createUser({
        body: form,
      });
    }

    setForm({ name: '', email: '', password: '' });
    setId(null);
  };

  // ======================
  // DELETE
  // ======================
  const remove = (id: number) => {
    deleteUser({ url: `${API}/${id}` });
  };

  // ======================
  // EDIT
  // ======================
  const edit = (u: User) => {
    setId(u.id);
    setForm({
      name: u.name,
      email: u.email,
      password: '',
    });
  };

  // ======================
  // ERROR HANDLING (حل unknown)
  // ======================
  const errorMessage =
    error instanceof Error
      ? error.message
      : error
      ? String(error)
      : '';

  return (
    <div>
      <h1>Users</h1>

      {/* FORM */}
      <form onSubmit={submit}>
        <input
          placeholder="Name"
          value={form.name}
          onChange={(e) =>
            setForm({ ...form, name: e.target.value })
          }
        />

        <input
          placeholder="Email"
          value={form.email}
          onChange={(e) =>
            setForm({ ...form, email: e.target.value })
          }
        />

        <input
          placeholder="Password"
          type="password"
          value={form.password}
          onChange={(e) =>
            setForm({ ...form, password: e.target.value })
          }
        />

        <button className="bg-green-400">
          {id ? 'Update' : 'Create'}
        </button>
      </form>

      {/* STATES */}
      {loading && <p>Loading...</p>}
      {errorMessage && <p>{errorMessage}</p>}

      {/* LIST */}
      <ul>
        {users.map((u: User) => (
          <li key={u.id}>
            {u.name} - {u.email}

            <button
              className="bg-blue-600 m-3"
              onClick={() => edit(u)}
            >
              Edit
            </button>

            <button
              className="bg-red-600"
              onClick={() => remove(u.id)}
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}