Why paused queries are not <Suspend>ed?

[chekrd]

RQ with config:
suspense: true
networkMode: online

The component that uses query is rendered without data when the browser is offline. It means the user sees useless components (layout, labels, and actions without his data). Why the query does not suspend?

See the example. In RQ devtools disable the network and click the Show component button.

[TkDodo]

because we only suspend when the query would actually fetch, and in this case, it wouldn't. It's debatable if this behaviour is correct or not. You can set networkMode: 'offlineFirst' to at least trigger one fetch, which will then suspend, then error-out (internally) and pause after the first retry.

[chekrd]

That's interesting. Do you remember the reason behind offlineFirst suspending on the first fail and retrying when the browser comes back online? I would say both modes should suspend. I think that the intended difference between online and offlineFirst is in the reaction to error:
'offlineFirst' swallows on the first fetch error and retries when online;
'online' mode doesn't fetch when offline at all and retries when online, throwing on any non-offline error

Once suspend mode is enabled, I don't expect to render a component without data being fetched no matter the networkMode.

[TkDodo]

Do you remember the reason behind offlineFirst suspending on the first fail and retrying when the browser comes back online?

Sure: it's so that you can initiate the fetch even though you are offline, when you have another cache layer like a service worker that intercepts fetch requests, or the browser cache with max-age that also works if you are offline if the cache is filled. If we wouldn't fire the request because we are offline, those scenarios wouldn't work. It's documented: https://tanstack.com/query/v4/docs/react/guides/network-mode#network-mode-offlinefirst

I would say both modes should suspend.

I honestly haven't given much thought to suspense as it's still experimental.

Once suspend mode is enabled, I don't expect to render a component without data being fetched no matter the networkMode.

That's one way to see it, on the other hand - how would you visualize that you are currently offline to the user? If we suspend and pause, you would show the suspense boundary (a loading spinner) until you're online again. Basically showing the user a loading spinner for a long time - even though you aren't really fetching.

If you don't care about that particular scenario - setting networkMode: 'offlineFirst' will give you the behaviour you're looking for. I think it's a good compromise.