обработка ошибок сервера apollo на клиенте

Question

Что я делаю?:

Я хотел бы выдать ошибку на apollo-сервере и обработать ее на клиенте.

Примечание: Я использую промежуточное программное обеспечение apollo-link-error на apollo-client.

Сервер:

import { UserInputError } from "apollo-server";

 Mutation: {     
    someMutation : { 
     try {
       // here is some code which failed
      } catch (error) { 
// base Error class has message property by default 
// response just hold some additional informations 
       throw new UserInputError(error.message, { response });
      }
    }
  }

Клиент:

Упрощенная реализация моей мутации на клиенте

    <Mutation
       mutation={CREATE_ORDER}
     >
        {(createOrder, { loading, error }) => (
        ....
         try {
           await createOrder({  variables: {...}});
         } catch (createOrderError) {
          //  here I get Cannot read property 'data' of undefined
            console.log(createOrderError);

          }

         )}
   </Mutation>

Я получаю следующую ошибку на клиенте (в предложении catch в приведенном выше коде):

TypeError: Cannot read property 'data' of undefined
    at Mutation._this.onMutationCompleted (react-apollo.browser.umd.js:631)
    at react-apollo.browser.umd.js:586

Эта ошибка выглядит как проблема с httpLink .

Ответ : (из вкладки сети в инструментах Chrome Dev)

Из графика спецификаций:

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

Итак, я предполагаю, что мой ответ от сервера действителен. Объект данных должен быть нулевым.

Что я ожидаю, что произойдет?:

Я хотел бы получить доступ к ответу с сервера Apollo. Как мне этого добиться?

Спасибо за помощь!

Answer 1

Что нужно проверить перед доступом к данным, возвращенным в результате запроса или мутации

1. Если загрузка -> вернуть какой-либо компонент загрузчика
2. Если присутствует ошибка -> отобразить какой-либо компонент ошибки

Если не выполнено ни одно из двух вышеуказанных условий, то наверняка у вас есть данные.

Помимо этого вам нужно иметь

1. На клиенте Apollo "errorPolicy"

 const client = new ApolloClient({
    defaultOptions: {
      watchQuery: {
        errorPolicy: 'all'
      },
      query: {
        errorPolicy: 'all'
      },
      mutate: {
        errorPolicy: 'all'
      }
    },
    link,
    cache,
    connectToDevTools: true,
  })

2. Для ошибки настройки, отправленной с сервера -

Вы можете использовать formatError

const server = new ApolloServer({
  ...root,
  resolverValidationOptions: {
    requireResolversForResolveType: false,
  },
  formatError, <---------- send custom error
  formatResponse: (response, query) => formatResponse({ response, query }),
  dataSources,
  context: async ({ req, res }) => {
    const user = req.user;
    return { user, req, res };
  }
});

1028 * например *

const formatError = (error) => {
  const { extensions } = error;
  logger.error(error);

  const exception = extensions.exception ? extensions.exception : {};
  logger.error('\nStackTrace');
  logger.error(exception.stacktrace);
  exception.stacktrace = null;
  const extractedError = extractErrorFromExtention(extensions);

  return extractedError || { message: error.message, code: extensions.code, exception };
};