Как обработать ошибку запроса Apollo Graphql в Vue.JS?
Я использую Vue.js с Vue-Apollo и пытаюсь получить общий список участников с помощью запроса. Я использую сервис graphQL в бэкэнде.
Я использую функцию «ошибка» apollo для обработки ошибки 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.info('errors', error)
}
},
},
Сетевой ответ, который я получил -
@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, я также прикрепил изображение ответа сети выше, о котором идет речь.
Ответы 2
Использование graphQLErrors
Вы можете получить ошибки, просмотрев объект ошибки для graphQLErrors:
error(error) {
console.info('errors', error.graphQLErrors)
}
или
error({ graphQlErrors }) {
console.info('errors', graphQLErrors)
}
Использование ссылки-ошибки-аполлона
Вы можете использовать ссылку apollo-error-link, чтобы помочь решить вашу проблему, если вышеперечисленное не работает, документы здесь.
Вот пример из документов, и я добавил его в раздел networkErrors, чтобы показать, что вы можете сделать, чтобы отредактировать сообщение об ошибке, которое вы видите в своем блоке ошибок, или блок catch, если это мутация.
import { onError } from "apollo-link-error";
const link = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.map(({ message, locations, path }) =>
console.info(
`[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.info(`[Network error]: ${networkError}`)
};
});
И затем в вашем коде:
error(error) {
console.info('error-message', error.message)
}
Затем консоль должна зарегистрировать ваш debugMessage с сервера.
к сожалению, я не мог понять, как я буду обрабатывать ошибки в таком вызове метода graphql, но в качестве опции вы можете предоставить onError метод для ApolloClient параметров конструктора. первый аргумент - объект ошибки. надеюсь, это может помочь. вот так..
const apolloClient = new ApolloClient({
uri: 'http://localhost:4000',
onError(err) {
console.info(err)
},
})
Ошибка отображается как
undefined?