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.