Latihan 1: SolidStart Data — SolidJS

Latihan 1 dari materi SolidStart Data di SolidJS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Muat data dengan query dan createAsync, seperti di SolidStart. Kode awal sudah punya getItems, fungsi async bertanda "use server" yang mengembalikan dua item setelah 0,2 detik dan menambah penghitung permintaan tiap kali ditanya. Dua komponen, Daftar dan Jumlah, sama-sama butuh datanya.

Bungkus getItems dengan query: const getItems = query(async () => { ... }, "items").
Di Daftar, baca datanya dengan const items = createAsync(() => getItems()), lalu di dalam <ul> tulis <For each={items()}>{(item) => <li>{item.name}</li>}</For>.
Di Jumlah, baca dengan createAsync juga, dan tampilkan <p id="jumlah">{items()?.length} item</p>.

App sudah membungkus keduanya dengan <Suspense> dan menampilkan #permintaan. Sandbox ini gak punya server: fungsi "use server" jalan di pratinjau. query dan createAsync bekerja seperti di @solidjs/router.

Yang dicek:

Ada <li> yang memuat Item 1, dan #jumlah berbunyi 2 item.
#permintaan berbunyi Permintaan ke server: 1: dua komponen, satu request, karena query membagi jawabannya.
Kodenya memakai query(, createAsync(, For, dan "use server".

Hint

query membungkus pengambil data dan membagi jawabannya: dua pemanggilan dengan argumen yang sama cuma memicu satu request. createAsync membacanya seperti signal, undefined sampai datanya datang.
const getItems = query(async () => { ... }, "items"), lalu di tiap komponen: const items = createAsync(() => getItems()). Di Daftar, tampilkan dengan For; di Jumlah, items()?.length.
const items = createAsync(() => getItems()) return <ul><For each={items()}>{(item) => <li>{item.name}</li>}</For></ul>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: SolidStart Data — SolidJS

Hint

Memperbarui Aplikasi