T
TanStack•2mo ago
like-gold

Offline behaviour (V5)

I've been trying for some time using react query to enable offline support for my application. Today, I found that the V5 completely changed the behaviour, let me explain. Before, having the application offline using networkMode online, react query only fired the queries only if the application was online, even reloading the browser. Right now (V5), I found that this was not always true. If I have a service worker to cache my assets and when setting the application offline, and refresh the app, the react query triggers all the requests that belong to the page, breaking the application. How can I prevent this behaviour?
3 Replies
like-gold
like-goldOP•2mo ago
I found this thread, and I don't know if it's related or not https://discord.com/channels/719702312431386674/1272594727450968160 I found that we have this issue for some Samsung devices. Even having mobile data and wifi turned off, for react query it is still online, making the requests. Does anyone know any way to fix this?
evident-indigo
evident-indigo•2mo ago
we changed how the online / offline detection works - we no longer rely on navigator.onLine because it's so broken in chrome it's even mentioned here: https://tanstack.com/query/v5/docs/framework/react/guides/migrating-to-v5#network-status-no-longer-relies-on-the-navigatoronline-property
This should reduce the likelihood of false negatives, however, it might mean false positives for offline apps that load via serviceWorkers, which can work even without an internet connection.
my guess is with a serviceWorker in between, you'd want the offlineFirst behaviour anyways so that you can read cached requests too? if not, you need to set your own event listener to the onlineManager to track if you are offline or online: https://tanstack.com/query/v5/docs/reference/onlineManager#onlinemanagerseteventlistener you can easily revert back to checking navigator.onLine but it really wasn't reliable enough for us. There is no actually good universal way to find out if someone is online or not apart from making a fetch request and catching if that failed 😂
like-gold
like-goldOP•2mo ago
Thanks @TkDodo 🔮, I have now found the real cause. It only happens when using chromium based browsers, Android and a VPN (tailscale) enable. Agree, that makes sense My question right now is, what would be the best solution to fit most of our use cases? Most of our users use Android with a VPN, and of course, chrome. This only happens in PWA, in the browser works as expected Does it make sense to also cache the responses through the service worker? We are also using the persist feature from the react query 🤔 I believe the problem will persist because it will always interpret as the device is online when using the VPN. The only way I see to solve this is creating a custom online manager listener that will make a real request from time to time: 
import { onlineManager } from '@tanstack/react-query';

onlineManager.setEventListener((setOnline) => {
  const check = async () => {
    try {
      await fetch('/ping', { cache: 'no-store', method: 'HEAD' });
      setOnline(true);
    } catch {
      setOnline(false);
    }
  };

  window.addEventListener('online', check);
  window.addEventListener('offline', () => setOnline(false));

  const interval = setInterval(check, 30000);
  check();

  return () => {
    window.removeEventListener('online', check);
    window.removeEventListener('offline', () => setOnline(false));
    clearInterval(interval);
  };
});
import { onlineManager } from '@tanstack/react-query';

onlineManager.setEventListener((setOnline) => {
  const check = async () => {
    try {
      await fetch('/ping', { cache: 'no-store', method: 'HEAD' });
      setOnline(true);
    } catch {
      setOnline(false);
    }
  };

  window.addEventListener('online', check);
  window.addEventListener('offline', () => setOnline(false));

  const interval = setInterval(check, 30000);
  check();

  return () => {
    window.removeEventListener('online', check);
    window.removeEventListener('offline', () => setOnline(false));
    clearInterval(interval);
  };
});

Did you find this page helpful?