Apollo Client — одна из многих библиотек управления состоянием в React. Основное внимание уделяется поддержке управления состоянием для бэкэндов на основе GraphQL.
Есть много вещей, которые нравятся в Apollo Client, а именно:
- Декларативный подход
- Нормализация данных
- Политики выборки
- Декларативный способ опроса
- Декларативный способ повторной загрузки
- Управление ошибками
- Управление кешем
Все остальное гладко, но обработка состояния загрузки и состояния ошибки и соответствующих компонентов на каждом экране, где запрос GraphQL используется для предоставления этому компоненту большего шаблона и, в конечном итоге, файла, становится сложно поддерживать.
Чем сложнее обработка ошибок и состояние загрузки 😟
Взгляните на этот обычный компонент, который использует graphql
и compose
из react apollo
для составления трех разных запросов.
Этот вышеприведенный компонент имеет три разных состояния ошибки и состояния загрузки, и мы должны проверить каждое из них перед визуализацией представления с использованием правильных данных запроса, чтобы избежать сбоя. Точно так же вы обрабатываете все аналогичные компоненты в проекте. Это может быть даже 10, 20 или 100 компонентов. Звучит сложно?
Простой способ обработки ошибок и состояния загрузки 😇
Что, если я использую тот же синтаксис, что и обычные graphql
и compose
, но не для управления ошибкой и состоянием загрузки каждого запроса в каждом компоненте
Хорошо выглядит 😎 ?. Вамне нужно беспокоиться об ошибке и состоянии загрузки. commonQueryHoc
справится с этим, и вы сможете сосредоточиться на логике рендеринга, используя правильные данные.
Сравнение функций рендеринга
Код для commonQueryHOC 😍
Вы можете импортировать это
commonQueryHoc
вместоgraphql
иcompose.
ПРИВЕТ 👋! Я Ренганатха. Работаю над ReactNative, React, NodeJS в Geekyants.