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

【问题标题】：Nuxt(Vue) Apollo error handling using $apollo.queryNuxt(Vue) 使用 $apollo.query 处理 Apollo 错误
【发布时间】：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

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

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

【问题讨论】：

标签： vue.js graphql nuxt.js apollo-client vue-apollo

【解决方案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 })
}

【讨论】：