Как справиться с ошибкой запроса Apollo Graphql в Vue.JS?

Я использую 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


graphql vue-apollo
person khushbu patel    schedule 07.07.2019    source источник
comment
Ошибка отображается как undefined?   -  person Daniel Rearden    schedule 07.07.2019
comment
@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)   -  person khushbu patel    schedule 08.07.2019
comment
@DanielRearden, я также прикрепил изображение сетевого ответа, о котором говорилось выше.   -  person khushbu patel    schedule 08.07.2019

Ответы (2)


arrow_upward
5
arrow_downward

Использование graphQLErrors

Вы можете получить ошибки, просмотрев объект ошибки для graphQLErrors:

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

or

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

Использование apollo-error-link

Вы можете использовать apollo-error-link, чтобы решить вашу проблему, если вышеуказанное не работает, здесь.

Вот пример из документации, и я добавил к нему в раздел 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 с сервера.

person David North    schedule 04.09.2019

arrow_upward
-1
arrow_downward

К сожалению, я не мог понять, как я буду обрабатывать ошибки при вызове метода graphql, но в качестве опции вы можете предоставить onError метод для ApolloClient параметров конструктора. первый аргумент - объект ошибки. надеюсь, это может помочь. вот так..

const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000',
  onError(err) {
    console.log(err)
  },
})
person Y. Russanov    schedule 12.12.2020
comment
Это не работает - person grvpanchal; 22.01.2021