docs(examples): fix offline example (#3463)

* docs(examples): remove non-existing / unused imports

* docs(examples): add missing msw dependency

and fix some more things

Author: TkDodo

examples/offline/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@tanstack/react-location": "^3.7.0",
     "ky": "^0.30.0",
+    "msw": "^0.39.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.2.0",

examples/offline/src/App.js

@@ -1,12 +1,11 @@
 import * as React from "react";
-import "./App.css";
 
 import {
   useQuery,
   QueryClient,
   MutationCache,
-  useMutation,
   onlineManager,
+  useIsHydrating,
 } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 import toast, { Toaster } from "react-hot-toast";
@@ -21,7 +20,7 @@ import {
   useMatch,
 } from "@tanstack/react-location";
 
-import * as api from "api";
+import * as api from "./api";
 import { movieKeys, useMovie } from "./movies";
 
 const persister = createWebStoragePersister({
@@ -70,37 +69,44 @@ export default function App() {
         });
       }}
     >
-      <Router
-        location={location}
-        routes={[
-          {
-            path: "/",
-            element: <List />,
-          },
-          {
-            path: ":movieId",
-            element: <Detail />,
-            errorElement: <MovieError />,
-            loader: ({ params: { movieId } }) =>
-              queryClient.getQueryData(movieKeys.detail(movieId)) ??
-              // do not load if we are offline because it returns a promise that is pending until we go online again
-              // we just let the Detail component handle it
-              (onlineManager.isOnline()
-                ? queryClient.fetchQuery(movieKeys.detail(movieId), () =>
-                    api.fetchMovie(movieId)
-                  )
-                : undefined),
-          },
-        ]}
-      >
-        <Outlet />
-        <Toaster />
-      </Router>
+      <Movies />
       <ReactQueryDevtools initialIsOpen />
     </PersistQueryClientProvider>
   );
 }
 
+function Movies() {
+  const isHydrating = useIsHydrating();
+  return (
+    <Router
+      location={location}
+      routes={[
+        {
+          path: "/",
+          element: <List />,
+        },
+        {
+          path: ":movieId",
+          element: <Detail />,
+          errorElement: <MovieError />,
+          loader: ({ params: { movieId } }) =>
+            queryClient.getQueryData(movieKeys.detail(movieId)) ??
+            // do not load if we are offline or hydrating because it returns a promise that is pending until we go online again
+            // we just let the Detail component handle it
+            (onlineManager.isOnline() && !isHydrating
+              ? queryClient.fetchQuery(movieKeys.detail(movieId), () =>
+                  api.fetchMovie(movieId)
+                )
+              : undefined),
+        },
+      ]}
+    >
+      <Outlet />
+      <Toaster />
+    </Router>
+  );
+}
+
 function List() {
   const moviesQuery = useQuery(movieKeys.list(), api.fetchMovies);
 

examples/offline/src/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
 import App from "./App";
 import { worker } from "./api";