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

Question

在我的nuxt应用程序中，我尝试手动调用nuxt apollo (v.4.0.1)查询，并处理由此产生的错误。我已经尝试了外部try catch和查询中的error方法，但是这两个方法似乎都不能到达处理程序。

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)
             },
         })

在示例apove中，没有输出任何控制台日志，相反，我在控制台中得到的是默认的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

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

你知道为什么error方法没有被调用吗？提前感谢

Answer 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 })
}