Como integrar validação de CPF em Gatsby com funções serverless

CPFHUB_API_KEY=SUA_CHAVE_DE_API

import type { GatsbyFunctionRequest, GatsbyFunctionResponse } from 'gatsby';

export default async function handler(
    req: GatsbyFunctionRequest,
    res: GatsbyFunctionResponse
) {
    if (req.method !== 'GET') {
    return res.status(405).json({ error: 'Método não permitido' });
    }

    const cpf = (req.params.cpf || '').replace(/\D/g, '');

    if (cpf.length !== 11) {
    return res.status(400).json({ error: 'CPF deve conter 11 dígitos' });
    }

    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    try {
    const response = await fetch(`https://api.cpfhub.io/cpf/${cpf}`, {
    method: 'GET',
    headers: {
    'x-api-key': process.env.CPFHUB_API_KEY || '',
    'Accept': 'application/json'
    },
    signal: controller.signal
    });

    clearTimeout(timeoutId);

    if (!response.ok) {
    const statusMessages: Record<number, string> = {
    400: 'CPF com formato inválido',
    401: 'Chave de API inválida ou ausente',
    404: 'CPF não encontrado'
    };

    return res.status(response.status).json({
    error: statusMessages[response.status] || `Erro HTTP ${response.status}`
    });
    }

    const data = await response.json();
    return res.status(200).json(data);
    } catch (error) {
    clearTimeout(timeoutId);
    return res.status(502).json({ error: 'Timeout ou falha na conexão com a API' });
    }
}

import React, { useState } from 'react';

interface CpfResult {
    success: boolean;
    data: {
    cpf: string;
    name: string;
    nameUpper: string;
    gender: string;
    birthDate: string;
    day: number;
    month: number;
    year: number;
    };
}

export default function ValidarCpfPage() {
    const [cpfInput, setCpfInput] = useState('');
    const [resultado, setResultado] = useState<CpfResult | null>(null);
    const [erro, setErro] = useState<string | null>(null);
    const [carregando, setCarregando] = useState(false);

    async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setErro(null);
    setResultado(null);

    const cpf = cpfInput.replace(/\D/g, '');

    if (cpf.length !== 11) {
    setErro('CPF deve conter 11 dígitos');
    return;
    }

    setCarregando(true);

    try {
    const response = await fetch(`/api/cpf/${cpf}`);
    const data = await response.json();

    if (response.ok && data.success) {
    setResultado(data);
    } else {
    setErro(data.error || 'Erro na consulta');
    }
    } catch {
    setErro('Falha na conexão');
    } finally {
    setCarregando(false);
    }
    }

    return (
    <main>
    <h1>Validar CPF</h1>

    <form onSubmit={handleSubmit}>
    <label htmlFor="cpf">CPF:</label>
    <input
    type="text"
    id="cpf"
    value={cpfInput}
    onChange={(e) => setCpfInput(e.target.value)}
    placeholder="Digite o CPF"
    maxLength={14}
    required
    />
    <button type="submit" disabled={carregando}>
    {carregando ? 'Consultando...' : 'Validar'}
    </button>
    </form>

    {erro && <p style={{ color: 'red' }}>{erro}</p>}

    {resultado?.success && (
    <div>
    <h2>Resultado</h2>
    <p><strong>Nome:</strong> {resultado.data.name}</p>
    <p><strong>CPF:</strong> {resultado.data.cpf}</p>
    <p><strong>Gênero:</strong> {resultado.data.gender === 'M' ? 'Masculino' : 'Feminino'}</p>
    <p><strong>Data de Nascimento:</strong> {resultado.data.birthDate}</p>
    </div>
    )}
    </main>
    );
}

export const Head = () => <title>Validar CPF</title>;

gatsby develop

curl -X GET http://localhost:8000/api/cpf/12345678900 \
    -H "Accept: application/json"

{
    "success": true,
    "data": {
    "cpf": "12345678900",
    "name": "João da Silva",
    "nameUpper": "JOÃO DA SILVA",
    "gender": "M",
    "birthDate": "15/06/1990",
    "day": 15,
    "month": 6,
    "year": 1990
    }
}

const fetch = require('node-fetch');

exports.sourceNodes = async ({ actions, createNodeId, createContentDigest }) => {
    const { createNode } = actions;
    const cpfs = ['12345678900']; // Lista de CPFs para validar no build

    for (const cpf of cpfs) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    try {
    const response = await fetch(`https://api.cpfhub.io/cpf/${cpf}`, {
    headers: {
    'x-api-key': process.env.CPFHUB_API_KEY,
    'Accept': 'application/json'
    },
    signal: controller.signal
    });

    clearTimeout(timeoutId);
    const data = await response.json();

    if (data.success) {
    createNode({
    ...data.data,
    id: createNodeId(`cpf-${cpf}`),
    internal: {
    type: 'CpfValidado',
    contentDigest: createContentDigest(data.data)
    }
    });
    }
    } catch (error) {
    clearTimeout(timeoutId);
    console.warn(`Erro ao validar CPF ${cpf}: ${error.message}`);
    }
    }
};