{"id":15020347,"url":"https://github.com/oney/react-prefetching","last_synced_at":"2026-01-24T10:04:18.561Z","repository":{"id":65525179,"uuid":"509979237","full_name":"oney/react-prefetching","owner":"oney","description":"Prefetch hovered links and fix fetch waterfalls in Fetch-on-Render libraries","archived":false,"fork":false,"pushed_at":"2022-07-03T10:22:32.000Z","size":138,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-20T11:18:07.822Z","etag":null,"topics":["apollo-client","react","react-query","react-router","swr"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oney.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-03T09:36:38.000Z","updated_at":"2025-06-05T08:27:43.000Z","dependencies_parsed_at":"2023-01-27T08:01:31.278Z","dependency_job_id":null,"html_url":"https://github.com/oney/react-prefetching","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oney/react-prefetching","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oney%2Freact-prefetching","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oney%2Freact-prefetching/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oney%2Freact-prefetching/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oney%2Freact-prefetching/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oney","download_url":"https://codeload.github.com/oney/react-prefetching/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oney%2Freact-prefetching/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28724374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T08:27:05.734Z","status":"ssl_error","status_checked_at":"2026-01-24T08:27:01.197Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-client","react","react-query","react-router","swr"],"created_at":"2024-09-24T19:54:56.921Z","updated_at":"2026-01-24T10:04:18.547Z","avatar_url":"https://github.com/oney.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-prefetching\n\n[![npm](https://img.shields.io/npm/v/react-prefetching?style=flat-square)](https://www.npmjs.com/package/react-prefetching)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-prefetching?style=flat-square)](https://bundlephobia.com/result?p=react-prefetching)\n[![npm type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)](https://github.com/oney/react-prefetching/blob/master/src/index.tsx)\n[![GitHub](https://img.shields.io/github/license/oney/react-prefetching?style=flat-square)](https://github.com/oney/react-prefetching/blob/master/LICENSE)\n\n## React Prefetching\n\nUse this package by 3 steps to **prefetch hovered links** and **fix fetch waterfalls** to make your apps lightning fast.\n\nRead [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.\n\n## Problem\n\nAssume you have an app using `react-router-dom` and `react-query`.\n\n```tsx\nimport { useQuery } from \"react-query\";\nimport { BrowserRouter, Link, Route, Routes } from \"react-router-dom\";\n\nexport default function App() {\n  return (\n    \u003cBrowserRouter\u003e\n      \u003cRoutes\u003e\n        \u003cLink to=\"/a\"\u003eA\u003c/Link\u003e\n        \u003cRoute path=\"a\" element={\u003cA /\u003e} /\u003e\n      \u003c/Routes\u003e\n    \u003c/BrowserRouter\u003e\n  );\n}\n\nfunction A() {\n  const { isLoading, data } = useQuery(\"A\", () =\u003e fetchA());\n  if (isLoading) return \u003cp\u003eLoading\u003c/p\u003e;\n  return \u003cdiv\u003e {data} \u003cB/\u003e \u003c/div\u003e;\n}\n\nfunction B() {\n  const { isLoading, data } = useQuery(\"B\", () =\u003e fetchB());\n  if (isLoading) return \u003cp\u003eLoading\u003c/p\u003e;\n  return \u003cdiv\u003e {data} \u003cC/\u003e \u003c/div\u003e;\n}\n\nfunction C() {\n  const { isLoading, data } = useQuery(\"C\", () =\u003e fetchC());\n  if (isLoading) return \u003cp\u003eLoading\u003c/p\u003e;\n  return \u003cdiv\u003e{data}\u003c/div\u003e;\n}\n```\nThis app has fetch waterfalls issue and doesn't have prefetching feature.\n\n# Solution\n\n```\nnpm i react-prefetching\n```\n\n1. Replace `BrowserRouter` from `react-router-dom` with `PrefetchRouter` from `react-prefetching`\n2. Replace `Link` and `NavLink` from `react-router-dom` with `react-prefetching`\n3. In components, after `uesQuery`, if `useIsPrefetch()` is true, return the child components.\n\n```tsx\nimport { useQuery } from \"react-query\";\nimport { Route, Routes } from \"react-router-dom\";\nimport { Link, PrefetchRouter, useIsPrefetch } from \"react-prefetching\";\n\nexport default function App() {\n  return (\n    \u003cPrefetchRouter\u003e // \u003c- 1. replace BrowserRouter\n      \u003cRoutes\u003e\n        \u003cLink to=\"/a\"\u003eA\u003c/Link\u003e // \u003c- 2. use Link from prefetch\n        \u003cRoute path=\"a\" element={\u003cA /\u003e} /\u003e\n      \u003c/Routes\u003e\n    \u003c/PrefetchRouter\u003e\n  );\n}\n\nfunction A() {\n  const { isLoading, data } = useQuery(\"A\", () =\u003e fetchA());\n  if (useIsPrefetch()) return \u003cB /\u003e; // \u003c- 3. return Child if useIsPrefetch()\n  \n  if (isLoading) return \u003cp\u003eLoading\u003c/p\u003e;\n  return \u003cdiv\u003e {data} \u003cB /\u003e \u003c/div\u003e;\n}\n\nfunction B() {\n  const { isLoading, data } = useQuery(\"B\", () =\u003e fetchB());\n  if (useIsPrefetch()) return \u003cC /\u003e; // \u003c- 3. return Child if useIsPrefetch()\n\n  if (isLoading) return \u003cp\u003eLoading\u003c/p\u003e;\n  return \u003cdiv\u003e {data} \u003cC /\u003e \u003c/div\u003e;\n}\n\nfunction C() {\n  const { isLoading, data } = useQuery(\"C\", () =\u003e fetchC());\n  if (isLoading) return \u003cp\u003eLoading\u003c/p\u003e;\n  return \u003cdiv\u003e{data}\u003c/div\u003e;\n}\n```\n\nThen 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!\n\n## Demo\n\nCheck this [codesandbox demo](https://codesandbox.io/s/react-prefetching-4lu8fh?file=/src/Main.tsx:1402-1416) to play with it.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foney%2Freact-prefetching","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foney%2Freact-prefetching","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foney%2Freact-prefetching/lists"}