Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oney/react-prefetching
Prefetch hovered links and fix fetch waterfalls in Fetch-on-Render libraries
https://github.com/oney/react-prefetching
apollo-client react react-query react-router swr
Last synced: 4 days ago
JSON representation
Prefetch hovered links and fix fetch waterfalls in Fetch-on-Render libraries
- Host: GitHub
- URL: https://github.com/oney/react-prefetching
- Owner: oney
- License: mit
- Created: 2022-07-03T09:36:38.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-03T10:22:32.000Z (over 2 years ago)
- Last Synced: 2024-12-15T04:35:44.532Z (14 days ago)
- Topics: apollo-client, react, react-query, react-router, swr
- Language: TypeScript
- Homepage:
- Size: 135 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-prefetching
[](https://www.npmjs.com/package/react-prefetching)
[](https://bundlephobia.com/result?p=react-prefetching)
[](https://github.com/oney/react-prefetching/blob/master/src/index.tsx)
[](https://github.com/oney/react-prefetching/blob/master/LICENSE)
## React Prefetching
Use this package by 3 steps to **prefetch hovered links** and **fix fetch waterfalls** to make your apps lightning fast.
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 (
A
} />
);
}
function A() {
const { isLoading, data } = useQuery("A", () => fetchA());
if (isLoading) return
Loading
;
return {data} ;
}
function B() {
const { isLoading, data } = useQuery("B", () => fetchB());
if (isLoading) return
Loading
;
return {data} ;
}
function C() {
const { isLoading, data } = useQuery("C", () => fetchC());
if (isLoading) return
Loading
;
return {data};
}
```
This app has fetch waterfalls issue and doesn't have 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 "react-prefetching";
export default function App() {
return (
// <- 1. replace BrowserRouter
A // <- 2. use Link from prefetch
} />
);
}
function A() {
const { isLoading, data } = useQuery("A", () => fetchA());
if (useIsPrefetch()) return ; // <- 3. return Child if useIsPrefetch()
if (isLoading) return
Loading
;
return {data} ;
}
function B() {
const { isLoading, data } = useQuery("B", () => fetchB());
if (useIsPrefetch()) return ; // <- 3. return Child if useIsPrefetch()
if (isLoading) return
Loading
;
return {data} ;
}
function C() {
const { isLoading, data } = useQuery("C", () => fetchC());
if (isLoading) return
Loading
;
return {data};
}
```
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.