error-handling - 如何防止 Apollo 客户端 useQuery 中的错误传播？

Question

我想在使用 useQuery 时捕获组件级别的错误并防止传播在@apollo/react-hook 中。
这是我的示例代码

const invitationDocument = gql`
   query DecodeInvitation($token: String!) {
       DecodeInvitation(token: $token) {
          name
          email
       }
   }
`
const InvitationPage = (props) => {
    const { data, error, loading } = useQuery(invitationDocument, {variables: { token: "XXXX" }});

    if(error)
    {
        return <InvitationErrorPage error={error.message}/>
    }

    return loading? <LoadingPage> : <InvitationAcceptPage />
}

它工作正常，但同时，错误正在传播到它的父级，所以我收到另一个错误通知消息，它​​来自全局级别的错误处理程序。
在应用程序级别，我使用 apollo-link-error 来管理 Graphql 错误。

import { onError } from 'apollo-link-error';
const errorLink = onError (({ graphqlErrors, networkError }) => {
    if(graphqlErrors)
       notification.error(graphqlErrors[0].message);
});
const client = ApolloClient({
   cache: new InMemoryCache(),
   link: ApolloLink.from([
            errorLink,
            new HttpLink({ uri: `http://localhost:8080/graphql`})
          ])
})

目前，我正在寻找一种解决方案来停止传播到顶级，以便我只能显示 InvitationErrorPage并停止在全局级别显示错误通知。

Answer 1

我还试图通过在 useQuery 上处理错误来防止错误被记录到错误链接中。钩子(Hook)并进一步深入研究 ApolloLink 文档有助于弄清楚正在发生的事情。关键的误解是错误链接不是父级或应用程序级处理程序，它是请求中间件。考虑数据如何从服务器返回是有帮助的:

因此，当您看到来自错误链接的错误通知时，它并不是从 useQuery“传播”而来的。钩子(Hook):它发生在请求路径之前 useQuery结果在客户端可用。
因此，onError错误链接的回调总是在 useQuery 中的任何错误处理代码之前调用。钩。
可能您最好的选择是使用 operation 的组合。和 graphQLErrors[x].extensions找出应该通过 Error Link 中间件传递的错误，如下所示:

const errorLink = onError(({operation, response, graphQLErrors}) => {
  if (!graphQLErrors) {
    return;
  }
  if (operation.operationName === "DecodeInvitation") {
    for (const err of graphQLErrors) {
      if (err.extensions?.code === 'UNAUTHENTICATED') {
        // Return without "notifying"
        return;
      }
    }
  }
  // Notify otherwise
  notification.error(graphqlErrors[0].message);
})