Перезапуск запросов после восстановления соединения с Websocket - PullRequest
Новая
       19

Перезапуск запросов после восстановления соединения с Websocket

0 голосов
/ 11 июля 2019

Подумайте о сервере, который генерирует новый фрагмент контента каждую секунду.

Наше приложение Vue подписывается на этот контент, используя vue-apollo

Когда пользователь теряет подключение к Интернету, он восстанавливает подписки. Но данные, которые были сгенерированы, когда он был в автономном режиме, недоступны.

Мне интересно, как правильно решить эту проблему.

Итак, я решил это сейчас, сделав клиент apollo глобальным объектом, используя window.apolloClient - веб-сокет обеспечивает обратный вызов для изменения состояния в сети. Когда это меняется, я просто вызываю 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;

Когда пользователь повторно подключается к веб-сокету, я хочу, чтобы он перезапустил все данные. Так что он в курсе текущих доступных данных.

...