API

Come integrare le API per comunicare tra astro e strapi

1. Crea e compila il file .env

   .env

   PUBLIC_API_URL= xxxxxxxxxx
   PUBLIC_API_TOKEN= xxxxxxxxxxxxxxxxxx
   PUBLIC_SMTP_API= xxxxxxxxxx

2. Dentro l’head del file inserire la chiamata che si necessità asd

   index.astro

   async function fetchDati() {
    const url = `${import.meta.env.PUBLIC_API_URL}/nome_api`;
   
    const response = await fetch(url, {
      headers: {
      Authorization: `Bearer ${import.meta.env.PUBLIC_API_TOKEN}`
      }
    });
   
    const data = await response.json();
   
    return data.data;
   }
   
   const dati = await fetchDati();

3. All’interno del div corrispondente inserire la funzione map

   index.astro

   {
   data.map((item, index) => (
    <div class="swiper-slide lg:p-[2.5vw] p-[24px] !h-full rounded-body lg:border-[0.104vw] border-[1.5px] border-verde !flex flex-col justify-between bg-grigio-100">
      <div class="flex flex-col gap-[2.222vw]">
        <h4 class="!font-medium text-blu">{index + 1}</h4>
        <h4 class="!font-medium text-blu">{item.title}</h4>
      </div>
      <p class="!font-light text-blu">{item.desc}</p>
    </div>
    ))
   }