react-prefetching - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "react-prefetching",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React prefetching",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -8,2 +8,100 @@ # react-prefetching
 
-## React prefetching
+## React Prefetching
+
+Use this package by 3 steps to prefetch hovered links and fix fetch waterfalls to make your apps lightning fast.
+
+You can read [this article](https://medium.com/@anokyy/the-easiest-way-to-prefetch-links-and-fix-fetch-waterfalls-in-react-query-useswr-apollo-client-or-33ae59409bf4) to know more.
+
+## Problem
+
+Assume you have an app using `react-router-dom` and `react-query`.
+
+```tsx
+import { useQuery } from "react-query";
+import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Link to="/a">A</Link>
+        <Route path="a" element={<A />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+function A() {
+  const { isLoading, data } = useQuery("A", () => fetchA());
+  if (isLoading) return <p>Loading</p>;
+  return <div> {data} <B/> </div>;
+}
+
+function B() {
+  const { isLoading, data } = useQuery("B", () => fetchB());
+  if (isLoading) return <p>Loading</p>;
+  return <div> {data} <C/> </div>;
+}
+
+function C() {
+  const { isLoading, data } = useQuery("C", () => fetchC());
+  if (isLoading) return <p>Loading</p>;
+  return <div>{data}</div>;
+}
+```
+Then your app has fetch waterfalls issue and doesn't have the prefetching feature.
+
+# Solution
+
+```
+npm i react-prefetching
+```
+
+1. Replace `BrowserRouter` from `react-router-dom` with `PrefetchRouter` from `react-prefetching`
+2. Replace `Link` and `NavLink` from `react-router-dom` with `react-prefetching`
+3. In components, after `uesQuery`, if `useIsPrefetch()` is true, return the child components.
+
+```tsx
+import { useQuery } from "react-query";
+import { Route, Routes } from "react-router-dom";
+import { Link, PrefetchRouter, useIsPrefetch } from "./Prefetch";
+
+export default function App() {
+  return (
+    <PrefetchRouter> // <- 1. replace BrowserRouter
+      <Routes>
+        <Link to="/a">A</Link> // <- 2. use Link from prefetch
+        <Route path="a" element={<A />} />
+      </Routes>
+    </PrefetchRouter>
+  );
+}
+
+function A() {
+  const { isLoading, data } = useQuery("A", () => fetchA());
+  if (useIsPrefetch()) return <B />; // <- 3. return Child if isPrefetch
+  
+  if (isLoading) return <p>Loading</p>;
+  return <div> {data} <B /> </div>;
+}
+
+function B() {
+  const { isLoading, data } = useQuery("B", () => fetchB());
+  if (useIsPrefetch()) return <C />; // <- 3. return Child if isPrefetch
+
+  if (isLoading) return <p>Loading</p>;
+  return <div> {data} <C /> </div>;
+}
+
+function C() {
+  const { isLoading, data } = useQuery("C", () => fetchC());
+  if (isLoading) return <p>Loading</p>;
+  return <div>{data}</div>;
+}
+```
+
+Then fetch waterfalls issue is totally solved and the queries will be prefetched when users hover links. That makes your frontend app look blazingly fast. No more loading spinners!
+
+## Demo
+
+Check this [codesandbox demo](https://codesandbox.io/s/react-prefetching-4lu8fh?file=/src/Main.tsx:1402-1416) to play with it.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15955

increased by22.3%

Number of lines in readme file

106

increased by1077.78%

No dependency changes