navigator is not defined (SSR)

[kevinvugts]

Describe the bug
I am getting an error in the library which says: navigator is not defined.

To Reproduce
Steps to reproduce the behavior:

1. Just render an app on the server, use react-query and this gives me an error

Expected behavior
I would expect that react-query works like expected when you follow the docs.

Screenshots
(node:46055) UnhandledPromiseRejectionWarning: ReferenceError: navigator is not defined
at OnlineManager.isOnline (/Users/kevin/Enorm/trekhaak-labels-app/node_modules/react-query/lib/core/onlineManager.js:64:5)
at /Users/kevin/Enorm/trekhaak-labels-app/node_modules/react-query/lib/core/retryer.js:142:86
(node:46055) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
(node:46055) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Desktop (please complete the following information):

• OS: [e.g. iOS] macOS Big Sur
• Browser: [e.g. chrome, safari] Chrome 87.0.4280.88 (Officiële build) (x86_64)
• Version: [e.g. 22] Version 3.4.0 (latest version)

Additional context
It seems to happen in the newest version.
Also I notified that in combination with loadable-components library on npm, react query is malfunctioning.

[kevinvugts]

@tannerlinsley It seems to happen if you use the following options in the queryClient on the server:

• retry
• refetchOnWindowFocus

Which makes sense to me cause those options are browser options. However it's undocumented.

Loadable Components issue

However this won't fix the issue with loadable-components. The following code splitting with loadable-components stops react-query from working correctly. It'll end up in the isLoading forever and not resolve into the isError.

// Dependencies
import React from "react";
import { Route, Switch } from "react-router-dom";

// Pages
//import DefaultPage from "../pages/Default";
import loadable from "@loadable/component";

// ----> When I disable the following line and swap it for a normal import, everything is working fine.
const DefaultPage = loadable(() => import("../pages/Default"), {
  ssr: true,
});

export default () => (
  <div className="page-wrapper">
    <Switch>
      <Route path="/:slug" component={DefaultPage} />
    </Switch>
  </div>
);