Question

我正在使用Apollo 2.1开发一个React Native应用程序。到目前为止，一切都非常顺利。

我有一个顶层组件，允许用户浏览数据页面。该组件与正在查看的数据无关。

它看起来像这样：

<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事件。

一个加载屏幕，可处理多个React Apollo查询

0 个答案: