Reactjs 一个加载屏幕用于多个React Apollo查询

我正在使用Apollo 2.1开发React本机应用程序。到目前为止，一切都很顺利

我有一个顶级组件，允许用户浏览数据页面。该组件对于正在查看的数据是不可知的

它看起来像这样：

<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

，但没有

onstart

或

onNetworkStatusChanged

事件。

通过查询，您指的是网络呼叫？@10101010我知道。对