0
111
ViewsCliente Apollo GraphQL + Manejo de errores Next.JS
El componente muestra el estado de error correctamente, pero la excepción se muestra como no detectada en la consola y se muestra un diálogo en el siguiente desarrollo en el navegador. ¿Hay alguna manera de manejar los errores esperados para silenciar este comportamiento?
import { useMutation, gql } from "@apollo/client"; import { useEffect } from "react"; const CONSUME_MAGIC_LINK = gql` mutation ConsumeMagicLink($token: String!) { consumeMagicLink(token: $token) { token member { id } } } `; export default function ConsumeMagicLink({ token }) { const [consumeMagicLink, { data, loading, error }] = useMutation(CONSUME_MAGIC_LINK); console.log("DATA", data, "loading:", loading, "error:", error); useEffect(() => { try { consumeMagicLink({ variables: { token } }); } catch (e) { console.log(e); } }, []); var text = "Link has expired or has been used previously"; if (data) text = "SUCCESS: REDIRECTING"; if (loading) text = "Processing"; if (error) text = "Link has expired or has been used previously"; return ( <div> <h2>{text}</h2> </div> ); }Resultados de la consola:
Error mostrado en el navegador:
·
Juan Pablo Isaza
1 answers
Answer question0
El error es del cliente en lugar de la mutación, por lo que su intento de captura no puede detectarlo. Para manejar esto, puede agregar el manejo de errores al cliente, por ejemplo:
const errorLink = onError(({ graphQLErrors, networkError }) => { if (graphQLErrors) graphQLErrors.forEach(({ message, locations, path }) => console.log( `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`, ), ); if (networkError) console.log(`[Network error]: ${networkError}`); }); const httpLink = new HttpLink({ uri: "some invalid link" }); const client = new ApolloClient({ link:from([httpLink,errorLink]), cache: new InMemoryCache() })Y como recibió un error de autorización, le sugiero que verifique sus encabezados.
Puede encontrar información adicional y ejemplos de este enfoque aquí: ingrese la descripción del enlace aquí
·
Juan Pablo Isaza
Report
Answer question