Подписки Apollo — обработка отключений WS с помощью subscribeToMore

Я искал способ обработки отключений веб-сокетов в моем приложении React с подписками 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.info('reconnected')
      },
    )
  }

Есть две проблемы с вышеуказанным методом:

заключается в том, что он не улавливает, когда пользователь отключается от своего Интернета (только при перезапуске сервера по какой-либо причине)
что повторное подключение запускается вне компонентов моих приложений React.

То, что я хотел бы сделать, это перезагрузить мой компонент «чат», если пользователь либо отключится от своего Интернета, либо если мой экспресс-сервер выйдет из строя по какой-либо причине. Чтобы это произошло, мне нужно, чтобы мой компонент чата полностью перезагрузился, что, я не уверен, будет возможно из-за пределов моего дерева компонентов.

Есть ли в компонентах Query или Subscription Apollo способ захвата этого события и обработки его соответствующим образом из компонента?

javascript websocket graphql apollo

19.02.2019 10:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 715

Ответы 2

Есть несколько способов, которые я могу придумать для обработки этих случаев, но ни один из них не является одноразовым решением, каждый случай должен обрабатываться независимо.

Настройте прослушиватель online/offline (ссылка)
Настройте Apollo middleware для обработки сетевых ошибок с вашего сервера (ссылка)
Создайте переменную в своем магазине, например, isOnline, которая может содержать глобальную ссылку на состояние вашего приложения. Всякий раз, когда срабатывают два вышеуказанных метода, вы можете обновить значение isOnline
Наконец, собрать все вместе. Создайте реакцию HOC, которая использует isOnline для обработки состояния сети для каждого компонента. Это можно использовать для обработки сообщений об ошибках сети, обновления компонентов после восстановления сети.

14.03.2019 08:34

Вы можете использовать обратные вызовы SubscriptionClient из subscriptions-transport-ws, например:

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.info("onConnected") });
subClient.onReconnected(() => { console.info("onReconnected") });
subClient.onReconnecting(() => { console.info("onReconnecting") });
subClient.onDisconnected(() => { console.info("onDisconnected") });
subClient.onError(error => { console.info("onError", error.message) });

const wsLink = new WebSocketLink(subClient);

const client = new ApolloClient({
    link: wsLink,
    cache: new InMemoryCache()
});

Я использую это для Node.js, но, вероятно, это сработает и для React.

Обратите внимание, что событие subClient.onDisconnectedделает улавливает общие отключения от Интернета (очевидно, в отличие от решения в вопросе OP). Конечно, в этом случае требуется несколько секунд, чтобы обнаружить отключение. (если вы отключите Интернет на своем компьютере, вы увидите задержку перед запуском события onDisconnected)

— 08.12.2021 11:43

11.03.2021 01:52