如何让 UI 响应 Apollo 中的订阅
How to make the UI respond to subscriptions in Apollo
我正在使用 react-apollo
作为客户端与我创建的 GraphQL 服务器进行通信。我成功地获得了使用 data.subscribeToMore()
函数的订阅,如 Apollo documentation 中所述,当我 运行 我的 Web 应用程序位于两个 [=29] 中时,最新数据显示出来=].我想要做的是让它在另一个客户端更改我当前正在查看的数据时显示通知警报,以便我可以在我不注意的情况下告诉我发生了一些变化?这样做的正确方法是什么?
update
方法?
updateQueries
方法?
dataFromObjectId
和 refetchQueries
字段似乎与我尝试做的事情无关。由于我使用的是 redux,有没有一种方法可以直接从我的订阅中发送操作?通知警报是我必须使用的东西 client.subscribe()
吗?
假设您使用的是最新版本的 Apollo,您应该为组件提供一个名为 "updateQuery" 的 prop,其中包含处理数据的逻辑。
http://dev.apollodata.com/react/subscriptions.html#subscribe-to-more
本节介绍了您需要执行的操作,但基本上您的 "updateQuery" 函数应该执行以下操作:
- 接收包含新信息的结构
argumentName.data
对象。
- 通过创建新对象将新对象添加到结果中。
- Returns 新结果对象。
所以它可能看起来像这样:
(prev, { subscriptionData }) => {
if (!subscription.data) {
//If no new data, return old results
return prev;
}
var newResults = Object.assign(
{},
prev,
queryName: { [subscriptionData.data, ...prev[queryName]] }
);
return newResults;
我正在使用 react-apollo
作为客户端与我创建的 GraphQL 服务器进行通信。我成功地获得了使用 data.subscribeToMore()
函数的订阅,如 Apollo documentation 中所述,当我 运行 我的 Web 应用程序位于两个 [=29] 中时,最新数据显示出来=].我想要做的是让它在另一个客户端更改我当前正在查看的数据时显示通知警报,以便我可以在我不注意的情况下告诉我发生了一些变化?这样做的正确方法是什么?
update
方法?updateQueries
方法?
dataFromObjectId
和 refetchQueries
字段似乎与我尝试做的事情无关。由于我使用的是 redux,有没有一种方法可以直接从我的订阅中发送操作?通知警报是我必须使用的东西 client.subscribe()
吗?
假设您使用的是最新版本的 Apollo,您应该为组件提供一个名为 "updateQuery" 的 prop,其中包含处理数据的逻辑。
http://dev.apollodata.com/react/subscriptions.html#subscribe-to-more
本节介绍了您需要执行的操作,但基本上您的 "updateQuery" 函数应该执行以下操作:
- 接收包含新信息的结构
argumentName.data
对象。 - 通过创建新对象将新对象添加到结果中。
- Returns 新结果对象。
所以它可能看起来像这样:
(prev, { subscriptionData }) => {
if (!subscription.data) {
//If no new data, return old results
return prev;
}
var newResults = Object.assign(
{},
prev,
queryName: { [subscriptionData.data, ...prev[queryName]] }
);
return newResults;