Consultando API Externa e Exibindo Dados com Remix e React

Nesta aula abordaremos como consultar uma API externa, exibir seus dados no formato JSON no navegador e, em seguida, fornecer esses dados para um componente React, mostrando-os em uma lista usando ul e li. Utilizaremos um projeto Remix simples criado com o Remix Dev Server como ponto de partida.

Criando a Rota Feriados

Primeiro, vamos criar uma nova rota chamada “feriados”. Para isso, no diretório /app/routes, crie um novo arquivo chamado feriados.tsx. O nome do arquivo deve ser cuidadosamente escolhido, pois será o que o usuário acessará no navegador.

Após criar o arquivo, acesse a nova rota no navegador. Inicialmente, você verá um erro, pois o arquivo feriados.tsx está vazio. Vamos resolver isso!

Método Loader

Vamos criar e exportar um método chamado “loader” em nosso arquivo feriados.tsx. O método loader é o primeiro a ser executado quando uma rota é acessada, tornando-se o momento ideal para executar ações como consultar uma API externa. O loader é executado apenas no servidor, garantindo maior segurança e menor volume de JavaScript enviado ao navegador.

Para começar, retorne um objeto vazio usando o método utilitário fornecido pela Remix, chamado json(). Ele está disponível no pacote remix-run/node. O método json() recebe, como primeiro parâmetro, o que você deseja exibir retornar ao browser.

import { json } from "@remix-run/node";

export const loader = async () => {
  return json({});
};

Neste exemplo, retornamos apenas um objeto vazio. No entanto, o método json() também permite o envio de cabeçalhos (headers), que será útil posteriormente, quando trabalharmos com sessões e cookies.

Consultando a API Externa

Agora que temos nosso loader configurado, vamos consultar uma API externa. Para fazer isso, vamos criar uma constante chamada feriados, utilizar a Fetch API para fazer a chamada à API e extrair o corpo da resposta que vem como JSON.

export const loader = async () => {
  const endpoint = "https://brasilapi.com.br/api/feriados/v1/2023";

  const feriados = await fetch(endpoint).then((res) => res.json());

  return json(feriados);
};

Ao acessar a rota “/feriados” no navegador, você verá um array de objetos, cada um contendo as propriedades “name”, “type” e “date”. O primeiro objetivo está concluído!

Exibindo os Dados no Componente React

O próximo passo é exibir as informações retornadas pela API em um componente React. O Remix utiliza um conceito chamado “colocation”, onde todos os métodos da API das rotas são colocados no mesmo arquivo. Portanto, podemos criar e exportar um componente React diretamente em nosso arquivo feriados.tsx.

export default function Feriados() {
  return <h1>Feriados Nacionais - Ano 2023</h1>;
}

Este componente apenas exibe um título (h1), mas queremos exibir os dados retornados pela API. No entanto, não podemos simplesmente utilizar a constante feriados definida no loader dentro do componente. Para resolver isso, o Remix fornece um hook chamado useLoaderData, que nos permite acessar os dados retornados pelo loader.

Vamos utilizar esse hook em nosso componente:

import { useLoaderData } from "@remix-run/react";

export default function Feriados() {
  const feriados = useLoaderData();

  return (
    <>
      <h1>Feriados Nacionais - Ano 2023</h1>
      {/* Outro código virá aqui... */}
    </>
  );
}

Agora temos acesso aos dados retornados pela API em nosso componente. Vamos exibir essas informações em uma lista:

export default function Feriados() {
  const feriados = useLoaderData();

  return (
    <>
      <h1>Feriados Nacionais - Ano 2023</h1>
      <ul>
        {feriados.map((feriado) => (
          <li key={feriado.name}>{feriado.name}</li>
        ))}
      </ul>
    </>
  );
}

Lidando com Tipagem e TypeScript

Apesar de conseguirmos acessar a lista de feriados através do resultado da execução de useLoaderData(), não temos acesso aos tipos contidos na constante feriados. Para resolver isso, vamos passar um genérico para o hook, o que adicionará os tipos:

export const loader = async () => {
  // ...
  const endpoint = "https://brasilapi.com.br/api/feriados/v1/2023";

  const feriados = await fetch(endpoint).then((res) => res.json());

  return json(feriados);
  // ...
};

export default function Feriados() {
  const feriados = useLoaderData<typeof loader>();

  // ...
}

Ao modificar a execução do método hook para useLoaderData<typeof loader>() os tipos serão inferidos do que for retornado pela loader function.

Tudo está funcionando corretamente e, agora, o TypeScript sabe exatamente quais propriedades estão disponíveis no array feriado.

Conclusão

Neste tutorial, vimos como consultar uma API externa e exibir seus dados em um componente React usando o Remix. Além disso, exploramos os conceitos de rotas, loaders e colocation. Graças ao Remix, não precisamos nos preocupar com useEffect, useState ou re-renders desnecessários, tornando nosso código mais enxuto e eficiente.