Logika API dalam Nuxt JS SSR dengan Laravel 12 API (Struktur App)

Dalam pengembangan aplikasi berbasis Server-Side Rendering (SSR), kita pasti sudah tidak asing lagi dengan yang namanya API. API (Application Programming Interface) ini digunakan untuk mengelola berbagai logika seperti menampilkan data, menambahkan data baru, hingga memperbarui atau menghapus data yang sudah ada.

Pada materi kali ini, kita akan membahas bagaimana cara memisahkan dan mengelola logika pemanggilan API Laravel di Nuxt JS 4 dengan pendekatan SSR, menggunakan struktur folder modern berbasis app/.

Membuat Folder composables di dalam app/

Di Nuxt 3.10 ke atas (atau Nuxt 4), struktur direktori modern menempatkan semua logic dan UI dalam folder app/.

Silakan buat folder composables di dalam app/, bukan di root project.

nuxt-laravel/
├── app/
│   ├── composables/
│   │   └── useProducts.ts

Konfigurasi useProducts.ts

Silakan buka file useProducts.ts kemudian masukkan kode berikut ini:

export const useProducts = () => {
    const config = useRuntimeConfig();
    const apiBase = config.public.apiBase;

    const fetchProducts = async (page = 1) => {
        try {
            console.log(`Fetching products for page ${page}...`);
            const data = await $fetch(`${apiBase}/products?page=${page}`);
            console.log("Fetched products:", data);
            return data; 
        } catch (error) {
            console.error("Error fetching products:", error);
            return null;
        }
    };
    

    const fetchProductById = async (id: number) => {
        try {
            console.log(`Fetching product with ID: ${id}`);
            const data = await $fetch(`${apiBase}/products/${id}`);
            console.log(`Fetched product ${id}:`, data);
            return data;
        } catch (error) {
            console.error(`Error fetching product with ID ${id}:`, error);
            return null;
        }
    };

    const addProduct = async (product: Record<string, any>) => {
        try {
            console.log("Adding new product:", product);
            const data = await $fetch(`${apiBase}/products`, {
                method: "POST",
                body: product,
            });
            console.log("Product added:", data);
            return data;
        } catch (error) {
            console.error("Error adding product:", error);
            return null;
        }
    };

    const updateProduct = async (id: number, product: Record<string, any>) => {
        try {
            console.log(`Updating product with ID ${id}:`, product);
            const data = await $fetch(`${apiBase}/products/${id}`, {
                method: "PUT",
                body: product,
            });
            console.log(`Product ${id} updated:`, data);
            return data;
        } catch (error) {
            console.error(`Error updating product with ID ${id}:`, error);
            return null;
        }
    };

    const deleteProduct = async (id: number) => {
        try {
            console.log(`Deleting product with ID: ${id}`);
            await $fetch(`${apiBase}/products/${id}`, {
                method: "DELETE",
            });
            console.log(`Product ${id} deleted.`);
            return true; 
        } catch (error) {
            console.error(`Error deleting product with ID ${id}:`, error);
            return false;
        }
    };

    return { fetchProducts, fetchProductById, addProduct, updateProduct, deleteProduct };
};

Fungsi useProducts merupakan sebuah composable di Nuxt 3/4 yang bertugas mengelola semua logika pemanggilan API terkait produk. Pendekatan seperti ini sangat membantu dalam hal reusability dan pemisahan logika bisnis dari komponen tampilan (UI).

Mari kita uraikan satu per satu:

1. Inisialisasi Konfigurasi Runtime

const config = useRuntimeConfig();
const apiBase = config.public.apiBase;

• useRuntimeConfig() digunakan untuk mengambil konfigurasi runtime Nuxt, seperti URL API backend.
• Biasanya, apiBase ini didefinisikan di file .env dan digunakan sebagai prefix endpoint, contohnya: http://localhost:8000/api.

2. fetchProducts(page = 1)

const fetchProducts = async (page = 1) => {
    ...
};

• Fungsi ini mengambil daftar produk dari endpoint /products.
• Secara default mengambil halaman pertama (page = 1), tapi bisa menerima parameter halaman lain.
• Menggunakan $fetch dari Nuxt, yang mirip fetch() tapi sudah terintegrasi dengan SSR dan error handling Nuxt.

3. fetchProductById(id)

const fetchProductById = async (id: number) => {
    ...
};

• Mengambil satu produk berdasarkan ID-nya.
• Cocok digunakan untuk halaman detail produk atau form edit.

4. addProduct(product)

const addProduct = async (product: Record<string, any>) => {
    ...
};

• Fungsi ini mengirim data produk baru ke server menggunakan metode POST.
• Data produk dikirim melalui body, dalam bentuk JSON.
• Parameter product bertipe Record<string, any> — artinya objek dengan key string dan value tipe bebas (mirip objek biasa di JS).

5. updateProduct(id, product)

const updateProduct = async (id: number, product: Record<string, any>) => {
    ...
};

• Melakukan update data produk berdasarkan ID tertentu.
• Metodenya adalah PUT, sesuai dengan konvensi REST API untuk update penuh data.

6. deleteProduct(id)

const deleteProduct = async (id: number) => {
    ...
};

• Menghapus produk berdasarkan ID.
• Jika berhasil, mengembalikan true, dan jika gagal, false.

7. Return Semua Fungsi

return { fetchProducts, fetchProductById, addProduct, updateProduct, deleteProduct };

• Semua fungsi di-expose dari composable ini sehingga bisa digunakan di komponen Nuxt lain seperti di pages atau components.

Kesimpulan

Dengan membuat composable seperti useProducts, kita bisa:

• Menghindari pengulangan kode.
• Lebih mudah mengelola logic API secara terpisah dari UI.
• Meningkatkan keterbacaan dan maintainability proyek Nuxt JS kita.