Блог

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

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

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

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

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

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

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

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

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

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