Criando um CRUD Avançado com Next.js e TanStack Query

Sempre que eu esqueço como estruturar a base de um CRUD perfeito usando o padrão de Services e Actions, eu volto neste post.

A ideia aqui não é fazer algo raso, mas sim a arquitetura real que usamos no dia a dia para lidar com filtros (QueryParams), paginação e cache usando o TanStack Query.

1. O Setup do Service (Axios)

A primeira coisa que precisamos garantir é que a instância do Axios esteja configurada corretamente para injetar o token de autenticação.

import axios from 'axios';

export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  timeout: 10000,
});

// Interceptor para injetar o Token
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('@App:token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});