Busca de Dados

Arquivos .astro podem buscar dados remotamente em tempo de build para te ajudar a gerar suas páginas.

fetch() em Astro

Section titled fetch() em Astro

Todos os componentes Astro tem acesso a função global fetch() em seus scripts do componente para fazer requisições HTTP à APIs. Essa chamada ao fetch será executada em tempo de build, e os dados estarão disponíveis ao template do componente para gerar HTML dinâmico.

💡 Se aproveite de top-level await dentro do script do seu componente Astro.

💡 Passe os dados buscados para componentes Astro e de outros frameworks como props.

src/components/Usuario.astro
---
import Contato from '../components/Contato';
import Localizacao from '../components/Localizacao.astro';

const resposta = await fetch('https://randomuser.me/api/');
const dados = await resposta.json();
const usuarioAleatorio = dados.results[0]
---
<!-- Dados buscados em tempo de build podem ser renderizados no HTML -->
<h1>Usuário</h1>
<h2>{usuarioAleatorio.name.first} {usuarioAleatorio.name.last}</h2>

<!-- Dados buscados em tempo de build podem ser passados aos componentes como props -->
<Contato client:load email={usuarioAleatorio.email} />
<Localizacao cidade={usuarioAleatorio.location.city} />

Consultas GraphQL

Section titled Consultas GraphQL

Astro também pode utilizar fetch() para consultar um servidor GraphQL com qualquer consulta GraphQL válida.

---
const resposta = await fetch("https://graphql-weather-api.herokuapp.com",
  {
    method:'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        query getClima($nome:String!) {
            getCidadePorNome(nome: $nome){
              nome
              pais
              clima {
                sumario {
                    descricao
                }
              }
            }
          }
        `,
      variables: {
          nome: "Toronto",
      },
    }),
  })

const json = await resposta.json();
const clima = json.data
---
<h1>Buscando o clima em tempo de build</h1>
<h2>{clima.getCidadePorNome.nome}, {clima.getCidadePorNome.pais}</h2>
<p>Clima: {clima.getCidadePorNome.clima.sumario.descricao}</p>

fetch() em Componentes de Frameworks

Section titled fetch() em Componentes de Frameworks

A função fetch() também está globalmente disponível a qualquer componente de framework:

Filmes.tsx
import type { FunctionalComponent } from 'preact';
import { h } from 'preact';

const dados = await fetch('https://exemplo.com/filmes.json').then((resposta) =>
  resposta.json()
);

// Componentes que são renderizados no momento de build também fazem logs na interface de linha de comando.
// Quando renderizado com uma diretiva client:*, eles também irão fazer logs no console do navegador.
console.log(dados);

const Filmes: FunctionalComponent = () => {
// Exibe o resultado na página
  return <div>{JSON.stringify(dados)}</div>;
};

export default Filmes;