Uso de React Hot Toast para desplegar errores

¿Qué son los componentes Toaster de React?

Un componente toaster en React es una utilidad esencial para mostrar notificaciones de manera efectiva en una aplicación web. Funciona como un pequeño cuadro emergente que informa a los usuarios sobre eventos importantes o actualizaciones. Este componente se utiliza comúnmente para mostrar mensajes breves, como confirmaciones de acción, errores o alertas de éxito, de una manera discreta y no intrusiva.

La clave de un buen componente toaster radica en su capacidad para proporcionar información relevante de manera rápida y legible, sin interrumpir la experiencia del usuario. Mediante animaciones suaves y opciones de personalización, los desarrolladores pueden adaptar el estilo y comportamiento del toaster para que se integre con la apariencia general de la aplicación.

React Hot Toast es una librería de React que permite mostrar mensajes emergentes. Es utilizado para mostrar mensajes de diferentes tipos como los que se usan para anunciar:

Que un proceso se completo satisfactoriamente. (success)
Que hay una alerta de algún tipo. (warning)
Que hay cierta información relevante para comunicar. (notice)
Que se generó un error. (error)

¿Cómo instalar React Hot Toast?

Para instalar toaster con npm utiliza la siguiente instrucción.

pnpm add react-hot-toast

Integrar React Hot Toast al proyect

El componente Toaster que es parte de React Hot Toast debe de estar localizado en la parte superior del proyecto, en nuestro caso en src/pages/_app.tsx.

import { ClerkProvider } from '@clerk/nextjs'
import { type AppType } from 'next/app'
import { Toaster } from 'react-hot-toast'
import '~/styles/globals.css'
import { api } from '~/utils/api'

const MyApp: AppType = ({ Component, pageProps }) => {
    return (
        <ClerkProvider {...pageProps}>
            <Toaster />
            <Component {...pageProps} />
        </ClerkProvider>
    )
}

export default api.withTRPC(MyApp)

Ahora podemos actualizar la llamada al mutator dentro de src/pages/index.tsx para que cuando esta genere un error, mostremos también un mensaje en utilizando toast.

import { toast } from 'react-hot-toast'
// ...

const CreatePostWizard = () => {
    // ...

    const { mutate, isLoading: isPosting } = api.posts.create.useMutation({
        onSuccess: () => {
            setInput('')
            void ctx.posts.getAll.invalidate()
        },
        onError: () => {
            toast.error('No se pudo publicar el post')
        },
    })

    // ...
}

Podemos configurar la posición en donde deseamos que el componente toaster se despliegue utilizando los props que este ofrece.
```
<Toaster position="bottom-center" />
```

Ahora para utilizar el error que dispara Zod al realizar la validación, podemos personalizar el mensaje de la respuesta para tomar el mensaje del error o definir uno si es que no existe.

const { mutate, isLoading: isPosting } = api.posts.create.useMutation({
    onSuccess: () => {
        setInput('')
        void ctx.posts.getAll.invalidate()
    },
    onError: (e) => {
        // obtener el error o mostrar uno por default
        const errorMessage =
            e.data?.zodError?.fieldErrors.content?.[0] ??
            'No se pudo crear el post'

        toast.error(errorMessage)
    },
})

Sin embargo al probar nos daremos cuenta que el mensaje mostrado esta en inglés, y es el mensaje genérico de la librería zod.

Abre el archivo del router posts, ve a la sección en donde se encuentra definido el input mediante zod y personaliza los mensajes de error para cada caso.

export const postsRouter = createTRPCRouter({
    // ...

    create: privateProcedure
        .input(
            z.object({
                content: z
                    .string()
                    .emoji('El contenido debe contener solo emojis')
                    .min(1, 'Utiliza al menos un emoji')
                    .max(280, 'Utiliza menos de 280 emojis'),
            })
        )
        .mutation(async ({ ctx, input }) => {
            const authorId = ctx.userId

            const { success } = await rateLimiter.limit(authorId)

            if (!success) {
                throw new TRPCError({ code: 'TOO_MANY_REQUESTS' })
            }

            await ctx.prisma.post.create({
                data: {
                    content: input.content,
                    authorId,
                },
            })
        }),
})

Finalmente personalizamos el componente CreatePostWizard moviendo el estado isPosting al área en donde se muestra el botón para alternar entre el despliegue de este y la precarga.

{
    isPosting ? (
        <button disabled>
            <Loading />
        </button>
    ) : (
        <button onClick={() => mutate({ content: input })}>Post</button>
    )
}

Mediante el uso de toast podemos enviar mensajes emergentes y asi mejorar la experiencia del usuario. En esta lección hemos aprendido a echar mano de toast para notificar los posibles errores reportados por la librería zod y un error default en su defecto.