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

Question

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

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

这是用于获取共享成员列表的 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

Answer 1

使用 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。

Answer 2

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

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

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

How to handle Apollo Graphql query error in Vue.JS?

graphql

vue-apollo

使用 graphQLErrors

使用 apollo-error-link