es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo renderizar errores con apollo-link-error.

29 Jul, 2023 Programación

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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ía notistack. Aquí está el código para configurarlo:

    // importar las dependencias requeridas
import { useSnackbar } from "notistack";
import { onError } from "@apollo/client/link/error";

// crear el proveedor de notistack en _app.ts
function MyApp({ Component, pageProps }) {
  const { enqueueSnackbar } = useSnackbar();
  return (
    <snackbarprovider maxsnack="{3}">
      <component {...pageprops}=""></component>
    </snackbarprovider>
  );
}

// crear el enlace de error con notistack
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
      enqueueSnackbar(`Error de GraphQL: ${message}`, { variant: "error" });
    });
  }
  if (networkError) {
    enqueueSnackbar(`Error de red: ${networkError}`, { variant: "error" });
  }
});

    Al importar el hook useSnackbar de notistack, podemos acceder a la función enqueueSnackbar que nos permite mostrar notificaciones de snackbar. Luego creamos un componente MyApp que envuelve toda la aplicación con SnackbarProvider de notistack y pasa enqueueSnackbar como una prop.

    Por último, definimos la función errorLink que maneja cualquier error de GraphQL o error de red llamando a enqueueSnackbar y pasando el mensaje de error y la prop variant establecida en "error". Esta función errorLink puede ser luego pasada al constructor de ApolloClient como un middleware para manejar los errores devueltos por GraphQL.

Comments are closed.