[Tutorial - React] Como otimizar chamadas de API no React usando Axios e React Query

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:

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:

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:

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:

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 e do React Query 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
LinkedIn: Davi Alcântara
Github: @davialcantaraa
Site pessoal: 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

Veja também no:
Medium
Meu site