Cara Mudah Fetch API pada Solidjs

Halo! Bingung cari-cari tutorial atau cara mudah men-fetch api dengan solidjs?

Ini adalah contoh sederhana dengan menggunakan createResource() dan menampilkan datanya dengan <For>.

Yang pertama kali tentu mengimpor fungsi yang diperlukan.

import { createResource } from 'solid-js'

Nah, setelah diimpor kita fetch API untuk diambil datanya.

const App = () => {
  const fetchUsers = async () => {
    const response = await fetch('https://randomuser.me/api')
    return response.json()
  }
  const [data] = createResource(fetchUsers)
}

Kemudian, kita tampilkan datanya dengan <For></For>,

{data() && (
  <For each={data().results}>
    {(user) => (
      <p>Hai, {user.name.first}!</p>
    )}
  </For>
)}

Full Contoh Kode

import { createResource } from 'solid-js'
import { render } from 'solid-js/web'

const App = () => {
  const fetchUsers = async () => {
    const response = await fetch('https://randomuser.me/api')
    return response.json()
  }
  const [data] = createResource(fetchUsers)

  return (
    <>
      {data() && (
        <For each={data().results}>
          {(user) => (
          <p>Hai, {user.name.first}!</p>
          )}
        </For>
      )}
    </>
  )
}

render(App, document.getElementById("app"))

Kesimpulan

Itulah dia cara mudah fetch API pada Solidjs!

Silakan koreksi apabila ada kesalahan melalui kolom komentar.