如何处理 Vue.JS 中的 Apollo Graphql 查询错误？

Posted 2023-02-22

【中文标题】如何处理 Vue.JS 中的 Apollo Graphql 查询错误？

【英文标题】：How to handle Apollo Graphql query error in Vue.JS?

【发布时间】：2019-11-17 08:59:39

【问题描述】：

我正在将 Vue.js 与 Vue-Apollo 一起使用，并尝试使用查询来获取共享成员列表。我在后端使用 graphQL 服务。

我正在使用 apollo 'error' 函数来处理 GraphQL 错误。当使用无效输入发出请求时，我可以在网络选项卡中看到错误，我可以看到自定义错误消息的 JSON。但我无法解决“错误”函数中的错误。

这是用于获取共享成员列表的 apollo 查询 -

apollo: 
    sharedMembers: 
      query: gql`
        query item($uuid: ID) 
          item(uuid: $uuid) 
            ...itemTemplate
            members 
              ...member
              permission
            
          
        
        $ITEM_TEMPLATE
        $MEMBER
      `,
      variables() 
        return 
          uuid: this.$route.params.uuid,
        
      ,
      update(data) 
        return data.item.members
      ,
      error(error) 
       console.log('errors', error)
      
    ,
  ,

我得到的网络响应 -

network_error

【问题讨论】：

错误是否显示为undefined？

@DanielRearden，控制台信息中没有打印任何内容。但是得到这个错误。 Error: GraphQL error: Internal server error at new ApolloError (bundle.esm.js:63) at Object.next (bundle.esm.js:1003) at notifySubscription (Observable.js:130) at onNotify (Observable.js:165) at SubscriptionObserver.next (Observable.js:219) at bundle.esm.js:865 at Set.forEach (<anonymous>) at Object.next (bundle.esm.js:865) at notifySubscription (Observable.js:130) at onNotify (Observable.js:165)

@DanielRearden，我还附上了上面有问题的网络响应图片。

【参考方案1】：

不幸的是，我不知道如何处理此类 graphql 方法调用中的错误，但作为一个选项，您可以将 onError 方法提供给 ApolloClient 构造函数选项。第一个参数是错误对象。希望它可能会有所帮助。像这样..

const apolloClient = new ApolloClient(
  uri: 'http://localhost:4000',
  onError(err) 
    console.log(err)
  ,
)

【参考方案2】：

使用 graphQLErrors

您可以通过查看 graphQLErrors 的错误对象来获取错误：

error(error) 
  console.log('errors', error.graphQLErrors)

或

error( graphQlErrors ) 
  console.log('errors', graphQLErrors)

使用 apollo-error-link

如果上述方法不起作用，您可以使用 apollo-error-link 来帮助解决您的问题，docs here。

这是文档中的一个示例，我在 networkErrors 部分中添加了该示例，以显示您可以执行哪些操作来编辑您在错误块中看到的错误消息，或者如果它是一个突变则捕获块。

import  onError  from "apollo-link-error";

const link = onError(( graphQLErrors, networkError ) => 
  if (graphQLErrors)
    graphQLErrors.map(( message, locations, path ) =>
      console.log(
        `[GraphQL error]: Message: $message, Location: $locations, Path: $path`,
      ),
    );

  if (networkError) 
    // Add something like this to set the error message to the one from the server response
    networkError.message = networkError.result.errors[0].debugMessage

    console.log(`[Network error]: $networkError`)
  ;
);

然后在你的代码中：

error(error) 
  console.log('error-message', error.message)

然后控制台应该从服务器记录您的debugMessage。