O que Todo Dev Deve Saber sobre Consumo de APIs em React: Fetch, Axios e React Query Já leu

Entendendo APIs e a Necessidade do Consumo em React

Uma API (Application Programming Interface) é um contrato entre sistemas que permite a comunicação estruturada. Em aplicações React modernas, consumir APIs é essencial para recuperar dados de servidores, atualizar informações e manter sua aplicação sincronizada com o backend. Sem esse mecanismo, sua interface teria apenas dados estáticos.

A diferença fundamental entre as três abordagens que estudaremos está no nível de abstração: o Fetch é nativo do navegador e básico, o Axios oferece funcionalidades aprimoradas prontas para uso, e o React Query gerencia o estado da requisição de forma inteligente, cacheando dados e sincronizando automaticamente.

Fetch API: O Padrão Nativo do Navegador

O Fetch é a API padrão JavaScript para requisições HTTP. É nativa, não requer instalação e funciona bem em projetos simples.

Sintaxe Básica e Exemplos

import { useEffect, useState } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        if (!response.ok) throw new Error('Erro na resposta');
        return response.json();
      })
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Carregando...</p>;
  if (error) return <p>Erro: {error}</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UsersList;

Limitações Práticas

Embora funcional, Fetch exige muito código boilerplate para tratamento de estados. Para POST com headers customizados, a verbosidade aumenta. Além disso, não há retry automático, interceptadores ou cancelamento de requisições de forma elegante. Para projetos grandes, essas deficiências se tornam problemas.

Axios: Simplicidade e Recursos Aprimorados

Axios é uma biblioteca HTTP que abstrai Fetch com uma API mais limpa. Oferece interceptadores, transformação automática de dados e cancelamento de requisições nativamente.

Instalação e Uso Direto

npm install axios

import axios from 'axios';
import { useEffect, useState } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    axios
      .get('https://jsonplaceholder.typicode.com/users', {
        signal: controller.signal,
      })
      .then(response => {
        setUsers(response.data);
        setLoading(false);
      })
      .catch(err => {
        if (err.name !== 'CanceledError') {
          setError(err.message);
        }
        setLoading(false);
      });

    return () => controller.abort();
  }, []);

  if (loading) return <p>Carregando...</p>;
  if (error) return <p>Erro: {error}</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UsersList;

Interceptadores para Autenticação

const api = axios.create({
  baseURL: 'https://api.exemplo.com',
});

api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

Axios simplifica requisições e oferece recursos prontos, mas você ainda gerencia manualmente estado de loading, cache e sincronização.

React Query: Gerenciamento Inteligente de Dados Remotos

React Query (agora TanStack Query) é uma biblioteca que abstrai a complexidade de cache, sincronização e atualização de dados de API. Ela transforma consumo de dados remotos em uma operação declarativa.

Instalação e Configuração

npm install @tanstack/react-query

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponents />
    </QueryClientProvider>
  );
}

Hook useQuery para Leitura

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

function UsersList() {
  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: async () => {
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/users'
      );
      return response.data;
    },
    staleTime: 5 * 60 * 1000, // Cache válido por 5 minutos
  });

  if (isLoading) return <p>Carregando...</p>;
  if (error) return <p>Erro: {error.message}</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UsersList;

Hook useMutation para Criação/Atualização

import { useMutation, useQueryClient } from '@tanstack/react-query';

function CreateUser() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: async (newUser) => {
      const response = await axios.post(
        'https://jsonplaceholder.typicode.com/users',
        newUser
      );
      return response.data;
    },
    onSuccess: () => {
      // Invalida cache para refetch automático
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });

  const handleCreate = () => {
    mutation.mutate({ name: 'João', email: 'joao@email.com' });
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={mutation.isPending}>
        {mutation.isPending ? 'Criando...' : 'Criar Usuário'}
      </button>
      {mutation.error && <p>Erro: {mutation.error.message}</p>}
    </div>
  );
}

React Query elimina 80% do código boilerplate de gerenciamento de estado remoto, oferece sincronização automática, retry inteligente e cache sofisticado. Para aplicações profissionais, é o padrão ouro.

Comparação Prática e Quando Usar

Use Fetch apenas em protótipos ou aplicações muito simples. Escolha Axios se você precisa de simplicidade sem adicionar dependências pesadas. Opte por React Query em projetos com múltiplas requisições, sincronização de dados em tempo real ou quando o cache inteligente agregue valor significativo.

Conclusão

Aprendemos que o Fetch é suficiente para casos triviais, mas gera código repetitivo. O Axios resolve a verbosidade com uma API intuitiva e interceptadores, sendo excelente para a maioria dos projetos. O React Query revoluciona o gerenciamento de dados remotos, automatizando cache, sincronização e atualização — esse é o futuro do desenvolvimento React profissional.

Seu próximo passo é escolher a ferramenta adequada ao escopo do projeto e dominar sua API completamente. Comece com Axios em um projeto real, depois migre para React Query quando sentir a necessidade de cache e sincronização inteligentes.

Referências

• MDN Web Docs - Fetch API
• Documentação Oficial Axios
• TanStack Query - React Query
• React Docs - Data Fetching
• How to fetch data with React Hooks - LogRocket