📊 Capítulo 11: Schemas com Zod & Resolvers

Especialização em Frontend com React

🗺️ A Ponte entre React Hook Form e Schemas Zod

flowchart TD
    ZOD["Schema Zod: z.object({\n  email: z.string().email(),\n  senha: z.string().min(8)\n})"]
    --> RESOLVER["zodResolver(loginSchema) (@hookform/resolvers/zod)"]
    RESOLVER --> RHF["useForm<LoginDTO>({ resolver: zodResolver(loginSchema) })"]
    RHF --> INFER["type LoginDTO = z.infer<typeof loginSchema> (Zero Duplicação de Tipos!)"]
    RHF --> SUBMIT["handleSubmit(dados => api.post('/login', dados)) (Payload Garantido!)"]

    style ZOD fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style RESOLVER fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style RHF fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style INFER fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px
    style SUBMIT fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px

🎯 Slide 1: Refinamento de Campos com .refine()

const senhaSchema = z.object({
  senha: z.string().min(8, 'Mínimo de 8 caracteres'),
  confirmacao: z.string()
}).refine((dados) => dados.senha === dados.confirmacao, {
  message: 'As senhas digitadas não conferem',
  path: ['confirmacao'] // Injeta o erro especificamente no campo de confirmação!
});

🎯 Slide 2: Coerção Automática de Tipos com z.coerce

• Como os inputs HTML sempre retornam strings, use preco: z.coerce.number().positive() para transformar a string digitada em número automaticamente!

🎯 Slide 3: Compartilhamento Frontend / Backend

• Como o Zod é TypeScript puro e roda em qualquer ambiente JS, o mesmo arquivo de schema de validação pode ser compartilhado entre o app React e a API Node.js/Fastify!