Busca de Dados

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

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 usando a URL completa (e.x. https://example.com/api ou Astro.url + "/api").

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 o modo SSR estiver habilitado, quaisquer chamadas a fetch() serão executadas em runtime.

💡 Aproveite-se do 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} />

Nota

Lembre-se, todos os dados em componentes Astro são buscados quando o componente é renderizado.

Seu site Astro após o deploy irá buscar os dados uma vez, em tempo de build. No desenvolvimento, você verá a busca de dados ao recarregar componentes. Se você precisa buscar dados múltiplas vezes no lado do cliente, utilize um componente de framework ou um script no lado do cliente em um componente Astro.

fetch() em Componentes de Frameworks

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

src/components/Filmes.tsx

import type { FunctionalComponent } 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;

Consultas GraphQL

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

src/components/Filme.astro

---
const resposta = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
  {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        query getFilm ($id:ID!) {
          film(id: $id) {
            title
            releaseDate
          }
        }
      `,
      variables: {
        id: "ZmlsbXM6MQ==",
      },
    }),
  });

const json = await resposta.json();
const { film } = json.data;
---
<h1>Buscando informações sobre Star Wars: Uma Nova Esperança</h1>
<h2>Título: {film.title}</h2>
<p>Ano: {film.releaseDate}</p>

Busque de um CMS Headless

Componentes Astro podem buscar dados de seu CMS favorito e então renderizá-lo como o conteúdo de sua página. Utilizando rotas dinâmicas, componentes podem até mesmo gerar páginas com base no conteúdo do seu CMS.

Veja nossos Guias de CMS para mais detalhes em como integrar o Astro com CMSes headless incluindo Storyblok, Contentful e WordPress.

Conteúdo feitos pela comunidade

• Criando uma aplicação Full-Stack com Astro + GraphQL (Em Inglês)