Nuxt(Vue) 使用 $apollo.query 处理 Apollo 错误

Posted 2023-03-08

【中文标题】Nuxt(Vue) 使用 $apollo.query 处理 Apollo 错误

【英文标题】：Nuxt(Vue) Apollo error handling using $apollo.query

【发布时间】：2020-12-27 09:21:31

【问题描述】：

在我的 nuxt 应用程序中，我尝试手动调用 nuxt apollo (v. 4.0.1) 查询，并处理由此产生的错误。我已经通过查询尝试了外部 try catch 以及错误方法，但是，它似乎没有到达任何一个处理程序。

this.$apollo
        .query(
            query: baseCategoryChildren,
            variables:  id: bCat.sys.id ,
            errorPolicy: 'ignore',
            error(error, vm, key, type, options) 
                 console.log(error)
                 console.log(vm)
                 console.log(key)
                 console.log(type)
                 console.log(options)
             ,
         )

在上面的示例中，没有任何控制台日志是输出的，相反，我得到的只是控制台中默认的 Apollo 错误消息。

app.730eca1.js:2 Uncaught (in promise) Error: Network error: Response not successful: Received status code 429
    at new n (app.730eca1.js:2)
    at app.730eca1.js:2
    at app.730eca1.js:2
    at Set.forEach (<anonymous>)
    at app.730eca1.js:2
    at Map.forEach (<anonymous>)
    at t.broadcastQueries (app.730eca1.js:2)
    at app.730eca1.js:2

我正在尝试检查错误响应中的状态代码以正确处理，但我似乎无法理解代码中的错误。

知道为什么不调用错误方法吗？ 提前致谢

【参考方案1】：

您可以在 nuxt.config.js 的 apollo 部分声明一个 errorHandler

export default 
   // ===
   apollo: 
        clientConfigs: 
            default: 
                httpEndpoint: `$process.env.BASE_URL/graphql`
            
        ,
        errorHandler: '~/plugins/errorhandler.apollo.js'
    ,
   // other nuxt config like loading, css, plugins

在~/plugins/errorhandler.apollo.js 你可以有类似的东西

export default (graphqlError,  store, error, redirect, route ) => 
    console.log( graphqlError )

    const  networkError, message, gqlError, graphqlErrors  = graphqlError

    // handle error

    return error( statusCode: 503, message: message )