Como fazer o fetch dos dados em React: folha informativa e exemplos

Artigo original: How to Fetch Data in React: Cheat Sheet + Examples

Há várias maneiras de fazer o fetch de dados de uma API externa no React. Mas qual deles devemos utilizar em nossas aplicações em 2021?

Neste tutorial, analisaremos cinco dos padrões mais comumente usados para fazer o fetch de dados com React fazendo uma solicitação HTTP para uma API REST.

Não trataremos apenas de como fazer o fetch dos dados, mas também sobre como melhor tratar dos estados de carregamento e de erro ao fazer o fetch dos dados.

Vamos começar!

Para todos esses exemplos, usaremos um endpoint da conhecida API JSON Placeholder, mas você pode usar uma API própria que você tenha criado (por exemplo, uma API do Node com Express) ou qualquer outra API pública.

Quer ter sua própria cópia?‬

Clique aqui para fazer o download da ficha informativa em formato PDF (em inglês, leva apenas 5 segundos).

Ela inclui todas as informações essenciais vistas aqui em um guia em PDF conveniente.

1. Como fazer o fetch dos dados em React usando a API do fetch

A maneira mais acessível de se fazer o fetch dos dados com o React é usando a API do fetch.

A API do fetch é uma ferramenta incorporada aos navegadores mais modernos, no objeto window (window.fetch) e nos permite fazer solicitações HTTP facilmente usando as promises do JavaScript.

Para fazer uma solicitação de GET com o fetch, precisamos apenas incluir o URL do endpoint para o qual queremos fazer nossa solicitação. Queremos fazer essa solicitação assim que nosso componente do React estiver montado.

Para fazer isso, fazemos nossa solicitação dentro do hook useEffect, e nos certificamos de fornecer um array de dependências vazio como o segundo argumento, de modo que nossa solicitação seja feita apenas uma vez (levando em conta que ela não seja dependente de outros dados do nosso componente).

Na primeira callback .then(), verificamos se a resposta não tinha problemas (response.ok). Em caso positivo, retornamos nossa resposta para passá-la para a próxima, e então retorná-la como dados em JSON, já que esses são os dados que obteremos de nossa API de usuários aleatórios.

Se a resposta não foi um ok, assumimos que houve um erro ao fazer a solicitação. Ao usar o fetch, precisamos tratar dos erros por nossa conta, então lançamos a response como um erro para que ela seja tratada por nossa callback catch.

Aqui, em nosso exemplo, colocaremos nossos dados com erro no state com setError. Se houver um erro, retornamos o texto "Error!".

Observe que você também pode exibir uma mensagem de erro a partir do objeto com erro que colocamos no state usando error.message.

Usamos a callback .finally() como a função que é chamada quando nossa promise foi resolvida, com sucesso ou não. Nela, definimos loading como false, para que não vejamos mais nosso texto de carregamento.

Em vez disso, vemos nossos dados na página, se a solicitação foi feita com sucesso, ou vemos que houve um erro ao fazer a solicitação, do contrário.

2. Como fazer o fetch dos dados no React usando o Axios

A segunda abordagem para fazer solicitações com o React é usar a biblioteca axios.

Neste exemplo, simplesmente revisaremos nosso exemplo do fetch instalando primeiramente o axios usando o npm:

npm install axios

Em seguida, importaremos o axios na parte superior do nosso arquivo de componente.

O que o axios nos permite fazer é usar exatamente a mesma sintaxe de promise como a do fetch – só que em vez de usar nossa primeira callback then para determinar manualmente se a resposta está ok e lançar um erro, o axios trata disso por nós.

Além disso, ele permite que, naquela primeira callback, possamos obter os dados em JSON de response.data.

O que é conveniente no uso do axios é o fato de ele ter uma sintaxe muito menor, o que permite a redução do nosso código, além de incluir várias ferramentas e recursos que o fetch não tem em sua API.

Todos esses motivos fizeram do axios a biblioteca de HTTP preferencial para os desenvolvedores em React.

3. Como fazer o fetch dos dados em React usando a sintaxe de async/await

No ES7, passou a ser possível resolver as promises usando a sintaxe async/await.

O benefício dessa sintaxe está no fato de permitir a remoção de nossas callbacks .then(), .catch() e .finally() e simplesmente retornemos nossos dados assincronamente resolvidos como se estivéssemos escrevendo código síncrono totalmente sem promises.

Em outras palavras, não precisamos mais depender de nossas callbacks ao usarmos a sintaxe async/await com o React.

Temos que estar cientes do fato de que, quando usamos o useEffect, a função de effect (o primeiro argumento) não pode ser uma função async.

Se observarmos o erro de linting que o React nos dá se tentarmos usar o Create React App para criar nosso projeto, seremos informados de que essa função não pode ser assíncrona para evitar condições de corrida.

Como resultado, em vez de fazer daquela uma função async, podemos simplesmente criar uma função async separada em nosso componente, a qual chamaremos de maneira síncrona. Ou seja, sem a palavra await antes dela.

Neste exemplo, criamos uma função async chamada getData. Ao chamarmos a função de modo síncrono usando useEffect, podemos fazer o fetch dos nossos dados do modo que esperaríamos.

4. Como fazer o fetch dos dados em React usando um hook do React personalizado (useFetch)

Com o passar do tempo, você pode perceber que fica um pouco entediante e consome tempo seguir escrevendo o hook useEffect com todo o seu boilerplate dentro de cada componente no qual você deseja fazer o fetch dos dados.

Para reduzir o nosso código reutilizado, podemos usar um hook personalizado como uma abstração especial, que podemos escrever nós mesmos a partir de uma biblioteca de terceiros (como estamos fazendo aqui, usando a biblioteca react-fetch-hook).

Um hook personalizado que faz a nossa solicitação de HTTP nos permite tornar nossos componentes mais concisos. Tudo o que precisamos fazer é chamar nosso hook na parte superior de nosso componente.

Neste caso, obtemos todos os dados, state de carregamento e de dados de que precisamos para poder usar a mesma estrutura para nosso componente como antes, mas sem ter o useEffect. Além disso, já não precisamos escrever imperativamente como resolver nossa promise a partir de nossa solicitação GET sempre que quisermos fazer uma solicitação.

5. Como fazer o fetch dos dados em React usando a biblioteca React Query

Usar os hooks personalizados é uma grande abordagem para escrever solicitações HTTP muito mais concisas para obter nossos dados e todo o state relacionado. Mas uma biblioteca que realmente leva o fetch dos dados com hooks para um novo patamar é a React Query.

A React Query não apenas permite que usemos hooks personalizados que podemos reutilizar em nossos componentes de modo conciso, mas também nos dá muitas ferramentas de gerenciamento de state para poder controlar quando, como e com que frequência fazemos o fetch dos nossos dados.

Em particular, a React Query nos dá um cache, que é possível ver abaixo, por meio das React Query Devtools. Isso permite o gerenciamento fácil das solicitações que fazemos de acordo com o valor chave que especificamos para cada solicitação.

Para as solicitações abaixo, nossa consulta por nossos dados de usuário aleatório é identificada pela string 'random-user' (fornecida como o primeiro argumento para useQuery).

Ao referenciar aquela chave, podemos fazer coisas incríveis como refetch, validar ou redefinir nossas várias consultas.

Se dependermos de nossa solução de hook personalizada ou useEffect, faremos o refetch dos nossos dados cada vez que nosso componente é montado. Fazer isso, na maioria dos casos, é desnecessário. Se nosso state externo não mudou, idealmente não precisaríamos mostrar o state de carregamento sempre que exibirmos nosso componente.

A React Query melhora nossa experiência de usuário imensamente ao tentar servir nossos dados do seu cache primeiramente e, a seguir, atualizar os dados em segundo plano para exibir alterações se o state da nossa API mudou.

Ela também nos dá um arsenal de ferramentas poderosas para gerenciar melhor nossas solicitações de acordo com a forma como nossos dados mudam durante nossa solicitação.

Por exemplo, se nossa aplicação nos permitir adicionar um usuário diferente, pode ser que queiramos fazer o refetch daquela solicitação, assim que o usuário for adicionado. Se soubermos que a consulta mudará com frequência, podemos querer especificar que ela deve ser atualizada a cada minuto ou algo assim. Ou, ainda, que ela seja atualizada sempre que o usuário focar na guia da janela.

Em resumo, a React Query é a solução de preferência não apenas para fazer solicitações de maneira concisa, mas também gerencia de modo eficiente e eficaz os dados que são retornados para nossas solicitações HTTP para nossos componentes da aplicação.

Quer guardar esse guia para referência futura?‬

Clique aqui para fazer o download da ficha informativa como um PDF bastante útil.

Aqui estão 3 sucessos que você tem rapidamente ao obter a versão para download:

• Você recebe vários trechos de código copiáveis para a reutilização fácil em seus projetos.
• É um grande guia de referência para fortalecer suas habilidades como desenvolvedor React e para entrevistas de emprego.
• Você pode pegar, usar, imprimir, ler e reler esse guia literalmente de qualquer lugar que você quiser.