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

时间:2019-07-07 18:13:45

标签: graphql vue-apollo

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

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

这是阿波罗查询,用于获取共享成员列表-

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

2 个答案:

答案 0 :(得分:2)

使用grpahqlErrors

您可以通过在错误对象中查找graphqlErrors来获取错误:

error(error) {
  console.log('errors', error.graphqlErrors)
}

error({ graphqlErrors }) {
  console.log('errors', graphqlErrors)
}

使用阿波罗错误链接

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

这是文档中的一个示例,我在networkErrors部分中添加了该示例,以显示您可以如何编辑在错误块中看到的错误消息,或者在发生突变时捕获catch。

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

答案 1 :(得分:0)

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

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