![](/img/trans.png)
[英]Apollo client issues in next.js , javascript, graphql, react js
[英]Apollo GraphQL Client + Next.JS Error Handling
該組件很好地呈現錯誤狀態,但異常在控制台中顯示為未捕獲,並且在瀏覽器的下一個開發中顯示對話框。 有沒有辦法處理預期的錯誤來抑制這種行為?
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>
);
}
控制台結果:
瀏覽器中顯示的錯誤:
錯誤來自客戶端而不是突變,因此您的 try-catch 無法捕獲它。 要處理此問題,您可以將錯誤處理添加到客戶端,例如:
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()
})
當您遇到授權錯誤時,我建議您檢查您的標題。
使用 nextjs,如何防止 modal 顯示 Apollo Link 中出現的每一個錯誤? 有人幫我嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.