Visualizzare dati da API in Next.js con useFetch

In un precedente articolo abbiamo visto come visualizzare dati da API in Next.js usando fetch.

In questo vediamo come visualizzare gli stessi dati ma usando useFetch.

Prima di tutto installiamo la libreria con npm:

npm i usehooks-ts

Qui sotto un esempio:

"use client";

import {useFetch} from "usehooks-ts";

type Canzone = {
  canzone_titolo: string,
  canzone_autore: string
}

export default function Home() {
  const url = "https://www.matteoferrone.it/api/canzoni/get.php";
  const {data, error} = useFetch<Canzone[]>(url);
  const loading = !data && !error;

  const loadingComponent = <div>Loading...</div>;
  const errorComponent = <div>Errore: {error?.name}</div>;

  return (
      <main>
        <div>
          {loading ? (
              loadingComponent
          ) : error ? (
              errorComponent
          ) : (
              <div>
                <ul>
                  {data?.data.map(d => (<li key={d?.canzone_titolo}>{d?.canzone_titolo}</li>))}
                </ul>
              </div>
          )}
        </div>
      </main>
  )
}

Enjoy!