Enviando um e-mail usando NextJS ou ReactJS com Fetch

"Um desafio seguido de muita quebra de cabeça e depois, o alivio. Obrigado The Programmer”s Hangout!"

Essa semana me deparei com um problema, era um problema simples, enviar uma requisição para um endpoint (POST) para enviar o nome do usuário e o e-mail dele, a famosa Newsletter. Em tese não tem muito segredo nesse código, você precisa pegar os valores do input e passar para o corpo da requisição para enfim depois, enviar em um formato JSON (comunicação universal).

A questão é que eu estava com um problema tão grande com o NextJS a respeito de enviar a requisição, que toda as vezes que eu clicava em enviar, ele retornava “Failed to fetch”, não entendi o porquê, isso porque estava usando console.log(error) e ele apenas informava isso e nada mais.

Graças a um usuário do Discord (gosha#6801), me informou que pelo fato de estar enviando uma requisição utilizando form, não dava tempo de enviar a requisição, já que todas as vezes, ele dava refresh na página e cancelava. A resposta para isso? Era utiliza o onSubmit={(e) => e.preventDefault()} e redirecionar o usuário quando terminasse a execução.

O que o código faz? Ao dar submit, ao invés dele dar aquele famoso refresh do formulário, ele apenas enviará e irá dar um “pausebreak”, não dando continuidade na questão de refresh, assim ficará a sua mercê do que quer fazer em seguida.

Foi de primeira, na lata, certeira. E agora, documento isso para servir de lição não apenas para mim, mas para qualquer um que estiver com dificuldade de utilizar uma requisição em NextJS ou até mesmo em React.

No final do artigo, foi o código utilizado para enviar uma requisição, caso queira reaproveitar, é só substituir o API_URL pela URL do servidor que você deseja enviar: Corpo do formulário:

<form action=”” onSubmit={(e) => e.preventDefault()}> { … conteúdo … } </form>

Vale lembrar que os alert são apenas para informar o usuário do que aconteceu. Simplesmente pegar o dado e redirecionar ele sem avisar, faria com que ele ficasse em duvida se a mensagem foi enviada mesmo ou não. Quanto ao JSON.stringify(submit), pegamos o valor do submit que nada mais que o corpo da requisição, já pegando os valores dos inputs baseado no ID (você pode capturar esses dados e colocar dentro de um useState se for algo mais dinâmico ainda e redirecionar os valores dos States ao invés do getElementByID direto, como eu fiz). Essa foi minha experiência, não estou acostumado, quebrei bastante a cabeça e espero que possa ajudar o meu eu do futuro e também a vocês.

Qualquer dúvida estou a disposição no Twitter como @yagasaki7k.

// inside a function to get values and send to API
let nome = document.getElementById('nome').value;
let email = document.getElementById('email').value;

let submit = {
    nome: nome,
    email: email
}

// send a contact message to API
fetch('API_URL', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(submit),
    })
    .then((response) => response.json())
    .then((data) => {
        console.log('Success:', data);
        alert('Mensagem enviada com sucesso!');
        window.location.href = '/';
    })
    .catch((error => {
        console.error('Error:', error);
        alert('Erro ao enviar a mensagem, tente novamente mais tarde!');
    });
});