[Tutorial - React] Como otimizar chamadas de API no React usando Axios e React Query
Tags: react, axios, reactquery, httprequest
Published: 2023-05-24 12:12:50

Se você está desenvolvendo uma aplicação *React* que precisa realizar *chamadas de API*, é importante considerar a otimização dessas chamadas para melhorar a performance e a experiência do usuário. Neste artigo, vamos explorar como podemos utilizar as bibliotecas *Axios* e *React Query* para realizar chamadas de API de forma eficiente e otimizada.

## Configuração do Axios

O *Axios* é uma biblioteca popular para fazer *requisições HTTP* no *JavaScript*. Antes de começarmos a usá-lo, precisamos configurá-lo corretamente. Aqui está um exemplo de como você pode fazer isso:

```js
import axios from 'axios'

const api = axios.create({
	baseURL: '<http://localhost:3000/api>'
});

export async function request(options) {
	const onSuccess = (response) => {
		const { data: { message } } = response;
		return message;
	};

	const onError = () => {
		return Promise.reject(error.response);
	};

	return api(options).then(onSuccess).catch(onError);
}

```

Nesse exemplo, criamos uma instância do *Axios* com a URL base da nossa API. Em seguida, definimos uma função `request` que recebe as opções da requisição e retorna uma Promise. Essa função trata os casos de sucesso e erro da requisição.

## Criando funções para chamadas

Agora que nossa configuração do Axios está pronta, podemos criar funções para realizar chamadas específicas à nossa API. Aqui está um exemplo:

```js
import request from './api'

export class DogService {
	static getRandomDog() {
		return request({
			url: '/path',
			method: 'GET'
		});
	};

	static getAllDogs() {
		return request({
			url: '/path',
			method: 'GET'
		});
	};
}

```

Nesse exemplo, criamos uma classe `DogService` que contém métodos estáticos para realizar chamadas de API relacionadas a cachorros. Esses métodos utilizam a função `request` que definimos anteriormente.

## Configuração do React Query

Agora que estamos prontos para fazer chamadas de API de forma eficiente com o *Axios*, vamos integrar o *React Query* para gerenciar o estado dessas chamadas. O *React Query* é uma biblioteca que simplifica o gerenciamento de dados assíncronos no React.

Aqui está um exemplo de como configurar o *React Query*:

```js
import { QueryClient } from 'react-query';

const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			refetchOnWindowFocus: false,
			retry: false
		}
	}
});

```

Nesse exemplo, criamos uma instância do `QueryClient` com algumas opções padrão. Desabilitamos o recarregamento automático das consultas quando a janela está em foco (`refetchOnWindowFocus: false`) e desabilitamos a tentativa de reexecução das consultas em caso de erro (`retry: false`).

## Melhorando a performance

Além de configurar o *React Query*, podemos melhorar ainda mais a performance das chamadas de API adicionando uma opção de cache com tempo de expiração. Isso evita que as consultas sejam feitas com muita frequência, economizando recursos e reduzindo o tempo de resposta.

Aqui está um exemplo de como adicionar essa configuração nas queries do *React Query*:

```js

const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			refetchOnWindowFocus: false,
			retry: false,
			cacheTime: 60 * 1000 // Tempo de cache em milissegundos
		}
	}
});

```

Nesse exemplo, definimos `cacheTime` como 60 * 1000, o que significa que o resultado da consulta será armazenado em cache por 60 segundos.

Com essa configuração, o React Query irá armazenar em cache os resultados das chamadas de API por um determinado período de tempo, evitando consultas desnecessárias.

## Conclusão

Neste artigo, exploramos como otimizar as *chamadas de API* no *React* utilizando as bibliotecas *Axios* e *React Query*. Configuramos o *Axios* para realizar as *requisições HTTP* de forma eficiente e criamos funções para facilitar a chamada à API. Além disso, configuramos o *React Query* para gerenciar o estado das chamadas e melhorar a performance adicionando uma opção de cache.

Utilizando essas técnicas, você poderá aprimorar a performance da sua aplicação React e proporcionar uma melhor experiência aos usuários.

*Lembre-se de conferir a documentação oficial do [Axios](https://axios-http.com/ptbr/docs/intro) e do [React Query](https://tanstack.com/query/latest) para obter mais informações sobre suas funcionalidades.*

**Gostou deste artigo? Aprenda mais sobre desenvolvimento web e React comigo! Estarei postando mais conteúdos em breve. Siga-me nas redes sociais para receber mais dicas e tutoriais incríveis!**

Twitter: [@davialcantaraa](https://twitter.com/davialcantaraa)
LinkedIn: [Davi Alcântara](https://www.linkedin.com/in/davialcantara/)
Github: [@davialcantaraa](https://github.com/davialcantaraa)
Site pessoal: [davialcantara.dev](https://www.davialcantara.dev/) (em manutenção)

Comente como você tem feito suas chamadas API e compartilhe este artigo com seus amigos desenvolvedores. Até a próxima!

Quer fazer uma parceria ou um projeto? Mande-me um [e-mail](mailto:dxvialcantara@gmail.com)

Veja também no:
[Medium](https://medium.com/@dxvialcantara/tutorial-react-como-otimizar-chamadas-de-api-no-react-usando-axios-e-react-query-a5763a96749f)
[Meu site](http://localhost:3000/pt/writing/otimizar-chamadas-api-react-axios-react-query)