Nuxt 和 Vue Apollo。如何通过重定向到 404/400/500 错误页面来处理 Smart Query 中的错误？我们能捕捉到这样的错误吗？

Posted 2023-03-10

【中文标题】Nuxt 和 Vue Apollo。如何通过重定向到 404/400/500 错误页面来处理 Smart Query 中的错误？我们能捕捉到这样的错误吗？

【英文标题】：Nuxt and Vue Apollo. How to handle errors inside Smart Query with redirection to 404/400/500 error page? Can we catch such errors?

【发布时间】：2021-05-16 03:55:34

【问题描述】：

对于常规的 HTTP 请求，我们可以使用 asyncData(error)... 来创建重定向

我们应该使用什么来使用 Smart Query 重定向到 400 页面？

用 Vue Apollo，我正在尝试使用

    apollo: 
        queryName: 
            prefetch: true,
            query: wrongQuery,
    
            error(errorData) 
                this.$nuxt.error(
                    statusCode: 500,
                    message: 'Error message',
                );
            ,
        ,
    ;

如果我们重新加载页面，重定向不起作用。由于服务器端渲染，我们仍然遇到错误：

使用全局错误处理程序，例如：

    // /plugins/apollo-error-handler.js
    export default ( graphQLErrors, networkError, operation, forward , nuxtContext) => 
        console.log(networkError)
        nuxtContext.error(
          statusCode: 404,
          message: 'Error message',
        );
    ;

只有错误记录有效。重定向根本不起作用。

我们有没有办法处理智能查询中的错误，例如重定向到 400 页？

我们可以在智能查询中捕捉到这样的错误吗？像 try...catch... 在 asyncData() 中防止应用崩溃。

【参考方案1】：

我找到了解决方案here！

export default function ( redirect ) 
  const link = onError(( graphQLErrors, networkError ) => 
  if (graphQLErrors) 
    graphQLErrors.map(( message ) => 
      if (`$message` === 'Unauthenticated.') 
        redirect('/login')
        // Do Something
        localStorage.setItem('logged', false)
      
    )
  
  if (networkError) 
    console.log(`[Network error]: $networkError`)
  
)
  return 
    defaultHttpLink: false,
    link: ApolloLink.from([link, createHttpLink(
      credentials: 'include',
      uri: 'http://localhost:8000/graphql',
      fetch: (uri, options) => 
        options.headers['X-XSRF-TOKEN'] = Cookies.get('XSRF-TOKEN')
        return fetch(uri, options)
      
    )]),
    cache: new InMemoryCache()
  
`

希望这个答案对您有所帮助！ 干杯！

【参考方案2】：

像这样的智能查询非常有限，所以我更喜欢在我的 Vuex 商店中处理它。不确定这是否是最佳做法，但它现在对我很有用。

async niceFancyVuexAction( dispatch ,  fancyInput ) 
  try 
    const  errors, data  = await this.app.apolloProvider.defaultClient.mutate(
      mutation: yourGraphqlMutationHere,
      errorPolicy: 'all',
      variables: 
        input: fancyInput,
      ,
    )

    if (errors) 
      return dispatch('handleErrors', 'we got some errors')
    

    dispatch('anotherNiceFancyVuexAction', data.Address.createForCompany)
    
    console.log('success !')
   catch (error) 
    // here, you could catch the error and maybe make a redirect
    dispatch('handleErrors', 'the call was not successfull')
  
,

否则，如果您觉得配置它，使用onError 链接也是一个好主意：https://www.apollographql.com/docs/react/data/error-handling/

【讨论】：

感谢您的回答。你如何处理加载状态？通过智能查询，我们可以使用 this.$apollo.loading 来显示微调器。在您的方法中我们应该使用什么？

感谢您的赏金！在这种情况下，我确实将我的 vuex 操作调用到 fetch() nuxt 挂钩中，并使用 $fetchState.pending 助手：nuxtjs.org/docs/2.x/components-glossary/pages-fetch 但也许还有一个 loading 变量可以从 graphql 调用中解构，没有检查这个。