A biblioteca TanStack/React-Query é uma ferramenta incrivelmente útil para desenvolvedores que procuram melhorar a performance e a usabilidade de seus aplicativos baseados em React. Com seu foco em simplicidade e eficiência, essa biblioteca permite que os desenvolvedores gerenciem facilmente as solicitações de dados em seus aplicativos, aumentando a velocidade de carregamento da página e melhorando a experiência do usuário. Neste artigo, vamos explorar alguns dos principais benefícios e recursos da biblioteca TanStack/React-Query e discutir por que ela é uma escolha tão popular para muitos desenvolvedores.

Por que Utilizar a TanStack/React-Query

Existem várias razões pelas quais você deve considerar a utilização da TanStack/React-Query em seu aplicativo React. Algumas das vantagens incluem:

Requisições HTTP Simples e Rápidas: React-Query facilita a realização de requisições HTTP em seu aplicativo, tornando-as mais rápidas e eficientes.
Gerenciamento automático de estado: não precisa se preocupar com o gerenciamento manual do estado de suas requisições API ou o cache de dados, biblioteca faz isso automaticamente.
Suporte à paginação e ao carregamento por demanda: React-Query suporta facilmente paginação e carregamento por demanda, o que significa que você pode carregar dados em partes, otimizando ainda mais a performance de seu aplicativo.

React-Query na prática

Criei um mini projeto so para exemplificar com API do github.

Primeiro eu criei um componente chamado Repository, que vai fazer o GET de todos os repositórios da minha conta do github, e chamei no App.js passando o valor do username que desejo no GET.

Para possuir acesso ao código em execução - codesandbox.io

 function Repository({ username }) {
      const { isLoading, error, data, isFetching } = useQuery({
        queryKey: ["repoData"],
        queryFn: () =>
          axios
            .get(`https://api.github.com/users/${username}/repos`)
            .then((res) => res.data)
      });
   ...

A desestruturação da constante está atribuindo as seguintes variáveis:

isLoading: um indicador booleano que indica se a consulta está atualmente sendo realizada.
error: um objeto de erro, caso ocorra algum erro durante a consulta.
data: os dados retornados pela consulta, se a consulta for bem-sucedida.
isFetching: um indicador booleano que indica se a consulta está sendo realizada.

A função useQuery recebe um objeto de configuração com duas propriedades:

queryKey: uma matriz de chaves que identificam a consulta e permitem que ela seja armazenada em cache para uso futuro.
queryFn: uma função que é executada para realizar a consulta. Nesse exemplo, é usado o método get da biblioteca axios para fazer uma requisição GET à API do GitHub e retornar os dados do usuário. O nome de usuário é passado como um parâmetro para a URL da API.

Condicionamento para Loading e Error

  if (isLoading) return "Loading...";
  if (error) return "An error has occurred: " + error.message;

A primeira condição, if (isLoading), verifica se a consulta está sendo carregada. Se for verdadeiro, o componente retorna "Loading...". Isso indica ao usuário que os dados estão sendo carregados e ainda não estão disponíveis.
A segunda condição, if (error), verifica se houve um erro na consulta. Se for verdadeiro, o componente retorna "An error has occurred: " seguido da mensagem de erro retornada pelo hook useQuery. Isso permite ao desenvolvedor depurar e corrigir problemas de consulta, bem como ao usuário entender o motivo de um erro ocorrido.

Se não houver erro e a consulta não estiver sendo carregada, o componente continuará a renderizar os dados da consulta como previsto.

Renderização do dados

    {data.map((repo) => (
        <div>
          <h3>{repo.name}</h3>
        </div>
    ))}

Para fazer a renderização utilizei o método map que tem a função de percorrer os dados retornados peça consulta.
Cada item de dados na matriz data é representado por repo, e para cada um desses itens, um elemento div é retornado que contém um título de nível 3 (h3) com o nome do repositório (repo.name).

Ferramenta de depuração para o hook useQuery

<ReactQueryDevtools initialIsOpen />

Permite ao desenvolvedor visualizar as informações da consulta, como o estado, os erros e os dados. O initialIsOpen é uma propriedade que determina se a ferramenta deve ser aberta ou fechada quando o componente é renderizado pela primeira vez.

ReactQueryDevtools

Concluindo

Esses são apenas alguns dos muitos benefícios da utilização da biblioteca TanStack/React-Query em seu aplicativo React. Além disso, ela é fácil de usar e tem uma comunidade ativa e amigável, sempre pronta para ajudar os desenvolvedores a solucionar seus problemas. Se você está procurando uma solução para melhorar a performance e a usabilidade de seu aplicativo React, então definitivamente vale a pena dar uma olhada na TanStack/React-Query. Quem sabe, você pode descobrir uma nova ferramenta valiosa que pode revolucionar o seu desenvolvimento de aplicativos. Não perca a oportunidade de explorar a tecnologia e descobrir mais sobre ela.

Trocar conhecimento

Nos últimos meses venho criando conteúdo aqui no tabnews e também no linkedin, como desenvolver vejo que estou evoluindo minha forma de estudar a aprender compartilhando aqui com vocês, se tiverem interesse em interagir chama no linkedin. TMJ 👊👊👊

[PROJETINHO] Benefícios na prática da Biblioteca TanStack/React-Query