我如何让Apollo Client告诉我错误在代码中的什么地方发生？

Question

我正在学习React / Apollo，当我引入错误时，我的Chrome控制台中出现了典型的红色异常。但是，使用Apollo并不能像在React或其他框架中那样告诉我错误从何处开始。使用挂钩触发多个组件中的查询时，这会非常缓慢地找到问题的根源。

您使用任何技巧调试您的Apollo代码还是可以某种方式改善错误反馈？

这是我看到的：

ApolloError.ts:46 Uncaught (in promise) Error: GraphQL error: User is not authenticated
    at new ApolloError (ApolloError.ts:46)
    at QueryManager.ts:1241
    at Object.next (Observable.js:322)
    at notifySubscription (Observable.js:135)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.next (Observable.js:235)
    at observables.ts:12
    at Set.forEach (<anonymous>)
    at Object.next (observables.ts:12)
    at notifySubscription (Observable.js:135)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.next (Observable.js:235)
    at httpLink.ts:142

我正在学习React / Apollo，当我引入错误时，我的Chrome控制台中出现了典型的红色异常。但是，使用Apollo，它并不能告诉我错误在我的代码中是从哪里开始的，就像在React中一样。

Answer 1

就调试阿波罗客户端问题的通用技术而言？好吧，当使用@ apollo / react-hooks时，您将从钩子直接返回的值中获取有关错误的反馈。例如，使用useQuery钩子：

const Employee = () => {
    const { data, loading, error } = useQuery(LOAD_EMPLOYEE_DATA_QUERY);

    if (error) {
        console.error(error);

        throw error;
    }

   // ...
}

[如果在客户端或服务器上出了问题，您会在error对象中得到有关此问题的反馈。这使得调试非常简单。

有时候，事情并不是那么简单。当出现apollo-client问题时，我通常要关注的下一个地方是Apollo开发工具。它将向您显示进行了哪些查询及其结果。

最后，如果那行不通，那么我将开始通过网络标签来挖掘/(insert your graphql endpoint here)的XHR请求。如果有红色，则应查看服务器的控制台输出。
希望有帮助！