如何在Apollo Client useQuery中防止错误传播？

Question

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

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钩子上处理错误来防止错误记录在错误链接中，并且进一步深入研究ApolloLink文档有助于清除正在发生的情况。关键的误解是错误链接不是父级或应用程序级的处理程序，而是请求中间件。考虑一下数据如何从服务器返回是很有帮助的：

因此，当您从错误链接中看到错误通知时，它并不是从useQuery挂钩“传播”的：它发生在请求路径中，在{strong>之前 1}}的结果在客户端上可用。

因此，将始终在useQuery钩子中的任何错误处理代码之前调用错误链接的onError回调。

您最好的选择是使用useQuery和operation的组合来确定应该通过错误链接中间件传递的错误，如下所示：

graphQLErrors[x].extensions