Question

考虑一个服务器，它每秒生成一个新的内容。

我们的Vue应用程序使用vue-apollo订阅了此内容

当用户断开其Internet连接时，它将恢复订阅。但是他离线时生成的数据不可用。

我想知道解决此问题的正确方法是什么。

所以我现在通过使用以下方法使阿波罗客户端成为全局对象来解决它 window.apolloClient-Websocket提供了用于更改在线状态的回调。当它更改时，我只需调用apolloClient.reFetchObservableQueries（）;

function createProvider(options = {}, store) {
  // Create apollo client
  let socket = new PhoenixSocket(`wss://${options.base.api_host}/socket`, {
    params: {
      Authorization: options.bearer || defaultOptions.getAuth()
    }      
  }) 

  socket.onClose(function(){    
    store.commit('setConnectionState', 'offline');
  });

  socket.onOpen(function(){ 
    // inside the store I call apolloClient.reFetchObservableQueries();
    store.commit('setConnectionState', 'online');
  });

  const absinthe = createAbsintheSocketLink(
    AbsintheSocket.create( socket )
  );

  const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options,
    link: absinthe
  });
  apolloClient.wsClient = wsClient;

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        // fetchPolicy: "cache-and-network",
      }
    },
    errorHandler(error) {
      // eslint-disable-next-line no-console
      console.log(
        '%cError',
        'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;',
        error.message
      );
    }
  });

  return apolloProvider;
}


const apolloProvider = createProvider({
  bearer,
  base  
}, store).provide();


new Vue({
    data() {
      return { foo: [], loading: 0 };
    },
    router,
    i18n,
    store,
    provide: apolloProvider,
    render: h => h(App)
}).$mount('#app');


window.apolloClient = apolloProvider.$apolloProvider.defaultClient;

当用户重新连接到网络套接字时，我希望他重新获取所有数据。因此他是最新的可用数据。

恢复Websocket连接后重新查询

0 个答案: