Это будет небольшой блог о том, как мы можем обнаруживать ошибки в GraphQL и централизованно обрабатывать их, чтобы вернуть пользовательский компонент на основе кодов ошибок в React Native .
Мотивация
Причина, по которой я это записываю, заключается в том, что я не мог найти никакой надлежащей документации или подхода к тому, как я могу централизованно обнаруживать и обрабатывать ошибки в любом запросе или мутации и возвращать настраиваемую страницу с ошибкой. Один из способов сделать это - написать такой запрос:
Это может работать, но его рекомендуется использовать, когда мы хотим выполнять задачи (после сбоев), уникальные для компонента / экрана. В ситуациях, когда нам нужно обрабатывать универсальные ошибки, мы не можем писать одну и ту же логику для каждого запроса / мутации. Чтобы преодолеть это, я придумал следующий подход, чтобы обработка ошибок поддерживалась и не была избыточной.
Перейдя прямо к теме, мы собираемся использовать apollo-link-error для обнаружения и обработки ошибок сети, сервера и GraphQL. Вот как должен выглядеть ваш файл конфигурации Client Connection:
Понимание приведенного выше фрагмента
Я разобью приведенный выше код для лучшего понимания. Сначала мы определяем HttpLink, где нам нужно передать конечную точку сервера GraphQL, чтобы установить соединение, затем мы определяем функцию onError, которая вызывается каждый раз, когда GraphQL выдает ошибку. подобен слушателю, который прислушивается к любым типам ошибок.
В функции onError мы создаем экземпляр клиентского кеша Apollo. При получении любой ошибки мы записываем произвольные данные в кеш клиента с помощью writeQuery. Всякий раз, когда какие-либо данные записываются в кеш (в нашем случае это записывается при возникновении ошибки), errorQuery (определенный позже в блоге) успешно выполняется, и данные передаются в основной компонент, из которого мы возвращаем нашу страницу с ошибкой. Любые изменения, которые мы вносим в кэшированные данные с помощью writeQuery, не передаются на сервер GraphQL. Если мы перезагрузим нашу среду, эти изменения исчезнут.
На следующем этапе я создал перехватчик, который добавляет заголовки ко всем моим вызовам GraphQL, здесь мы можем отправлять информацию, такую как токен аутентификации, версия приложения, идентификатор устройства и т. Д. Затем нам нужно объединить ссылку на ошибку со ссылкой Auth и HTTP. Полученная клиентская аутентификация затем передается объекту ApolloClient, который завершает процесс настройки клиентского соединения.
Возврат компонента страницы ошибки
Теперь посмотрим, как создать компонент-оболочку для обработки ошибок. Я создал компонент, который выглядит примерно так:
Когда возникает ошибка, наша errorLink получает сообщение об ошибке и записывает в кэш клиента Apollo, после чего указанный ниже errorQuery успешно получает данные на основе кода ошибки. , мы возвращаем соответствующую страницу с ошибкой.
Вот errorQuery, который вызывается из компонента Wrapper.
Поток событий
Заключение
Это подход, который я использовал для обработки ошибок сервера, сети или GraphQL в моем приложении. Не стесняйтесь подключаться и обсуждать описанный выше подход. Я надеюсь, вы найдете это полезным. Спасибо за уделенное время.
использованная литература
