offlineExchange.ts

import { Exchange } from 'urql';
import { fromDomEvent, subscribe, pipe, filter } from 'wonka';

export const offlineExchange = (): Exchange => ({
  forward,
  client,
}) => {
  const queue = [];

  const flushQueue = () => {
    queue.forEach(op => {
      client.reexecuteOperation(op);
    });
  }

  return ops$ => {
    pipe(
      fromDomEvent(document.body, 'online'),
      subscribe(flushQueue)
    );

    return pipe(
      ops$,
      filter(op => {
        const isOnline = navigator.onLine;
        if (!isOnline) {
          queue.push(op);
        }
        return !isOnline;
      }),
      forward,
    )
  }
}