Один экран загрузки для нескольких запросов React Apollo - PullRequest
Новая
       28

Один экран загрузки для нескольких запросов React Apollo

3 голосов
/ 09 марта 2019

Я работаю над приложением React Native с Apollo 2.1. Пока что все сложилось очень хорошо.

У меня есть компонент верхнего уровня, который позволяет пользователям пролистывать страницы данных. Этот компонент не зависит от просматриваемых данных.

Это выглядит примерно так: 

<Query query={GET_AUTHORS}>
  {(loading, errors, data) =>
    <CategoryPager categories={data.authors}>
      {(author) => <AuthorDetails author={author} />}
    </CategoryPager>
  }
</Query>

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

<Query query={GET_ARTICLES}>
  {(loading, errors, data) =>
    <CategoryPager categories={data.articles}>
      {(articles) => <ArticleDetails article={article} />}
    </CategoryPager>
  }
</Query>

Это очень упрощенный (и несколько псевдокодированный) пример, но в нашем более сложном сценарии эта композиция была довольно крутой. Проблема в том, что теперь я хотел бы иметь отображение верхнего уровня, когда какой-либо из запросов загружается (или если один из них имеет ошибку).

То есть я хотел бы показать, "этот экран загружается" или "на этом экране произошла ошибка; нажмите здесь, чтобы повторить попытку."

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

Одна вещь, которую я попробовал (что я не очень хорошо продумал), - это то, что я мог использовать контекст для отслеживания некоторого состояния верхнего уровня. Затем, когда запросы изменяют состояния, они могут сообщить стеку запросов через этот контекст. Тем не менее, вы не можете изменить состояние во время перехода между состояниями. Компонент запроса предоставляет события onCompleted и onError, но не события onStarted или onNetworkStatusChanged.

...