[英]Apollo subscriptions - handling WS disconnects with subscribeToMore
I've been looking for a way to handle web socket disconnects in my React app with Apollo subscriptions and have not found a way to do so.我一直在寻找一种方法来处理我的 React 应用程序中使用 Apollo 订阅的网络套接字断开连接,但还没有找到这样做的方法。 The other examples I see in the apollo documentation show the below method for catching a reconnect:
我在 apollo 文档中看到的其他示例显示了以下用于捕获重新连接的方法:
const wsClient = process.browser ? new SubscriptionClient(WSendpoint, {
reconnect: true,
}) : null;
const wsLink = process.browser ? new WebSocketLink(wsClient) : null;
if (process.browser) {
wsLink.subscriptionClient.on(
'reconnected',
() => {
console.log('reconnected')
},
)
}
There are two issues with the above method:上述方法有两个问题:
What I would like to be able to do is to is reload my "chat" component if the user either disconnects from their internet or if my express server goes down for any reason.我希望能够做的是,如果用户与互联网断开连接或者我的快速服务器因任何原因出现故障,则重新加载我的“聊天”组件。 For this to happen I would need my chat component to completely reload which i'm not sure would be possible from outside my component tree.
为此,我需要我的聊天组件完全重新加载,我不确定这是否可以从我的组件树外部进行。
Is there a method in the Query
or Subscription
Apollo components to be able to capture this event and handle it accordingly from the component? Query
或Subscription
Apollo 组件中是否有方法能够捕获此事件并从组件中相应地处理它?
There are a few ways I can think of to handle these cases but none of them are a one-shot solution, each case needs to be handled independently.我可以想到几种方法来处理这些情况,但它们都不是一次性解决方案,每种情况都需要独立处理。
online/offline
listener ( ref )online/offline
侦听器 ( ref )Apollo middleware
to handle network errors from your server ( ref )Apollo middleware
来处理来自服务器的网络错误( 参考)isOnline
for example, which can hold a global reference of your app's state.isOnline
,它可以保存应用程序状态的全局引用。 Whenever the above two methods trigger, you could update the value of isOnline
isOnline
的值isOnline
to handle the network state for each component.isOnline
来处理每个组件的网络状态。 This can be used to handle network error messages, refresh components once network is restored.You can use SubscriptionClient
callbacks from subscriptions-transport-ws
, like this:您可以使用来自
subscriptions-transport-ws
SubscriptionClient
回调,如下所示:
const ws = require("ws");
const { SubscriptionClient } = require("subscriptions-transport-ws");
const { WebSocketLink } = require("apollo-link-ws");
const { ApolloClient } = require("apollo-client");
const { InMemoryCache } = require("apollo-cache-inmemory");
const subClient = new SubscriptionClient(
'ws://localhost:4000/graphql',
{ reconnect: true },
ws
);
subClient.onConnected(() => { console.log("onConnected") });
subClient.onReconnected(() => { console.log("onReconnected") });
subClient.onReconnecting(() => { console.log("onReconnecting") });
subClient.onDisconnected(() => { console.log("onDisconnected") });
subClient.onError(error => { console.log("onError", error.message) });
const wsLink = new WebSocketLink(subClient);
const client = new ApolloClient({
link: wsLink,
cache: new InMemoryCache()
});
I'm using this for Node.js, but it will probably work for React too.我将它用于 Node.js,但它可能也适用于 React。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.