Halo teman-teman semuanya, pada artikel kali ini kita semua akan belajar bagaimana cara menampilkan data di dalam Solid Js dari Rest API yang dibuat menggunakan Laravel.
Agar mempermudah kita dalam fetching data ke dalam Rest API / backend, maka kita akan gunakan library tambahan yang bernama Axios dan kita juga akan lakukan konfigurasi di dalam Axios agar kita tidak menulis domain backend secara berulang-ulang.
Langkah 1 - Installasi Axios
Sekarang kita akan belajar bagaimana cara menginstall Axios di dalam project Solid Js. Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Solid Js-nya.
npm install axios@1.5.0
Jika proses installasi Axios berhasil, maka pada file package.json pada bagian dependencies kurang lebih seperti berikut ini.
package.json
"dependencies": {
"@solidjs/router": "^0.10.10",
"axios": "^1.5.0",
"solid-js": "^1.8.11"
}
Langkah 2 - Konfigurasi Axios
Silahkan teman-teman buat folder baru dengan nama services di dalam folder src, kemudian di dalam folder services tersebut silahkan buat file baru dengan nama api.js, kemudian masukkan kode berikut ini di dalamnya.
src/services/api.jsx
//import axios
import axios from "axios";
const Api = axios.create({
//set default endpoint API
baseURL: "http://localhost:8000",
});
export default Api;
Di atas, pada bagian baseURL kita berikan alamat domain dari backend / Laravel kita.
Langkah 3 - Menampilkan Data dari Rest API di Solid Js
Setelah berhasil melakukan konfigurasi Axios, maka sekarang kita lanjutkan belajar menampilkan data di dalam Solid Js dari Rest API menggunakan Axios.
Silahkan teman-teman buka file src/pages/posts/index.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/pages/posts/index.jsx
//import createSignal dan createEffect
import { createSignal, createEffect } from "solid-js";
//import from @solidjs/router
import { A } from "@solidjs/router";
//import services api
import api from "../../services/api";
export default function PostIndex() {
//init state
const [posts, setPosts] = createSignal([]);
//define method "fetchDataPosts"
const fetchDataPosts = async () => {
//fetch data from API with Axios
await api.get("/api/posts").then((response) => {
//assign response data to state "posts"
setPosts(response.data.data.data);
});
};
//run hook createEffect
createEffect(() => {
//call method "fetchDataPosts"
fetchDataPosts();
}, []);
return (
<div className="row mt-5">
<div className="col-md-12">
<div className="card border-0 shadow rounded">
<div className="card-body">
<A
href="/posts/create"
className="btn btn-md btn-success rounded shadow border-0 mb-2"
>
ADD POST
</A>
<table className="table table-bordered">
<thead className="bg-dark text-white">
<tr>
<th scope="col">Image</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col" style={{ width: "15%" }}>
Actions
</th>
</tr>
</thead>
<tbody>
{posts().length > 0 ? (
posts().map((post, index) => (
<tr key={index}>
<td className="text-center">
<img
src={post.image}
alt={post.title}
width="200"
className="rounded"
/>
</td>
<td>{post.title}</td>
<td>{post.content}</td>
<td className="text-center">
<a
href={`/posts/edit/${post.id}`}
className="btn btn-sm btn-primary rounded-sm shadow border-0 me-2"
>
EDIT
</a>
<button className="btn btn-sm btn-danger rounded-sm shadow border-0">
DELETE
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan="4" className="text-center">
<div className="alert alert-danger mb-0">
Data Belum Tersedia!
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
}
Dari perubhan di atas, pertama kita import hook createSignal dan createEffect dari Solid Js.
//import createSignal dan createEffect
import { createSignal, createEffect } from "solid-js";
Kemudian kita import A dari Solid Router.
//import from @solidjs/router
import { A } from "@solidjs/router";
Dan kita juga import konfigurasi API yang sudah kita bat sebelumna.
//import services api
import api from "../../services/api";
Di dalam function component PostIndex, pertama-tama kita inisialisasi dulu state baru dengan nama posts menggunakan hook createSignal dan tipe datanya adalah array.
//init state
const [posts, setPosts] = createSignal([]);
Kemudian kita membuat sebuah method dengan nama fetchDataPosts.
//define method "fetchDataPosts"
const fetchDataPosts = async () => {
//...
}
Di dalam method terbut, kita melakukan fetching data ke Rest API dengan endpoint /api/posts.
await api.get("/api/posts").then((response) => {
//...
}
Jika data berhal didapatkan, maka kita akan assign ke dalam state posts menggunaan state handler-nya, yaitu setPosts.
setPosts(response.data.data.data);
Agar method fetchDataPosts dijalankan saat haman diakses, maka kita perlu memanggilnya di dalam hook createEffect.
//run hook createEffect
createEffect(() => {
//call method "fetchDataPosts"
fetchDataPosts();
}, []);
Setelah itu, kita tinggal menampilkan datanya di dalam template. Disini kita menggunakan sebuah kondisi untuk memastikan apakah ada datanya atau tidak.
{
posts().length > 0
? //looping
: // Data Belum Tersedia !
}
Jika data di atas 0, maka kita akan melakukan perulangan data menggunakan map untuk menampilkan data.
Langkah 4 - Uji Coba Menampilkan Data
Sekarang silahkan teman-teman klik menu POSTS yang ada di dalam navbar, jika berhasil maka kita akan menampilkan halaman seperti berikut ini.
Di atas, kita mendapatkan pesan Data Belum Tersedia!, karena kita memang belum memiliki data apapun di dalam database.
Kesimpulan
Pada artikel ini, kita semua telah belajar bagaimana cara install dan konfigurasi Axios dan belajar menampilkan data di Solid Js dari Rest API.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara melakukan proses insert data ke dalam database di Solid Js melalui Rest API.
Terima Kasih