Configure tRPC do zero: type-safe APIs, middleware de autenticação e client setup
tRPC revoluciona desenvolvimento full-stack oferecendo type-safety completo entre client e server. Elimina bugs de integração, acelera desenvolvimento em 40% e garante APIs sempre sincronizadas com TypeScript.
Esta aula apresenta os códigos de configuração do tRPC como exemplos educacionais. Você aprenderá a estrutura, conceitos e implementação sem modificar o projeto atual. Use estes códigos como referência para seus próprios projetos SaaS.
Certifique-se que Clerk Authentication já está configurado no projeto. tRPC usará o contexto de autenticação do Clerk para proteger procedures.
Configuramos o middleware primeiro para habilitar autenticação em toda a aplicação. Isso permite que tRPC acesse rotas protegidas e contexto de usuário.
Este setup cria context reutilizável, middleware de autenticação e procedures type-safe. Padrão usado em SaaS de milhões de usuários como Vercel e Railway.
Router principal será expandido com modules específicos (messages, projects, users). Comentários mostram onde adicionar novos routers.
Provider separa server/client corretamente, evita hidration errors e garante performance otimizada com browser query client.
O último passo é envolver toda a aplicação com o TRPCReactProvider no layout principal. Isso disponibiliza os hooks tRPC em todos os componentes da aplicação.
Com tRPC configurado, agora temos uma homepage limpa e funcional que demonstra a integração das tecnologias. Esta é a estrutura base para expandir com dados dinâmicos.
Exemplo prático de como criar procedures tRPC para gerenciar assinaturas. Este router demonstra consultas protegidas, validação Zod e tratamento de erros profissional.
protectedProcedure: Garante autenticação
Validação Zod: Input type-safe
Error Handling: TRPCError padronizado
Context Access: ctx.auth.userId
Query vs Mutation: Separação correta
Service Layer: Lógica isolada
Dashboard refatorado usando tRPC hooks para consumir as procedures de assinatura. Demonstra Suspense, loading states, mutations e invalidação de cache.
useSuspenseQuery combina as vantagens de Server Components (data fetching automático) com Client Components (interatividade). Elimina loading states manuais e garante que dados estejam sempre disponíveis quando o componente renderiza.
❌ useQuery tradicional:
const { data, isLoading, error } = trpc.subscription.getCurrent.useQuery();
if (isLoading) return <Spinner />;
if (error) return <Error />;
if (!data) return <NoData />;
return <div>{data.status}</div>;✅ useSuspenseQuery:
const { data } = useSuspenseQuery(
trpc.subscription.getCurrent.queryOptions()
);
// data sempre existe! Sem checks condicionais
return <div>{data.status}</div>;useSuspenseQuery: Loading automático
useMutation: Cancelar assinatura
Cache Invalidation: UI sempre atualizada
Type Safety: Tipos automáticos do Prisma
Error Handling: Estados de loading
UX Otimizada: Confirmações e feedback
Realidade crua: TypeScript tem problemas sérios de performance em projetos grandes com tRPC. Não é performance de runtime - é o Language Server que falha. Desenvolvedores ficam reiniciando o TS Server constantemente com Cmd+Shift+R.
Inferência Excessiva: tRPC usa inferência de tipos massiva. Cada procedure é inferida do input até o output, sem definições manuais.
Problema N×N: Cada mudança recomputa TODOS os routers. Um novo endpoint força re-checagem de centenas de outros.
Cache Quebrado: Project References não funcionam adequadamente com tipos inferidos profundamente.
Alex (criador do tRPC) e Theo investiram dinheiro para contratar David Sherret (especialista em performance TS) para auditar o tRPC e descobrir o problema.
Descoberta surpreendente: O problema não era no tRPC - era um bug de performance no próprio TypeScript relacionado ao cache de tipos.
Resultado: Andarist (contribuidor lendário do TS) criou fix que reduziu instanciações de tipos em 78% em projetos tRPC.
Performance gains: Verificação de tipos 2x mais rápida, menos travamentos do Language Server, experiência mais fluida.
Com TypeScript 5.9+, tRPC tem performance muito melhor. O investimento da comunidade resolveu um problema real que afetava milhares de desenvolvedores. Hoje você pode usar tRPC em projetos grandes sem sofrer com travamentos constantes.