Блог

Главная - Вопросы по программированию - Клиент Apollo GraphQL Следующий.Обработка ошибок JS

Клиент Apollo GraphQL Следующий.Обработка ошибок JS

#javascript #reactjs #next.js #apollo-client #react-apollo

Вопрос:

Компонент отображает состояние ошибки просто отлично, но исключение отображается как неперехваченное в консоли, а в следующей разработке в браузере отображается диалог. Есть ли способ справиться с ожидаемыми ошибками, чтобы подавить такое поведение?

 import { useMutation, gql } from "@apollo/client";
import { useEffect } from "react";

const CONSUME_MAGIC_LINK = gql`
  mutation ConsumeMagicLink($token: String!) {
    consumeMagicLink(token: $token) {
      token
      member {
        id
      }
    }
  }
`;

export default function ConsumeMagicLink({ token }) {
  const [consumeMagicLink, { data, loading, error }] =
    useMutation(CONSUME_MAGIC_LINK);

  console.log("DATA", data, "loading:", loading, "error:", error);

  useEffect(() => {
    try {
      consumeMagicLink({ variables: { token } });
    } catch (e) {
      console.log(e);
    }
  }, []);

  var text = "Link has expired or has been used previously";

  if (data) text = "SUCCESS: REDIRECTING";
  if (loading) text = "Processing";
  if (error) text = "Link has expired or has been used previously";

  return (
    <div>
      <h2>{text}</h2>
    </div>
  );
}

Результаты консоли:

Результаты консоли

Ошибка, отображаемая в браузере:

Модальная ошибка

Комментарии:

1. Попробуйте предоставить опцию onError для изменения использования Hook.apollographql.com/docs/react/data/mutations/#onerror


Ответ №1:

Ошибка исходит от клиента, а не от мутации, поэтому ваш try-catch не может ее поймать. Чтобы справиться с этим, вы можете добавить обработку ошибок в клиент, например:

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

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

const httpLink = new HttpLink({
  uri: "some invalid link"
});

const client = new ApolloClient({
  link:from([httpLink,errorLink]),
  cache: new InMemoryCache()
})

И поскольку вы получили ошибку авторизации, я предлагаю вам проверить свои заголовки.

Метки: