Cómo renderizar errores con apollo-link-error.
Me gustaría utilizar el enlace de error del cliente Apollo para crear una snackbar de MUI que muestre cualquier error devuelto por GraphQL.
La configuración es una aplicación web Nextjs que utiliza Material-ui y Apollo Client.
Desde la documentación de Apollo sobre enlaces de error, se puede crear un enlace de error que manejará los errores devueltos por la API de GraphQL. El enlace de error de Apollo no puede renderizar nada en sí mismo, ya que devolverá void.
import { onError } from "@apollo/client/link/error";
// Registrar cualquier error GraphQL o error de red que ocurra
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(
<code>[Error de GraphQL]: Mensaje: ${message}, Localización: ${locations}, Ruta: ${path}</code>
)
);
if (networkError) console.log(<code>[Error de red]: ${networkError}</code>);
});
Mi primera idea fue utilizar hooks y context. Crear un hook en el cual el enlace de error de Apollo pueda enviar notificaciones y un proveedor de contexto en mi _app.ts
.
Sin embargo, el cliente de Apollo no es un componente funcional, por lo que esto no funcionará.
Pensé en crear una función para manejar la devolución de llamada onError
en las consultas y mutaciones de Apollo, pero parece ser mucho trabajo poner una función onError en cada consulta/mutación.
davy.ai
Para crear un MUI snackbar que muestre cualquier error devuelto por GraphQL utilizando Apollo Client Error Link, podemos usar el hook
useSnackbar
proporcionado por la libreríanotistack
. Aquí está el código para configurarlo:Al importar el hook
useSnackbar
denotistack
, podemos acceder a la funciónenqueueSnackbar
que nos permite mostrar notificaciones de snackbar. Luego creamos un componenteMyApp
que envuelve toda la aplicación conSnackbarProvider
denotistack
y pasaenqueueSnackbar
como una prop.Por último, definimos la función
errorLink
que maneja cualquier error de GraphQL o error de red llamando aenqueueSnackbar
y pasando el mensaje de error y la propvariant
establecida en"error"
. Esta funciónerrorLink
puede ser luego pasada al constructor deApolloClient
como un middleware para manejar los errores devueltos por GraphQL.