[
{
"path": ".codesandbox/ci.json",
"content": "{\n \"sandboxes\": [\"swr-basic-p7dg6\", \"swr-states-4une7\", \"swr-infinite-jb5bm\", \"swr-ssr-j9b2y\"],\n \"node\": \"18\",\n \"installCommand\": \"csb:install\",\n \"buildCommand\": \"csb:build\"\n}\n"
},
{
"path": ".editorconfig",
"content": "root = true\n\n[*.{js,ts,jsx,tsx}]\nindent_size = 2\nindent_style = space"
},
{
"path": ".github/CODEOWNERS",
"content": "* @shuding @huozhi\n"
},
{
"path": ".github/CODE_OF_CONDUCT.md",
"content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to make participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at coc@vercel.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality concerning the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n"
},
{
"path": ".github/CONTRIBUTING.md",
"content": "# SWR Contribution Guidelines\n\nThank you for reading this guide and we appreciate any contribution.\n\n## Ask a Question\n\nYou can use the repository's [Discussions](https://github.com/vercel/swr/discussions) page to ask any questions, post feedback, or share your experience on how you use this library.\n\n## Report a Bug\n\nWhenever you find something which is not working properly, please first search the repository's [Issues](https://github.com/vercel/swr/issues) page and make sure it's not reported by someone else already.\n\nIf not, feel free to open an issue with a detailed description of the problem and the expected behavior. And reproduction (for example a [CodeSandbox](https://codesandbox.io) link) will be extremely helpful.\n\n## Request for a New Feature\n\nFor new features, it would be great to have some discussions from the community before starting working on it. You can either create an issue (if there isn't one) or post a thread on the [Discussions](https://github.com/vercel/swr/discussions) page to describe the feature that you want to have.\n\nIf possible, you can add another additional context like how this feature can be implemented technically, what other alternative solutions we can have, etc.\n\n## Open a PR for Bugfix or Feature\n\n### Local Development with Examples\n\nTo run SWR locally, you can start it with any example in the `examples` folder. You need to set up the example and run the command in the root directory for overriding SWR and its dependencies to local assets.\n\nFirst of all, build SWR assets\n\n```sh\ncorepack enable\ncorepack pnpm install\n\npnpm watch\n```\n\nInstall dependency of the target example, for instance `examples/basic`:\n\n\n```sh\n# by default it will run next dev for the example\npnpm next dev examples/basic\n```\n\nAll examples are built with Next.js, so Next.js commands are all supported:\n\n```sh\n# if you want to build and start\npnpm next build examples/basic\npnpm next start examples/basic\n```\n## Update Documentation\n\nTo update the [SWR Documentation](https://swr.vercel.app), you can contribute to the [website repository](https://github.com/vercel/swr-site).\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"content": "---\nname: Bug report\nabout: Create a bug report for the SWR library\n---\n\n# Bug report\n\n## Description / Observed Behavior\n\nWhat kind of issues did you encounter with SWR?\n\n## Expected Behavior\n\nHow did you expect SWR to behave here?\n\n## Repro Steps / Code Example\n\nOr share your code snippet or a [CodeSandbox](https://codesandbox.io) link is also appreciated!\n\n## Additional Context\n\nSWR version. \nAdd any other context about the problem here.\n\n"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"content": "blank_issues_enabled: false\ncontact_links:\n - name: Ask Question\n url: https://github.com/vercel/swr/discussions\n about: Ask questions and discuss with other community members\n"
},
{
"path": ".github/SECURITY.md",
"content": "# Reporting Security Issues\n\nIf you believe you have found a security vulnerability in SWR, we encourage you to let us know right away.\n\nWe will investigate all legitimate reports and do our best to quickly fix the problem.\n\nEmail `security@vercel.com` to disclose any security vulnerabilities.\n\nhttps://vercel.com/security\n"
},
{
"path": ".github/workflows/install/action.yml",
"content": "name: 'Install'\ndescription: 'Set up and install dependencies'\nruns:\n using: composite\n steps:\n - name: Setup pnpm\n uses: pnpm/action-setup@v4\n\n - name: Lock Corepack version\n shell: bash\n run: pnpm i -g corepack@0.31.0\n\n - name: Use Node.js lts\n uses: actions/setup-node@v4\n with:\n node-version: 22\n cache: pnpm\n registry-url: 'https://registry.npmjs.org'\n\n - name: Install Dependencies\n shell: bash\n run: |\n corepack enable\n node -v\n pnpm -v\n pnpm install\n"
},
{
"path": ".github/workflows/test-canary.yml",
"content": "name: Test React Canary\n\non:\n workflow_dispatch:\n schedule:\n - cron: '0 0 * * *'\n\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install\n uses: ./.github/workflows/install\n\n - name: Install Canary\n run: corepack pnpm upgrade react@canary react-dom@canary use-sync-external-store@canary\n\n - name: Lint and test\n env:\n TEST_REACT_CANARY: 1\n run: |\n pnpm clean\n pnpm build\n pnpm test\n pnpm test:build\n pnpm test-typing\n"
},
{
"path": ".github/workflows/test-legacy-react.yml",
"content": "name: Test React 17\n\non:\n push:\n branches:\n - main\n tags:\n - v*\n pull_request:\n\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install\n uses: ./.github/workflows/install\n\n - name: Test\n env:\n TEST_REACT_LEGACY: 1\n run: |\n pnpm clean\n pnpm build\n pnpm test\n pnpm test:build\n pnpm test-typing\n"
},
{
"path": ".github/workflows/test-release.yml",
"content": "name: Test and Release\n\non:\n push:\n branches:\n - main\n tags:\n - v*\n pull_request:\n\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install\n uses: ./.github/workflows/install\n\n - name: Lint and test\n run: |\n pnpm clean\n pnpm build\n pnpm run-all-checks\n npm pack\n pnpm attw\n pnpm test\n pnpm test:build\n pnpm test-typing\n e2e:\n runs-on: ubuntu-latest\n container:\n image: mcr.microsoft.com/playwright:v1.57.0-noble\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install\n uses: ./.github/workflows/install\n\n - name: E2E Tests\n run: |\n pnpm clean\n pnpm build\n pnpm build:e2e\n pnpm test:e2e\n - name: Upload test results\n if: always()\n uses: actions/upload-artifact@v4\n with:\n name: playwright-report\n path: playwright-report\n release:\n runs-on: ubuntu-latest\n needs: [\"test\", \"e2e\"]\n if: startsWith(github.ref, 'refs/tags/v')\n permissions:\n id-token: write\n steps:\n - name: Check out\n uses: actions/checkout@v4\n\n - name: Install\n uses: ./.github/workflows/install\n\n - name: Determine tag\n id: determine_tag\n run: |\n echo \"tag=$(echo $GITHUB_REF | grep -Eo 'alpha|beta|canary|rc')\" >> $GITHUB_OUTPUT\n\n - name: Publish to versioned tag\n if: steps.determine_tag.outputs.tag != ''\n run: |\n echo \"Publishing to ${{ steps.determine_tag.outputs.tag }} tag\"\n npm publish --access public --no-git-checks --provenance --tag ${{ steps.determine_tag.outputs.tag }}\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }}\n\n - name: Publish to latest\n if: steps.determine_tag.outputs.tag == ''\n run: |\n echo \"Publishing to latest\"\n npm publish --access public --no-git-checks --provenance\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }}\n"
},
{
"path": ".github/workflows/trigger-release.yml",
"content": "on:\n workflow_dispatch:\n inputs:\n releaseType:\n description: Release stable or beta?\n required: true\n type: choice\n options:\n - beta\n - stable\n\n semverType:\n description: semver type?\n type: choice\n options:\n - patch\n - minor\n - major\n\nname: Trigger Release\n\nenv:\n SEMVER_TYPE: ${{ github.event.inputs.semverType }}\n RELEASE_TYPE: ${{ github.event.inputs.releaseType }}\n\njobs:\n start:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n with:\n fetch-depth: 10\n token: ${{ secrets.RELEASE_BOT_GITHUB_TOKEN }}\n - name: Install\n uses: ./.github/workflows/install\n - name: Test\n run: |\n pnpm clean\n pnpm build\n pnpm run-all-checks\n pnpm test:build\n\n - name: Configure git\n run: |\n git config user.name \"vercel-release-bot\"\n git config user.email \"infra+release@vercel.com\"\n\n - name: Bump version and tag\n run: |\n node ./scripts/bump-next-version.js\n\n - name: Git push\n run: |\n git push origin main\n git push origin --tags\n"
},
{
"path": ".gitignore",
"content": "node_modules\ndist\n*.log\n*.tgz\n.env\n.next\n.DS_Store\n.idea\n.vscode\n.eslintcache\nexamples/**/yarn.lock\npackage-lock.json\n*.tsbuildinfo\ncoverage\n.rollup.cache\nplaywright-report\ntest-results"
},
{
"path": ".husky/pre-commit",
"content": "pnpm lint-staged && pnpm types:check\n"
},
{
"path": ".npmrc",
"content": "# prevent sub-packages from installing peer-deps (multiple react versions)\nauto-install-peers=false"
},
{
"path": ".swcrc",
"content": "{\n \"$schema\": \"https://json.schemastore.org/swcrc\",\n \"sourceMaps\": true,\n \"jsc\": {\n \"parser\": {\n \"syntax\": \"typescript\",\n \"tsx\": true\n },\n \"transform\": {\n \"react\": {\n \"runtime\": \"automatic\"\n }\n }\n }\n}\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2023 Vercel, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "[](https://swr.vercel.app)\n\n
\n\n## Introduction\n\nSWR is a React Hooks library for data fetching.\n\nThe name “**SWR**” is derived from `stale-while-revalidate`, a cache invalidation strategy popularized by [HTTP RFC 5861](https://tools.ietf.org/html/rfc5861).\n**SWR** first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again.\n\nWith just one hook, you can significantly simplify the data fetching logic in your project. And it also covered in all aspects of speed, correctness, and stability to help you build better experiences:\n\n- **Fast**, **lightweight** and **reusable** data fetching\n- Transport and protocol agnostic\n- Built-in **cache** and request deduplication\n- **Real-time** experience\n- Revalidation on focus\n- Revalidation on network recovery\n- Polling\n- Pagination and scroll position recovery\n- SSR and SSG\n- Local mutation (Optimistic UI)\n- Built-in smart error retry\n- TypeScript\n- React Suspense\n- React Native\n\n...and a lot more.\n\nWith SWR, components will get **a stream of data updates constantly and automatically**. Thus, the UI will be always **fast** and **reactive**.\n\n---\n\n**View full documentation and examples on [swr.vercel.app](https://swr.vercel.app).**\n\n \n\n## Quick Start\n\n```js\nimport useSWR from 'swr'\n\nfunction Profile() {\n const { data, error, isLoading } = useSWR('/api/user', fetcher)\n\n if (error) return
failed to load
\n if (isLoading) return
loading...
\n return
hello {data.name}!
\n}\n```\n\nIn this example, the React Hook `useSWR` accepts a `key` and a `fetcher` function.\nThe `key` is a unique identifier of the request, normally the URL of the API. And the `fetcher` accepts\n`key` as its parameter and returns the data asynchronously.\n\n`useSWR` also returns 3 values: `data`, `isLoading` and `error`. When the request (fetcher) is not yet finished,\n`data` will be `undefined` and `isLoading` will be `true`. When we get a response, it sets `data` and `error` based on the result\nof `fetcher`, `isLoading` to false and rerenders the component.\n\nNote that `fetcher` can be any asynchronous function, you can use your favourite data-fetching\nlibrary to handle that part.\n\n---\n\n**View full documentation and examples on [swr.vercel.app](https://swr.vercel.app).**\n\n \n\n## Authors\n\nThis library is created by the team behind [Next.js](https://nextjs.org), with contributions from our community:\n\n- Shu Ding ([@shuding\\_](https://x.com/shuding_)) - [Vercel](https://vercel.com)\n- Jiachi Liu ([@huozhi](https://x.com/huozhi)) - [Vercel](https://vercel.com)\n- Guillermo Rauch ([@rauchg](https://x.com/rauchg)) - [Vercel](https://vercel.com)\n- Joe Haddad ([@timer150](https://x.com/timer150)) - [Vercel](https://vercel.com)\n- Paco Coursey ([@pacocoursey](https://x.com/pacocoursey)) - [Vercel](https://vercel.com)\n\n[Contributors](https://github.com/vercel/swr/graphs/contributors)\n\nThanks to Ryan Chen for providing the awesome `swr` npm package name!\n\n \n\n## License\n\nThe MIT License.\n"
},
{
"path": "_internal/package.json",
"content": "{\n \"main\": \"../dist/_internal/index.js\",\n \"module\": \"../dist/_internal/index.mjs\",\n \"types\": \"../dist/_internal/index.d.ts\",\n \"private\": true\n}\n"
},
{
"path": "e2e/site/README.md",
"content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
},
{
"path": "e2e/site/app/basic-ssr/block.tsx",
"content": "'use client'\n\nimport useSWR from 'swr'\nimport { useDebugHistory } from '~/lib/use-debug-history'\n\nexport default function Block() {\n const { data } = useSWR('/api/data', async (url: string) => {\n const res = await fetch(url).then(v => v.json())\n return res.name\n })\n const debugRef = useDebugHistory(data, 'history:')\n return (\n <>\n \n
result:{data || 'undefined'}
\n \n )\n}\n"
},
{
"path": "e2e/site/app/basic-ssr/page.tsx",
"content": "import Block from './block'\n\nexport default function BasicSSRPage() {\n return \n}\n"
},
{
"path": "e2e/site/app/concurrent-transition/page.tsx",
"content": "'use client'\n\nimport { Suspense } from 'react'\nimport dynamic from 'next/dynamic'\n\nconst TransitionDemo = dynamic(() => import('./transition-demo'), {\n ssr: false\n})\n\nexport default function ConcurrentTransitionPage() {\n return (\n
\n
React 19 Concurrent Transition Test
\n
\n This page tests SWR's behavior with React 19 concurrent\n transitions. When using useTransition, SWR should "pause"\n loading states to provide smooth UX.\n
\n Loading page...
}>\n \n \n \n )\n}\n"
},
{
"path": "e2e/site/app/concurrent-transition/transition-demo.tsx",
"content": "'use client'\n\nimport React, { useState, useTransition, Suspense, useCallback } from 'react'\nimport useSWR from 'swr'\n\n// Simulate API data fetching with delay\nconst fetcher = async (key: string): Promise => {\n // Slightly longer delay to make transition behavior more observable\n await new Promise(resolve => setTimeout(resolve, 150))\n return key\n}\n\n// Component that uses SWR with suspense\nfunction DataComponent({ swrKey }: { swrKey: string }) {\n const { data } = useSWR(swrKey, fetcher, {\n dedupingInterval: 0,\n suspense: true,\n // React 19 improvements for concurrent features\n keepPreviousData: false\n })\n\n return data:{data}\n}\n\nexport default function TransitionDemo() {\n const [isPending, startTransition] = useTransition()\n const [key, setKey] = useState('initial-key')\n\n const handleTransition = useCallback(() => {\n startTransition(() => {\n setKey('new-key')\n })\n }, [])\n\n return (\n
\n
React 19 Concurrent Transition Demo
\n \n
isPending:{isPending ? '1' : '0'}
\n loading}\n >\n \n \n
\n Click to test concurrent transition behavior\n
\n
\n \n )\n}\n"
},
{
"path": "e2e/site/app/issue-2702/page.tsx",
"content": "import Comp from './reproduction'\n\nexport default function Page() {\n return (\n
\n}\n/**\n * This renders 10,000 divs and is used to compare against the render performance\n * when using swr.\n */\nconst CheapComponent = () => {\n const cheapComponents = Array.from({ length: elementCount }, (_, i) => (\n
{i}
\n ))\n return (\n
\n
Cheap Component
\n {cheapComponents}\n
\n )\n}\n\n/**\n * This renders 10,000 divs, each of which uses the same swr hook.\n */\nconst ExpensiveComponent = () => {\n const hookComponents = Array.from({ length: elementCount }, (_, i) => (\n \n ))\n return (\n
\n \n )\n}\n"
},
{
"path": "e2e/site/app/render-count/page.tsx",
"content": "'use client'\nimport useSWR from 'swr'\n\nexport default function Page() {\n useSWR('swr should not cause extra rerenders')\n console.count('render')\n return
\n )\n}\n"
},
{
"path": "examples/axios/README.md",
"content": "# Axios\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/axios)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/axios\ncd axios\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nShow a basic usage of SWR fetching using axios and a request object.\n"
},
{
"path": "examples/axios/libs/useRequest.js",
"content": "import useSWR from 'swr'\nimport axios from 'axios'\n\nexport default function useRequest(request, { fallbackData, ...config } = {}) {\n return useSWR(\n request,\n () => axios(request || {}).then(response => response.data),\n {\n ...config,\n fallbackData: fallbackData && {\n status: 200,\n statusText: 'InitialData',\n headers: {},\n data: fallbackData\n }\n }\n ) \n}\n"
},
{
"path": "examples/axios/package.json",
"content": "{\n \"name\": \"basic\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"axios\": \"0.27.2\",\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/axios/pages/[user]/[repo].js",
"content": "import Link from 'next/link'\n\nimport useRequest from '../../libs/useRequest'\n\nexport default function Repo() {\n const id =\n typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''\n const { data } = useRequest(\n id\n ? {\n url: '/api/data',\n params: {\n id\n }\n }\n : null\n )\n\n return (\n
\n
{id}
\n {data ? (\n
\n
forks: {data.forks_count}
\n
stars: {data.stargazers_count}
\n
watchers: {data.watchers}
\n
\n ) : (\n 'loading...'\n )}\n \n \n \n Back\n \n
\n )\n}\n"
},
{
"path": "examples/axios/pages/api/data.js",
"content": "import axios from 'axios'\n\nconst projects = [\n 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js'\n]\n\nexport default function api(req, res) {\n if (req.query.id) {\n // a slow endpoint for getting repo data\n axios(`https://api.github.com/repos/${req.query.id}`)\n .then(resp => resp.data)\n .then(data => {\n setTimeout(() => {\n res.json(data)\n }, 2000)\n })\n return\n }\n setTimeout(() => {\n res.json(projects)\n }, 2000)\n}\n"
},
{
"path": "examples/axios/pages/index.js",
"content": "import Link from 'next/link'\n\nimport useRequest from '../libs/useRequest'\n\nexport default function Index() {\n const { data } = useRequest({\n url: '/api/data'\n })\n\n return (\n
\n
Trending Projects
\n
\n {data\n ? data.map(project => (\n
\n \n {project}\n \n
\n ))\n : 'loading...'}\n
\n
\n )\n}\n"
},
{
"path": "examples/axios-typescript/README.md",
"content": "# Axios TypeScript\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/axios-typescript)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/axios-typescript\ncd axios-typescript\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nShow how to use the basic axios along with TypeScript to type both the request object and the data received from SWR.\n"
},
{
"path": "examples/axios-typescript/libs/useRequest.ts",
"content": "import useSWR, { SWRConfiguration, SWRResponse } from 'swr'\nimport axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'\n\nexport type GetRequest = AxiosRequestConfig | null\n\ninterface Return\n extends Pick<\n SWRResponse, AxiosError>,\n 'isValidating' | 'error' | 'mutate'\n > {\n data: Data | undefined\n response: AxiosResponse | undefined\n}\n\nexport interface Config\n extends Omit<\n SWRConfiguration, AxiosError>,\n 'fallbackData'\n > {\n fallbackData?: Data\n}\n\nexport default function useRequest(\n request: GetRequest,\n { fallbackData, ...config }: Config = {}\n): Return {\n const {\n data: response,\n error,\n isValidating,\n mutate\n } = useSWR, AxiosError>(\n request,\n /**\n * NOTE: Typescript thinks `request` can be `null` here, but the fetcher\n * function is actually only called by `useSWR` when it isn't.\n */\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n () => axios.request(request!),\n {\n ...config,\n fallbackData: fallbackData && {\n status: 200,\n statusText: 'InitialData',\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n config: request!,\n headers: {},\n data: fallbackData\n } as AxiosResponse\n }\n )\n\n return {\n data: response && response.data,\n response,\n error,\n isValidating,\n mutate\n }\n}\n"
},
{
"path": "examples/axios-typescript/next-env.d.ts",
"content": "/// \n/// \n/// \n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
},
{
"path": "examples/axios-typescript/package.json",
"content": "{\n \"name\": \"basic-typescript\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"axios\": \"0.23.0\",\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n },\n \"devDependencies\": {\n \"@types/node\": \"16.7.2\",\n \"@types/react\": \"17.0.19\",\n \"typescript\": \"4.3.5\"\n }\n}\n"
},
{
"path": "examples/axios-typescript/pages/[user]/[repo].tsx",
"content": "import Link from 'next/link'\n\nimport useRequest from '../../libs/useRequest'\n\nexport default function Repo() {\n const id =\n typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''\n const { data } = useRequest<{\n forks_count: number\n stargazers_count: number\n watchers: number\n }>({\n url: '/api/data',\n params: { id }\n })\n\n return (\n
\n
{id}
\n {data ? (\n
\n
forks: {data.forks_count}
\n
stars: {data.stargazers_count}
\n
watchers: {data.watchers}
\n
\n ) : (\n 'loading...'\n )}\n \n \n Back\n
\n )\n}\n"
},
{
"path": "examples/axios-typescript/pages/api/data.ts",
"content": "import { NextApiRequest, NextApiResponse } from 'next'\nimport axios from 'axios'\n\nconst projects = [\n 'facebook/flipper',\n 'vuejs/vuepress',\n 'rust-lang/rust',\n 'vercel/next.js'\n]\n\nexport default function api(req: NextApiRequest, res: NextApiResponse) {\n if (req.query.id) {\n // a slow endpoint for getting repo data\n axios(`https://api.github.com/repos/${req.query.id}`)\n .then(response => response.data)\n .then(data => {\n setTimeout(() => {\n res.json(data)\n }, 2000)\n })\n\n return\n }\n setTimeout(() => {\n res.json(projects)\n }, 2000)\n}\n"
},
{
"path": "examples/axios-typescript/pages/index.tsx",
"content": "import Link from 'next/link'\n\nimport useRequest from '../libs/useRequest'\n\nexport default function Index() {\n const { data } = useRequest({\n url: '/api/data'\n })\n\n return (\n
\n
Trending Projects
\n
\n {data\n ? data.map(project => (\n
\n \n {project}\n \n
\n ))\n : 'loading...'}\n
\n
\n )\n}\n"
},
{
"path": "examples/axios-typescript/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\"\n },\n \"exclude\": [\n \"node_modules\"\n ],\n \"include\": [\n \"next-env.d.ts\",\n \"**/*.ts\",\n \"**/*.tsx\"\n ]\n}\n"
},
{
"path": "examples/basic/README.md",
"content": "# Basic\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/basic)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/basic\ncd basic\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nShow a basic usage of SWR fetching data from an API in two different pages.\n"
},
{
"path": "examples/basic/libs/fetch.js",
"content": "export default async function fetcher(...args) {\n const res = await fetch(...args)\n return res.json()\n}\n"
},
{
"path": "examples/basic/package.json",
"content": "{\n \"name\": \"basic\",\n \"private\": true,\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/basic/pages/[user]/[repo].js",
"content": "import Link from 'next/link'\nimport fetch from '../../libs/fetch'\n\nimport useSWR from 'swr'\n\nexport default function Repo() {\n const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''\n const { data } = useSWR('/api/data?id=' + id, fetch)\n\n return (\n
\n
{id}
\n {\n data ?
\n
forks: {data.forks_count}
\n
stars: {data.stargazers_count}
\n
watchers: {data.watchers}
\n
: 'loading...'\n }\n \n \n Back\n
\n )\n}\n"
},
{
"path": "examples/basic/pages/api/data.js",
"content": "const projects = [\n 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js'\n]\n\nexport default function api(req, res) {\n if (req.query.id) {\n // a slow endpoint for getting repo data\n fetch(`https://api.github.com/repos/${req.query.id}`)\n .then(resp => resp.json())\n .then(data => {\n setTimeout(() => {\n res.json(data)\n }, 2000)\n })\n\n return\n }\n setTimeout(() => {\n res.json(projects)\n }, 2000)\n}\n"
},
{
"path": "examples/basic/pages/index.js",
"content": "import Link from 'next/link'\nimport fetch from '../libs/fetch'\n\nimport useSWR from 'swr'\n\nexport default function Index() {\n const { data } = useSWR('/api/data', fetch)\n\n return (\n
\n
Trending Projects
\n
\n {\n data ? data.map(project =>\n
{project}
\n ) : 'loading...'\n }\n
\n
\n )\n}\n"
},
{
"path": "examples/basic-typescript/README.md",
"content": "# Basic TypeScript\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/basic-typescript)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/basic-typescript\ncd basic-typescript\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nShow how to use the basic example along with TypeScript to type the data received from SWR.\n"
},
{
"path": "examples/basic-typescript/libs/fetch.ts",
"content": "export default async function fetcher(\n input: RequestInfo,\n init?: RequestInit\n): Promise {\n const res = await fetch(input, init)\n return res.json()\n}\n"
},
{
"path": "examples/basic-typescript/next-env.d.ts",
"content": "/// \n/// \n/// \n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
},
{
"path": "examples/basic-typescript/package.json",
"content": "{\n \"name\": \"basic-typescript\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n },\n \"devDependencies\": {\n \"@types/node\": \"16.7.2\",\n \"@types/react\": \"17.0.19\",\n \"typescript\": \"4.3.5\"\n }\n}\n"
},
{
"path": "examples/basic-typescript/pages/[user]/[repo].tsx",
"content": "import Link from 'next/link'\nimport fetch from '../../libs/fetch'\n\nimport useSWR from 'swr'\n\nexport default function Repo() {\n const id =\n typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''\n const { data } = useSWR<{\n forks_count: number\n stargazers_count: number\n watchers: number\n }>('/api/data?id=' + id, fetch)\n\n return (\n
\n
{id}
\n {data ? (\n
\n
forks: {data.forks_count}
\n
stars: {data.stargazers_count}
\n
watchers: {data.watchers}
\n
\n ) : (\n 'loading...'\n )}\n \n \n Back\n
\n )\n}\n"
},
{
"path": "examples/basic-typescript/pages/api/data.ts",
"content": "import { NextApiRequest, NextApiResponse } from 'next'\n\nconst projects = [\n 'facebook/flipper',\n 'vuejs/vuepress',\n 'rust-lang/rust',\n 'vercel/next.js'\n]\n\nexport default function api(req: NextApiRequest, res: NextApiResponse) {\n if (req.query.id) {\n // a slow endpoint for getting repo data\n fetch(`https://api.github.com/repos/${req.query.id}`)\n .then(resp => resp.json())\n .then(data => {\n setTimeout(() => {\n res.json(data)\n }, 2000)\n })\n\n return\n }\n setTimeout(() => {\n res.json(projects)\n }, 2000)\n}\n"
},
{
"path": "examples/basic-typescript/pages/index.tsx",
"content": "import Link from 'next/link'\nimport fetch from '../libs/fetch'\n\nimport useSWR from 'swr'\n\nexport default function HomePage() {\n const { data } = useSWR('/api/data', fetch)\n const { data: data2 } = useSWR(null, fetch)\n\n return (\n
\n
Trending Projects
\n {data2}\n
\n {data\n ? data.map(project => (\n
\n \n {project}\n \n
\n ))\n : 'loading...'}\n
\n
\n )\n}\n"
},
{
"path": "examples/basic-typescript/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\"\n },\n \"exclude\": [\n \"node_modules\"\n ],\n \"include\": [\n \"next-env.d.ts\",\n \"**/*.ts\",\n \"**/*.tsx\"\n ]\n}\n"
},
{
"path": "examples/focus-revalidate/README.md",
"content": "# Focus Revalidate\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/focus-revalidate)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/focus-revalidate\ncd focus-revalidate\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nBasic authentication example showing how the revalidate on focus feature works and to trigger a revalidation on a per-hook call basis.\n"
},
{
"path": "examples/focus-revalidate/components/button.js",
"content": "export default function Button({ children, ...props }) {\n return \n}"
},
{
"path": "examples/focus-revalidate/libs/auth.js",
"content": "// mock login and logout\n\nexport function login() {\n document.cookie = 'swr-test-token=swr;'\n}\n\nexport function logout() {\n document.cookie = 'swr-test-token=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'\n}\n"
},
{
"path": "examples/focus-revalidate/libs/fetch.js",
"content": "export default async function fetcher(...args) {\n const res = await fetch(...args)\n return res.json()\n}\n"
},
{
"path": "examples/focus-revalidate/package.json",
"content": "{\n \"name\": \"focus-revalidate\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/focus-revalidate/pages/api/user.js",
"content": "// an endpoint for getting user info\nexport default function user(req, res) {\n if (req.cookies['swr-test-token'] === 'swr') {\n // authorized\n res.json({\n loggedIn: true,\n name: 'Shu',\n avatar: 'https://github.com/shuding.png'\n })\n return\n }\n\n res.json({\n loggedIn: false\n })\n}\n"
},
{
"path": "examples/focus-revalidate/pages/index.js",
"content": "import Button from '../components/button'\nimport fetch from '../libs/fetch'\nimport { login, logout } from '../libs/auth'\n\nimport useSWR from 'swr'\n\nexport default function Index() {\n const { data, mutate } = useSWR('/api/user', fetch)\n\n if (!data) return
loading...
\n if (data.loggedIn) {\n return
\n
Welcome, {data.name}
\n \n \n
\n } else {\n return
\n
Please login
\n \n
\n }\n}\n"
},
{
"path": "examples/global-fetcher/README.md",
"content": "# Global Fetcher\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/global-fetcher)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/global-fetcher\ncd global-fetcher\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nUse the `SWRConfig` provider to set up the fetcher globally instead of a per-hook call.\n"
},
{
"path": "examples/global-fetcher/libs/fetch.js",
"content": "export default async function fetcher(...args) {\n const res = await fetch(...args)\n return res.json()\n}\n"
},
{
"path": "examples/global-fetcher/package.json",
"content": "{\n \"name\": \"global-fetcher\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/global-fetcher/pages/[user]/[repo].js",
"content": "import Link from 'next/link'\n\nimport useSWR from 'swr'\n\nexport default function Repo() {\n const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''\n const { data } = useSWR('/api/data?id=' + id)\n\n return (\n
\n
{id}
\n {\n data ?
\n
forks: {data.forks_count}
\n
stars: {data.stargazers_count}
\n
watchers: {data.watchers}
\n
: 'loading...'\n }\n \n \n Back\n
\n )\n}\n"
},
{
"path": "examples/global-fetcher/pages/_app.js",
"content": "import React from 'react'\nimport App from 'next/app'\nimport { SWRConfig } from 'swr'\nimport fetch from '../libs/fetch.js';\n\nexport default class MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return \n \n \n }\n}\n"
},
{
"path": "examples/global-fetcher/pages/api/data.js",
"content": "const projects = [\n 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js'\n]\n\nexport default function api(req, res) {\n if (req.query.id) {\n // a slow endpoint for getting repo data\n fetch(`https://api.github.com/repos/${req.query.id}`)\n .then(resp => resp.json())\n .then(data => {\n setTimeout(() => {\n res.json(data)\n }, 2000)\n })\n\n return\n }\n setTimeout(() => {\n res.json(projects)\n }, 2000)\n}\n"
},
{
"path": "examples/global-fetcher/pages/index.js",
"content": "import Link from 'next/link'\n\nimport useSWR from 'swr'\n\nexport default function Index() {\n const { data } = useSWR('/api/data')\n\n return (\n
\n
Trending Projects
\n
\n {data\n ? data.map(project => (\n
\n \n {project}\n \n
\n ))\n : 'loading...'}\n
\n
\n )\n}\n"
},
{
"path": "examples/infinite/README.md",
"content": "# useSWRInfinite\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/infinite)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/infinite\ncd basic\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nShow usage of useSWRInfinite with load more data button\n"
},
{
"path": "examples/infinite/libs/fetch.js",
"content": "export default async function fetcher(...args) {\n const res = await fetch(...args)\n return res.json()\n}\n"
},
{
"path": "examples/infinite/package.json",
"content": "{\n \"name\": \"infinite\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/infinite/pages/index.js",
"content": "import { useState } from 'react'\nimport useSWRInfinite from 'swr/infinite'\n\nimport fetch from '../libs/fetch'\n\nconst PAGE_SIZE = 6\n\nexport default function App() {\n const [repo, setRepo] = useState('reactjs/react-a11y')\n const [val, setVal] = useState(repo)\n\n const { data, error, mutate, size, setSize, isValidating } = useSWRInfinite(\n (index) =>\n `https://api.github.com/repos/${repo}/issues?per_page=${PAGE_SIZE}&page=${\n index + 1\n }`,\n fetch\n )\n\n const issues = data ? [].concat(...data) : []\n const isLoadingInitialData = !data && !error\n const isLoadingMore =\n isLoadingInitialData ||\n (size > 0 && data && typeof data[size - 1] === 'undefined')\n const isEmpty = data?.[0]?.length === 0\n const isReachingEnd =\n isEmpty || (data && data[data.length - 1]?.length < PAGE_SIZE)\n const isRefreshing = isValidating && data && data.length === size\n\n return (\n
\n Another Component: \n My name is {data.name}.\n
\n
\n )\n}\n\nexport default function Index() {\n return (\n
\n useSWR can share state between components:\n \n \n
\n )\n}\n"
},
{
"path": "examples/optimistic-ui/README.md",
"content": "# Optimistic UI\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/optimistic-ui)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/optimistic-ui\ncd optimistic-ui\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nExample of how to use SWR to implement an Optimistic UI pattern where we mutate the cached data immediately and then trigger a revalidation with the API.\n"
},
{
"path": "examples/optimistic-ui/libs/fetch.js",
"content": "export default async function fetcher(...args) {\n const res = await fetch(...args)\n if (!res.ok) throw new Error('Failed to fetch')\n return res.json()\n}\n"
},
{
"path": "examples/optimistic-ui/package.json",
"content": "{\n \"name\": \"optimistic-ui\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/optimistic-ui/pages/_app.js",
"content": "import '../styles.css'\n\nexport default function App({ Component, pageProps }) {\n return \n}\n"
},
{
"path": "examples/optimistic-ui/pages/api/todos.js",
"content": "let todos = []\nconst delay = () => new Promise(res => setTimeout(() => res(), 1000))\n\nasync function getTodos() {\n await delay()\n return todos.sort((a, b) => (a.text < b.text ? -1 : 1))\n}\n\nasync function addTodo(todo) {\n await delay()\n // Sometimes it will fail, this will cause a regression on the UI\n if (Math.random() < 0.2 || !todo.text)\n throw new Error('Failed to add new item!')\n todo.text = todo.text.charAt(0).toUpperCase() + todo.text.slice(1)\n todos = [...todos, todo]\n return todo\n}\n\nexport default async function api(req, res) {\n try {\n if (req.method === 'POST') {\n const body = JSON.parse(req.body)\n return res.json(await addTodo(body))\n }\n\n return res.json(await getTodos())\n } catch (err) {\n return res.status(500).json({ error: err.message })\n }\n}\n"
},
{
"path": "examples/optimistic-ui/pages/index.js",
"content": "import useSWR from 'swr'\nimport React, { useState } from 'react'\n\nimport fetch from '../libs/fetch'\n\nexport default function App() {\n const [text, setText] = useState('')\n const { data, mutate } = useSWR('/api/todos', fetch)\n\n const [state, setState] = useState()\n\n return (\n
\n {/* */}\n
Optimistic UI with SWR
\n\n
\n \n This application optimistically updates the data, while revalidating in\n the background. The POST API auto capitializes the data,\n and only returns the new added one instead of the full list. And the{' '}\n GET API returns the full list in order.\n
\n })\n ) : (\n \n No todos yet. Try adding lowercased \"banana\" and \"apple\" to the\n list.\n \n )\n ) : (\n Loading...\n )}\n
\n
\n )\n}\n"
},
{
"path": "examples/optimistic-ui/styles.css",
"content": "html {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n text-align: center;\n}\n\nbody {\n max-width: 600px;\n margin: auto;\n}\n\nh1 {\n margin-top: 1em;\n}\n\n.note {\n text-align: left;\n font-size: 0.9em;\n line-height: 1.5;\n color: #666;\n}\n\n.note svg {\n margin-right: 0.5em;\n vertical-align: -2px;\n width: 14px;\n height: 14px;\n margin-right: 5px;\n}\n\nform {\n display: flex;\n margin: 8px 0;\n gap: 8px;\n}\n\ninput {\n flex: 1;\n}\n\ninput,\nbutton {\n font-size: 16px;\n padding: 6px 5px;\n}\n\ncode {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n Liberation Mono, Courier New, monospace;\n font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;\n background-color: #eee;\n padding: 1px 3px;\n border-radius: 2px;\n}\n\nul {\n text-align: left;\n list-style: none;\n padding: 0;\n}\n\nli {\n margin: 8px 0;\n padding: 10px;\n border-radius: 4px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 1px #ededed;\n}\n\ni {\n color: #999;\n}\n\n.info,\n.success,\n.error {\n display: block;\n text-align: left;\n padding: 6px 0;\n font-size: 0.9em;\n opacity: 0.9;\n}\n\n.info {\n color: #666;\n}\n.success {\n color: #4caf50;\n}\n.error {\n color: #f44336;\n}\n"
},
{
"path": "examples/optimistic-ui-immer/README.md",
"content": "# Optimistic UI with Immer\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/optimistic-ui-immer)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/optimistic-ui-immer\ncd optimistic-ui-immer\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nExample of how to use SWR and Immer to implement an Optimistic UI pattern where we mutate the cached data immediately and then trigger a revalidation with the API.\n"
},
{
"path": "examples/optimistic-ui-immer/libs/fetch.js",
"content": "export default async function fetcher(...args) {\n const res = await fetch(...args)\n return res.json()\n}\n"
},
{
"path": "examples/optimistic-ui-immer/package.json",
"content": "{\n \"name\": \"optimistic-ui-immer\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"immer\": \"9.0.5\",\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/optimistic-ui-immer/pages/api/data.js",
"content": "const data = []\n\nfunction shouldFail() {\n return Math.random() > 0.8\n}\n\nexport default function api(req, res) {\n if (req.method === 'POST') {\n const body = JSON.parse(req.body)\n // sometimes it will fail, and this will cause a regression in the UI\n if (!shouldFail()) {\n data.push(body.text);\n }\n res.json(data)\n return\n }\n\n setTimeout(() => {\n res.json(data)\n }, 2000)\n}\n\n"
},
{
"path": "examples/optimistic-ui-immer/pages/index.js",
"content": "import React from 'react'\nimport fetch from '../libs/fetch'\n\nimport useSWR, { mutate } from 'swr'\nimport produce from \"immer\"\n\nexport default function Index() {\n const [text, setText] = React.useState('');\n const { data } = useSWR('/api/data', fetch)\n\n async function handleSubmit(event) {\n event.preventDefault()\n // Call mutate to optimistically update the UI.\n // We use Immer produce to allow us to perform an immutable change\n // while coding it as a normal mutation of the same object.\n mutate(\"/api/data\", produce(draftData => {\n draftData.push(text)\n }), false)\n // Then we send the request to the API and let mutate\n // update the data with the API response.\n // Our action may fail in the API function, and the response differ\n // from what was optimistically updated, in that case, the UI will be\n // changed to match the API response.\n // The fetch could also fail, in that case, the UI will\n // be in an incorrect state until the next successful fetch.\n mutate('/api/data', await fetch('/api/data', {\n method: 'POST',\n body: JSON.stringify({ text })\n }))\n setText('')\n }\n\n return
\n \n
\n {data ? data.map(datum =>
{datum}
) : 'loading...'}\n
\n
\n}\n"
},
{
"path": "examples/prefetch-preload/README.md",
"content": "# Prefetch & Preload\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/prefetch-preload)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/prefetch-preload\ncd prefetch-preload\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nThis example shows multiple ways to prefetch data to be used by SWR later.\n\n- Use a `` to get the browser to load the data while rendering the HTML\n- If in a browser, run the fetch + mutate outside the component\n- After rendering use an effect in React to prefetch the next page's data\n- When the user moves the mouse over a link trigger a fetch + mutate for the next page\n\nIn the real world you would not necessarily use all of them at the same time but one or more combined to give the best UX possible.\n"
},
{
"path": "examples/prefetch-preload/libs/fetch.js",
"content": "export default async function fetcher(...args) {\n const res = await fetch(...args)\n return res.json()\n}\n"
},
{
"path": "examples/prefetch-preload/package.json",
"content": "{\n \"name\": \"prefetch-preload\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/prefetch-preload/pages/[user]/[repo].js",
"content": "import Head from \"next/head\"\nimport Link from 'next/link'\nimport React from 'react'\nimport fetch from '../../libs/fetch'\n\nimport useSWR, { mutate } from 'swr'\n\nfunction prefetchParent() {\n return fetch('/api/data')\n .then(projects => mutate('/api/data', projects, false))\n}\n\n// if we are on the browser trigger a prefetch as soon as possible\nif (typeof window !== 'undefined') prefetchParent()\n\nexport default function Repo() {\n const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''\n const { data } = useSWR('/api/data?id=' + id, fetch)\n\n React.useEffect(() => {\n prefetchParent()\n }, [])\n\n function handleMouseEnter() {\n prefetchParent()\n }\n\n return (\n <>\n \n {/* This will tell the browser to preload the data for our page */}\n {id && }\n \n
\n
{id}
\n {\n data ?
\n
forks: {data.forks_count}
\n
stars: {data.stargazers_count}
\n
watchers: {data.watchers}
\n
: 'loading...'\n }\n \n \n Back\n
\n \n )\n}\n"
},
{
"path": "examples/prefetch-preload/pages/api/data.js",
"content": "const projects = [\n 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js'\n]\n\nexport default function api(req, res) {\n if (req.query.id) {\n // a slow endpoint for getting repo data\n fetch(`https://api.github.com/repos/${req.query.id}`)\n .then(resp => resp.json())\n .then(data => {\n setTimeout(() => {\n res.json(data)\n }, 2000)\n })\n\n return\n }\n setTimeout(() => {\n res.json(projects)\n }, 2000)\n}\n"
},
{
"path": "examples/prefetch-preload/pages/index.js",
"content": "import React from 'react'\nimport Head from \"next/head\";\nimport Link from 'next/link'\nimport fetch from '../libs/fetch'\n\nimport useSWR, { mutate } from 'swr'\n\nfunction prefetchData() {\n return fetch('/api/data')\n .then(data => {\n mutate('/api/data', data, false)\n return data\n })\n}\n\nfunction prefetchItem(project) {\n return fetch(`https://api.github.com/repos/${project}`).then(data => {\n mutate(`/api/data?id=${project}`, data, false)\n return data\n })\n}\n\nfunction prefetchWithProjects() {\n return prefetchData()\n .then(projects => Promise.all(projects.map(prefetchItem)))\n}\n\n// if we are on the browser trigger a prefetch as soon as possible\nif (typeof window !== 'undefined') prefetchWithProjects()\n\nexport default function Index() {\n const { data } = useSWR('/api/data', fetch)\n\n // This effect will fetch all projects after mounting\n React.useEffect(() => {\n if (!data) return\n if (data.length === 0) return\n data.forEach(prefetchItem)\n }, [data]);\n\n // With this handler, you could prefetch the data for a specific\n // project the moment the user moves the mouse over the link\n function handleMouseEnter(event) {\n // In our case, we could get the ID from the href so we use that\n prefetchItem(event.target.getAttribute(\"href\").slice(1))\n }\n\n return (\n <>\n \n {/* This will tell the browser to preload the data for our page */}\n \n \n
\n
Trending Projects
\n
\n {\n data ? data.map(project =>\n
\n \n {project}\n \n
\n ) : 'loading...'\n }\n
\n
\n \n )\n}\n"
},
{
"path": "examples/refetch-interval/README.md",
"content": "# Refetch Interval\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel Now.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/refetch-interval)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/refetch-interval\ncd refetch-interval\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nShow how to make SWR fetch the API again in an interval automatically to ensure the data is up-to-date.\n"
},
{
"path": "examples/refetch-interval/components/button.js",
"content": "export default function Button({ children, ...props }) {\n return \n}"
},
{
"path": "examples/refetch-interval/libs/fetch.js",
"content": "export default async function fetcher(...args) {\n const res = await fetch(...args)\n return res.json()\n}\n"
},
{
"path": "examples/refetch-interval/package.json",
"content": "{\n \"name\": \"refetch-interval\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/refetch-interval/pages/api/data.js",
"content": "// an simple endpoint for getting current list\nlet list = []\n\nexport default function api(req, res) {\n if (req.query.add) {\n list.push(req.query.add)\n } else if (req.query.clear) {\n list = []\n }\n res.json(list)\n}\n"
},
{
"path": "examples/refetch-interval/pages/index.js",
"content": "import { useState } from 'react'\nimport Button from '../components/button'\nimport fetch from '../libs/fetch'\n\nimport useSWR from 'swr'\n\nexport default function Index() {\n const { data, mutate } = useSWR('/api/data', fetch, {\n // revalidate the data per second\n refreshInterval: 1000\n })\n const [value, setValue] = useState('')\n\n if (!data) return
loading...
\n\n return (\n
\n
Refetch Interval (1s)
\n
Todo List
\n \n
\n {data.map(item =>
{item}
)}\n
\n \n
\n )\n}\n"
},
{
"path": "examples/server-render/README.md",
"content": "# Server Render\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/server-render)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/server-render\ncd server-render\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nThis example shows how to combine Next.js getServerSideProps with the SWR `fallbackData` option to support Server-Side Rendering.\n\nThe application will fetch the data server-side and then receive it as props, that data will be passed as `fallbackData` to SWR, once the application starts client-side SWR will revalidate it against the API and update the DOM, if it's required, with the new data.\n"
},
{
"path": "examples/server-render/libs/fetcher.js",
"content": "export default async function fetcher(...args) {\n const res = await fetch(...args)\n return res.json()\n}\n"
},
{
"path": "examples/server-render/package.json",
"content": "{\n \"name\": \"server-render\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/server-render/pages/[pokemon].js",
"content": "import Link from 'next/link'\nimport fetcher from '../libs/fetcher'\n\nimport useSWR from 'swr'\n\nconst getURL = pokemon => `https://pokeapi.co/api/v2/pokemon/${pokemon}`\n\nexport default function Pokemon({ pokemon, fallbackData }) {\n const { data } = useSWR(getURL(pokemon), fetcher, { fallbackData })\n\n return (\n
\n
{pokemon}
\n {data ? (\n
\n \n \n \n
height: {data.height}
\n
weight: {data.weight}
\n
\n {data.types.map(({ type }) => (\n
{type.name}
\n ))}\n
\n
\n ) : (\n 'loading...'\n )}\n \n \n \n Back\n \n
\n )\n}\n\nexport async function getServerSideProps({ query }) {\n const data = await fetcher(getURL(query.pokemon))\n return { props: { fallbackData: data, pokemon: query.pokemon } }\n}"
},
{
"path": "examples/server-render/pages/index.js",
"content": "import Link from 'next/link'\nimport fetcher from '../libs/fetcher'\n\nimport useSWR from 'swr'\n\nconst URL = 'https://pokeapi.co/api/v2/pokemon/'\n\nexport default function Home({ fallbackData }) {\n const { data } = useSWR(URL, fetcher, { fallbackData })\n\n return (\n
\n )\n}\n\nexport async function getServerSideProps() {\n const data = await fetcher(URL)\n return { props: { fallbackData: data } }\n}"
},
{
"path": "examples/storage-tab-sync/README.md",
"content": "# Storage Tab Sync\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/storage-tab-sync)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/storage-tab-sync\ncd storage-tab-sync\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nShow how you could use SWR to synchronize localStorage values between tabs.\n"
},
{
"path": "examples/storage-tab-sync/libs/storage.js",
"content": "export default async function storage(key) {\n const value = localStorage.getItem(key)\n if (!value) return undefined\n return JSON.parse(value)\n}\n"
},
{
"path": "examples/storage-tab-sync/package.json",
"content": "{\n \"name\": \"storage-tab-sync\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/storage-tab-sync/pages/index.js",
"content": "import storage from '../libs/storage'\n\nimport useSWR, { mutate } from 'swr'\n\nexport default function Index() {\n const { data = { name: \"\" } } = useSWR('user-name', storage)\n\n function handleChange(event) {\n localStorage.setItem(\n 'user-name',\n JSON.stringify({ name: event.target.value })\n )\n mutate('user-name', { name: event.target.value })\n }\n\n return
\n \n \n
\n}\n"
},
{
"path": "examples/subscription/README.md",
"content": "# Subscription\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/subscription)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/subscription\ncd subscription\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nShow how you could use SWR to subscribe async observable data into your app.\n"
},
{
"path": "examples/subscription/package.json",
"content": "{\n \"name\": \"subscription\",\n \"private\": true,\n \"license\": \"MIT\",\n \"dependencies\": {\n \"next\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"swr\": \"latest\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n"
},
{
"path": "examples/subscription/pages/index.js",
"content": "import React from \"react\"\nimport useSWRSubscription from \"swr/subscription\"\nimport EventEmitter from \"events\"\n\nconst event = new EventEmitter()\n\n// Simulating an external data source.\nlet stopped = false\nasync function start () {\n for (let i = 0; i < 100; i++) {\n await new Promise(res => setTimeout(res, 1000))\n if (stopped) return\n if (i % 3 === 0 && i !== 0) {\n event.emit(\"error\", new Error(\"error: \" + i));\n } else {\n event.emit(\"data\", \"state: \" + i);\n }\n }\n}\n\nexport default function page() {\n const { data, error } = useSWRSubscription('my-sub', (key, { next }) => {\n event.on(\"data\", (value) => next(undefined, value));\n event.on(\"error\", (err) => next(err));\n start();\n return () => {\n stopped = true;\n };\n })\n\n return (\n
\n
SWR Subscription
\n
Received every second, error when data is times of 3
\n
{data}
\n
{error ? error.message : \"\"}
\n
\n )\n}\n"
},
{
"path": "examples/suspense/README.md",
"content": "# Basic\n\n## One-Click Deploy\n\nDeploy your own SWR project with Vercel.\n\n[](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/suspense)\n\n## How to Use\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/suspense\ncd suspense\n```\n\nInstall it and run:\n\n```bash\nyarn\nyarn dev\n# or\nnpm install\nnpm run dev\n```\n\n## The Idea behind the Example\n\nShow how to use the SWR suspense option with React suspense.\n"
},
{
"path": "examples/suspense/app/layout.jsx",
"content": "export default function RootLayout({\n children\n}) {\n return (\n \n {children}\n \n )\n}\n"
},
{
"path": "examples/suspense/app/rsc/[user]/[repo]/error.jsx",
"content": "'use client'\nexport default function ErrorPage() {\n return
}>\n \n \n \n \n )\n}\n\nexport default RemoteData\n"
},
{
"path": "examples/suspense-retry/app/page.tsx",
"content": "import { Suspense } from 'react'\nimport dynamic from 'next/dynamic'\n\nconst RemoteData = dynamic(() => import('./manual-retry'), {\n ssr: false\n})\n\nexport default function HomePage() {\n return (\n loading component}>\n \n \n )\n}\n"
},
{
"path": "examples/suspense-retry/app/use-remote-data.ts",
"content": "'use client'\nimport useSWR from 'swr'\nimport { preload } from 'swr'\n\nlet count = 0\nconst fetcher = () => {\n count++\n if (count === 1) return Promise.reject('wrong')\n return fetch('/api')\n .then(r => r.json())\n .then(r => r.data)\n}\n\nconst key = 'manual-retry'\n\nexport const useRemoteData = () =>\n useSWR(key, fetcher, {\n suspense: true\n })\n\nexport const preloadRemote = () => preload(key, fetcher)\n"
},
{
"path": "examples/suspense-retry/next-env.d.ts",
"content": "/// \n/// \n/// \n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
},
{
"path": "examples/suspense-retry/next.config.js",
"content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n experimental: {\n serverActions: true,\n },\n}\n\nmodule.exports = nextConfig\n"
},
{
"path": "examples/suspense-retry/package.json",
"content": "{\n \"name\": \"site\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"@types/node\": \"^20.2.5\",\n \"@types/react\": \"^18.2.8\",\n \"@types/react-dom\": \"18.2.4\",\n \"next\": \"^latest\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"typescript\": \"5.1.3\",\n \"swr\": \"*\"\n }\n}\n"
},
{
"path": "examples/suspense-retry/pages/retry.tsx",
"content": "import { Suspense } from 'react'\nimport dynamic from 'next/dynamic'\n\nconst RemoteData = dynamic(() => import('../app/manual-retry'), {\n ssr: false\n})\n\nexport default function HomePage() {\n return (\n loading component}>\n \n \n )\n}\n"
},
{
"path": "examples/suspense-retry/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"incremental\": true,\n \"plugins\": [\n {\n \"name\": \"next\"\n }\n ],\n \"baseUrl\": \".\",\n \"paths\": {\n \"~/*\": [\"./*\"]\n }\n },\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n \"exclude\": [\"node_modules\"]\n}\n"
},
{
"path": "immutable/package.json",
"content": "{\n \"main\": \"../dist/immutable/index.js\",\n \"module\": \"../dist/immutable/index.mjs\",\n \"types\": \"../dist/immutable/index.d.ts\",\n \"private\": true\n}\n"
},
{
"path": "infinite/package.json",
"content": "{\n \"main\": \"../dist/infinite/index.js\",\n \"module\": \"../dist/infinite/index.mjs\",\n \"types\": \"../dist/infinite/index.d.ts\",\n \"private\": true\n}\n"
},
{
"path": "jest.config.build.js",
"content": "import config from './jest.config.js'\n\nconst useBuildConfig = {\n ...config,\n // override to use build files\n moduleNameMapper: {}\n}\n\nexport default useBuildConfig\n"
},
{
"path": "jest.config.js",
"content": "const config = {\n testEnvironment: 'jsdom',\n testRegex: '/test/.*\\\\.test\\\\.tsx?$',\n testPathIgnorePatterns: ['/node_modules/', '/e2e/'],\n modulePathIgnorePatterns: ['/examples/'],\n setupFilesAfterEnv: ['/test/jest-setup.ts'],\n moduleNameMapper: {\n '^swr$': '/src/index/index.ts',\n '^swr/infinite$': '/src/infinite/index.ts',\n '^swr/immutable$': '/src/immutable/index.ts',\n '^swr/subscription$': '/src/subscription/index.ts',\n '^swr/mutation$': '/src/mutation/index.ts',\n '^swr/_internal$': '/src/_internal/index.ts'\n },\n transform: {\n '^.+\\\\.(t|j)sx?$': '@swc/jest'\n },\n coveragePathIgnorePatterns: [\n '/node_modules/', \n '/dist/', \n '/test/',\n '/src/_internal/utils/env.ts'\n ],\n coverageReporters: ['text', 'html'],\n reporters: [['github-actions', { silent: false }], 'summary']\n}\n\n\nexport default config"
},
{
"path": "mutation/package.json",
"content": "{\n \"main\": \"../dist/mutation/index.js\",\n \"module\": \"../dist/mutation/index.mjs\",\n \"types\": \"../dist/mutation/index.d.ts\",\n \"private\": true\n}\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"swr\",\n \"version\": \"2.4.1\",\n \"description\": \"React Hooks library for remote data fetching\",\n \"keywords\": [\n \"swr\",\n \"react\",\n \"hooks\",\n \"request\",\n \"cache\",\n \"fetch\"\n ],\n \"packageManager\": \"pnpm@10.24.0\",\n \"main\": \"./dist/index/index.js\",\n \"module\": \"./dist/index/index.mjs\",\n \"types\": \"./dist/index/index.d.ts\",\n \"sideEffects\": false,\n \"exports\": {\n \"./package.json\": \"./package.json\",\n \".\": {\n \"react-server\": \"./dist/index/react-server.mjs\",\n \"import\": {\n \"types\": \"./dist/index/index.d.mts\",\n \"default\": \"./dist/index/index.mjs\"\n },\n \"require\": {\n \"types\": \"./dist/index/index.d.ts\",\n \"default\": \"./dist/index/index.js\"\n }\n },\n \"./infinite\": {\n \"react-server\": \"./dist/infinite/react-server.mjs\",\n \"import\": {\n \"types\": \"./dist/infinite/index.d.mts\",\n \"default\": \"./dist/infinite/index.mjs\"\n },\n \"require\": {\n \"types\": \"./dist/infinite/index.d.ts\",\n \"default\": \"./dist/infinite/index.js\"\n }\n },\n \"./immutable\": {\n \"import\": {\n \"types\": \"./dist/immutable/index.d.mts\",\n \"default\": \"./dist/immutable/index.mjs\"\n },\n \"require\": {\n \"types\": \"./dist/immutable/index.d.ts\",\n \"default\": \"./dist/immutable/index.js\"\n }\n },\n \"./subscription\": {\n \"import\": {\n \"types\": \"./dist/subscription/index.d.mts\",\n \"default\": \"./dist/subscription/index.mjs\"\n },\n \"require\": {\n \"types\": \"./dist/subscription/index.d.ts\",\n \"default\": \"./dist/subscription/index.js\"\n }\n },\n \"./mutation\": {\n \"import\": {\n \"types\": \"./dist/mutation/index.d.mts\",\n \"default\": \"./dist/mutation/index.mjs\"\n },\n \"require\": {\n \"types\": \"./dist/mutation/index.d.ts\",\n \"default\": \"./dist/mutation/index.js\"\n }\n },\n \"./_internal\": {\n \"react-server\": \"./dist/_internal/react-server.mjs\",\n \"import\": {\n \"types\": \"./dist/_internal/index.d.mts\",\n \"default\": \"./dist/_internal/index.mjs\"\n },\n \"require\": {\n \"types\": \"./dist/_internal/index.d.ts\",\n \"default\": \"./dist/_internal/index.js\"\n }\n }\n },\n \"files\": [\n \"dist\",\n \"infinite\",\n \"immutable\",\n \"subscription\",\n \"mutation\",\n \"_internal\"\n ],\n \"repository\": \"github:vercel/swr\",\n \"homepage\": \"https://swr.vercel.app\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"prepare\": \"husky install\",\n \"csb:install\": \"corepack enable && corepack pnpm i\",\n \"csb:build\": \"pnpm build\",\n \"clean\": \"rimraf ./dist && rimraf playwright-report test-result\",\n \"watch\": \"bunchee -w\",\n \"build\": \"bunchee\",\n \"build:e2e\": \"pnpm next build e2e/site\",\n \"attw\": \"attw --pack .\",\n \"types:check\": \"tsc --noEmit\",\n \"prepublishOnly\": \"pnpm clean && pnpm build\",\n \"publish-beta\": \"pnpm publish --tag beta\",\n \"format\": \"prettier --write ./**/*.{ts,tsx}\",\n \"lint\": \"eslint . --ext .ts,.tsx --cache\",\n \"lint:fix\": \"pnpm lint --fix\",\n \"coverage\": \"jest --coverage\",\n \"test-typing\": \"tsc -p test/tsconfig.json && tsc -p test/type/tsconfig.json && tsc -p test/type/suspense/tsconfig.json\",\n \"test\": \"jest\",\n \"test:build\": \"jest --config jest.config.build.js\",\n \"test:e2e\": \"playwright test\",\n \"run-all-checks\": \"pnpm types:check && pnpm lint && pnpm test-typing\"\n },\n \"lint-staged\": {\n \"*.{ts,tsx}\": [\n \"eslint --fix --cache\",\n \"prettier --write\"\n ]\n },\n \"devDependencies\": {\n \"@arethetypeswrong/cli\": \"^0.18.2\",\n \"@edge-runtime/jest-environment\": \"^4.0.0\",\n \"@eslint/compat\": \"^2.0.0\",\n \"@eslint/eslintrc\": \"^3.3.1\",\n \"@eslint/js\": \"^9.39.1\",\n \"@playwright/test\": \"1.57.0\",\n \"@swc/core\": \"^1.15.3\",\n \"@swc/jest\": \"0.2.39\",\n \"@testing-library/dom\": \"^10.4.1\",\n \"@testing-library/jest-dom\": \"^6.9.1\",\n \"@testing-library/react\": \"^16.3.0\",\n \"@type-challenges/utils\": \"0.1.1\",\n \"@types/jest\": \"^30.0.0\",\n \"@types/node\": \"^22.19.1\",\n \"@types/react\": \"^19.2.7\",\n \"@types/use-sync-external-store\": \"^1.5.0\",\n \"@typescript-eslint/eslint-plugin\": \"8.48.0\",\n \"@typescript-eslint/parser\": \"8.48.0\",\n \"bunchee\": \"^6.6.2\",\n \"eslint\": \"9.39.1\",\n \"eslint-config-prettier\": \"10.1.8\",\n \"eslint-plugin-jest-dom\": \"5.5.0\",\n \"eslint-plugin-react\": \"7.37.5\",\n \"eslint-plugin-react-hooks\": \"7.0.1\",\n \"eslint-plugin-testing-library\": \"7.13.5\",\n \"globals\": \"^16.5.0\",\n \"husky\": \"9.1.7\",\n \"jest\": \"30.2.0\",\n \"jest-environment-jsdom\": \"29.7.0\",\n \"lint-staged\": \"16.2.7\",\n \"next\": \"16.1.1\",\n \"prettier\": \"2.8.8\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-error-boundary\": \"^5.0.0\",\n \"rimraf\": \"6.1.2\",\n \"semver\": \"^7.5.1\",\n \"swr\": \"workspace:*\",\n \"typescript\": \"5.9.3\",\n \"typescript-eslint\": \"^8.48.0\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\"\n },\n \"prettier\": {\n \"tabWidth\": 2,\n \"semi\": false,\n \"useTabs\": false,\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\",\n \"trailingComma\": \"none\"\n },\n \"dependencies\": {\n \"dequal\": \"^2.0.3\",\n \"use-sync-external-store\": \"^1.6.0\"\n }\n}\n"
},
{
"path": "playwright.config.js",
"content": "import { defineConfig, devices } from '@playwright/test'\n\nexport default defineConfig({\n webServer: {\n command: 'pnpm next start e2e/site --port 4000',\n reuseExistingServer: !process.env.CI,\n port: 4000\n },\n testDir: './e2e',\n /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */\n snapshotDir: './e2e/__snapshots__',\n /* Maximum time one test can run for. */\n timeout: 10 * 1000,\n /* Run tests in files in parallel */\n fullyParallel: true,\n /* Fail the build on CI if you accidentally left test.only in the source code. */\n forbidOnly: !!process.env.CI,\n /* Retry on CI only */\n retries: process.env.CI ? 2 : 0,\n /* Opt out of parallel tests on CI. */\n workers: process.env.CI ? 1 : undefined,\n /* Reporter to use. See https://playwright.dev/docs/test-reporters */\n reporter: process.env.CI\n ? [['github'], ['html', { open: 'on-failure' }]]\n : [['html', { open: 'on-failure' }]],\n /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */\n use: {\n baseURL: 'http://localhost:4000',\n /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */\n trace: process.env.CI ? 'on-first-retry' : 'on',\n ...devices['Desktop Chrome']\n }\n})\n"
},
{
"path": "pnpm-workspace.yaml",
"content": "packages:\n - '_internal'\n - 'core'\n - 'immutable'\n - 'infinite'\n - 'mutation'"
},
{
"path": "scripts/bump-next-version.js",
"content": "const fs = require('fs')\nconst path = require('path')\nconst { execSync } = require('child_process')\nconst semver = require('semver')\n\nconst packageJsonPath = path.join(__dirname, '../package.json')\nconst packageJsonData = fs.readFileSync(packageJsonPath, 'utf8')\nconst packageJson = JSON.parse(packageJsonData)\n\nlet version = packageJson.version\nconst releaseType = process.env.RELEASE_TYPE || 'beta'\nconst semverType = process.env.SEMVER_TYPE\n\nfunction bumpVersion(version) {\n if (process.env.DRY_RUN) {\n console.log(`npm version ${version}`)\n } else {\n try {\n execSync(`npm version ${version}`, { stdio: 'inherit' })\n } catch (error) {\n console.error('Failed to execute npm version:', error)\n process.exit(1)\n }\n }\n}\n\nif (releaseType === 'beta') {\n if (semver.prerelease(version)) {\n version = semver.inc(version, 'prerelease')\n } else {\n version = semver.inc(version, 'pre' + semverType, 'beta')\n }\n} else if (releaseType === 'stable') {\n if (!semverType) {\n console.error('Missing semver type. Expected \"patch\", \"minor\" or \"major\".')\n process.exit(1)\n }\n version = semver.inc(version, semverType)\n} else {\n console.error('Invalid release type. Expected \"beta\" or \"stable\".')\n process.exit(1)\n}\n\nbumpVersion(version)\n"
},
{
"path": "src/_internal/constants.ts",
"content": "export const INFINITE_PREFIX = '$inf$'\n"
},
{
"path": "src/_internal/events.ts",
"content": "export const FOCUS_EVENT = 0\nexport const RECONNECT_EVENT = 1\nexport const MUTATE_EVENT = 2\nexport const ERROR_REVALIDATE_EVENT = 3\n"
},
{
"path": "src/_internal/index.react-server.ts",
"content": "export { serialize } from './utils/serialize'\nexport { SWRConfig } from './index'\nexport { INFINITE_PREFIX } from './constants'\n"
},
{
"path": "src/_internal/index.ts",
"content": "import SWRConfig from './utils/config-context'\nimport * as revalidateEvents from './events'\nimport { INFINITE_PREFIX } from './constants'\n\nexport { SWRConfig, revalidateEvents, INFINITE_PREFIX }\n\nexport { initCache } from './utils/cache'\nexport { defaultConfig, cache, mutate, compare } from './utils/config'\nimport { setupDevTools } from './utils/devtools'\nexport * from './utils/env'\nexport { SWRGlobalState } from './utils/global-state'\nexport { stableHash } from './utils/hash'\nexport * from './utils/helper'\nexport * from './utils/shared'\nexport { mergeConfigs } from './utils/merge-config'\nexport { internalMutate } from './utils/mutate'\nexport { normalize } from './utils/normalize-args'\nexport { withArgs } from './utils/resolve-args'\nexport { serialize } from './utils/serialize'\nexport { subscribeCallback } from './utils/subscribe-key'\nexport { getTimestamp } from './utils/timestamp'\nexport { useSWRConfig } from './utils/use-swr-config'\nexport { preset, defaultConfigOptions } from './utils/web-preset'\nexport { withMiddleware } from './utils/with-middleware'\nexport { preload } from './utils/preload'\n\nexport * from './types'\n\nsetupDevTools()\n"
},
{
"path": "src/_internal/types.ts",
"content": "import type { SWRGlobalConfig } from '../index'\nimport type * as revalidateEvents from './events'\n\n/**\n * Global state tuple containing SWR's internal state management structures.\n *\n * This is the core state structure that manages all SWR operations internally.\n * Each element serves a specific purpose in the SWR ecosystem.\n *\n * @internal\n */\nexport type GlobalState = [\n /** Event revalidators: Maps cache keys to arrays of revalidation callbacks */\n Record,\n /** Mutation timestamps: Maps cache keys to [start_timestamp, end_timestamp] tuples */\n Record,\n /** Fetch cache: Maps cache keys to [data, timestamp] tuples */\n Record,\n /** Preload cache: Maps cache keys to fetcher responses */\n Record>,\n /** Scoped mutator function for cache updates */\n ScopedMutator,\n /** Cache setter function with prev/current value comparison */\n (key: string, value: any, prev: any) => void,\n /** Cache subscriber function that returns an unsubscribe function */\n (key: string, callback: (current: any, prev: any) => void) => () => void\n]\n/**\n * Response type that can be returned by fetcher functions.\n *\n * @template Data - The type of data returned by the fetcher\n * @public\n */\nexport type FetcherResponse = Data | Promise\n\n/**\n * Basic fetcher function that accepts any arguments and returns data or a promise.\n *\n * This is the most permissive fetcher type, allowing any number of arguments\n * of any type. Used when type safety is not required or when dealing with\n * dynamic fetcher signatures.\n *\n * @template Data - The type of data returned by the fetcher\n * @param args - Variable arguments passed to the fetcher\n * @returns Data or a Promise that resolves to data\n * @public\n */\nexport type BareFetcher = (\n ...args: any[]\n) => FetcherResponse\n\n/**\n * Typed fetcher function that is constrained by the SWR key type.\n *\n * Provides type safety by ensuring the fetcher argument matches the key type.\n * The conditional type logic ensures that:\n * - If the key is a function returning a value, the fetcher receives that value\n * - If the key is falsy (null, undefined, false), the fetcher is never called\n * - Otherwise, the fetcher receives the key directly as its argument\n *\n * @template Data - The type of data returned by the fetcher\n * @template SWRKey - The type of the SWR key, used to infer fetcher arguments\n * @public\n */\nexport type Fetcher<\n Data = unknown,\n SWRKey extends Key = Key\n> = SWRKey extends () => infer Arg | null | undefined | false\n ? (arg: Arg) => FetcherResponse\n : SWRKey extends null | undefined | false\n ? never\n : SWRKey extends infer Arg\n ? (arg: Arg) => FetcherResponse\n : never\n\n/**\n * Determines if data should block rendering based on suspense configuration.\n *\n * This conditional type is used internally to determine the return type of `data`\n * in SWRResponse. When suspense is enabled or fallbackData is provided, data\n * will never be undefined, allowing for non-nullable return types.\n *\n * The type resolution follows this logic:\n * 1. If global suspense is enabled → `true` (data never undefined)\n * 2. If no options provided → `false` (data can be undefined)\n * 3. If suspense is enabled in options → `true` (data never undefined)\n * 4. If fallbackData is provided → `true` (data never undefined)\n * 5. Otherwise → `false` (data can be undefined)\n *\n * @template Data - The data type\n * @template Options - The SWR configuration options\n * @returns `true` if data is guaranteed to be defined, `false` if it can be undefined\n * @internal\n */\nexport type BlockingData<\n Data = any,\n Options = SWRDefaultOptions\n> = SWRGlobalConfig extends { suspense: true }\n ? true\n : Options extends undefined\n ? false\n : Options extends { suspense: true }\n ? true\n : Options extends { fallbackData: Data | Promise }\n ? true\n : false\n\n/**\n * Configuration types that are only used internally, not exposed to the user.\n *\n * These options are managed internally by SWR and passed between internal\n * functions. They are not part of the public API and should not be used\n * directly by consumers.\n *\n * @internal\n */\nexport interface InternalConfiguration {\n /** The cache instance used to store SWR data and state */\n cache: Cache\n /** Scoped mutator function for updating cache entries */\n mutate: ScopedMutator\n}\n\n/**\n * Public configuration options for SWR.\n *\n * This interface defines all the configuration options that users can pass\n * to customize SWR's behavior. These options can be provided globally via\n * SWRConfig or per-hook via the config parameter.\n *\n * @template Data - The type of data returned by the fetcher\n * @template Error - The type of error that can be thrown\n * @template Fn - The fetcher function type\n *\n * @public\n * @see {@link https://swr.vercel.app/docs/options | SWR Options Documentation}\n */\nexport interface PublicConfiguration<\n Data = any,\n Error = any,\n Fn extends Fetcher = BareFetcher\n> {\n /**\n * error retry interval in milliseconds\n * @defaultValue 5000\n */\n errorRetryInterval: number\n /** max error retry count */\n errorRetryCount?: number\n /**\n * timeout to trigger the onLoadingSlow event in milliseconds\n * @defaultValue 3000\n */\n loadingTimeout: number\n /**\n * only revalidate once during a time span in milliseconds\n * @defaultValue 5000\n */\n focusThrottleInterval: number\n /**\n * dedupe requests with the same key in this time span in milliseconds\n * @defaultValue 2000\n */\n dedupingInterval: number\n /**\n * * Disabled by default: `refreshInterval = 0`\n * * If set to a number, polling interval in milliseconds\n * * If set to a function, the function will receive the latest data and should return the interval in milliseconds\n * @see {@link https://swr.vercel.app/docs/revalidation}\n */\n refreshInterval?: number | ((latestData: Data | undefined) => number)\n /**\n * polling when the window is invisible (if `refreshInterval` is enabled)\n * @defaultValue false\n */\n refreshWhenHidden?: boolean\n /**\n * polling when the browser is offline (determined by `navigator.onLine`)\n *\n * When enabled, SWR will continue polling even when the browser is offline.\n * This can be useful for applications that need to check for connectivity\n * or cache updates while offline.\n *\n * @defaultValue false\n */\n refreshWhenOffline?: boolean\n /**\n * automatically revalidate when window gets focused\n *\n * When enabled, SWR will automatically revalidate data when the user\n * returns focus to the window/tab. This ensures data freshness when\n * users switch between applications.\n *\n * @defaultValue true\n * @see {@link https://swr.vercel.app/docs/revalidation | Revalidation Documentation}\n */\n revalidateOnFocus: boolean\n /**\n * automatically revalidate when the browser regains a network connection (via `navigator.onLine`)\n *\n * When enabled, SWR will automatically revalidate data when the browser\n * goes from offline to online state, ensuring data is up-to-date when\n * connectivity is restored.\n *\n * @defaultValue true\n * @see {@link https://swr.vercel.app/docs/revalidation | Revalidation Documentation}\n */\n revalidateOnReconnect: boolean\n /**\n * enable or disable automatic revalidation when component is mounted\n *\n * Controls whether SWR should automatically fetch data when the component\n * mounts. When `undefined`, the behavior depends on `revalidateIfStale`.\n *\n * @defaultValue undefined (inherits from revalidateIfStale)\n */\n revalidateOnMount?: boolean\n /**\n * automatically revalidate even if there is stale data\n * @defaultValue true\n * @see {@link https://swr.vercel.app/docs/revalidation#disable-automatic-revalidations}\n */\n revalidateIfStale: boolean\n /**\n * retry when fetcher has an error\n * @defaultValue true\n */\n shouldRetryOnError: boolean | ((err: Error) => boolean)\n /**\n * keep the previous result when key is changed but data is not ready\n * @defaultValue false\n */\n keepPreviousData?: boolean\n /**\n * @experimental enable React Suspense mode\n * @defaultValue false\n * @see {@link https://swr.vercel.app/docs/suspense}\n */\n suspense?: boolean\n /**\n * initial data to be returned (note: ***This is per-hook***)\n * @see {@link https://swr.vercel.app/docs/with-nextjs}\n */\n fallbackData?: Data | Promise\n /**\n * warns when preload data is missing for a given key, this includes fallback\n * data, preload calls, or initial data from the cache provider\n * @defaultValue false\n */\n strictServerPrefetchWarning?: boolean\n /**\n * the fetcher function\n */\n fetcher?: Fn\n /**\n * array of middleware functions\n * @see {@link https://swr.vercel.app/docs/middleware}\n */\n use?: Middleware[]\n /**\n * a key-value object of multiple fallback data\n * @see {@link https://swr.vercel.app/docs/with-nextjs#pre-rendering-with-default-data}\n */\n fallback: { [key: string]: any }\n /**\n * Function to detect whether pause revalidations, will ignore fetched data and errors when it returns true. Returns false by default.\n */\n isPaused: () => boolean\n /**\n * callback function when a request takes too long to load (see `loadingTimeout`)\n */\n onLoadingSlow: (\n key: string,\n config: Readonly>\n ) => void\n /**\n * callback function when a request finishes successfully\n */\n onSuccess: (\n data: Data,\n key: string,\n config: Readonly>\n ) => void\n /**\n * callback function when a request returns an error\n */\n onError: (\n err: Error,\n key: string,\n config: Readonly>\n ) => void\n /**\n * handler for error retry\n */\n onErrorRetry: (\n err: Error,\n key: string,\n config: Readonly>,\n revalidate: Revalidator,\n revalidateOpts: Required\n ) => void\n /**\n * callback function when a request is ignored due to race conditions\n */\n onDiscarded: (key: string) => void\n /**\n * Comparison function used to detect when returned data has changed, to avoid spurious rerenders. By default, [dequal](https://github.com/lukeed/dequal) is used.\n */\n compare: (a: Data | undefined, b: Data | undefined) => boolean\n /**\n * IsOnline and isVisible are functions that return a boolean, to determine if the application is \"active\". By default, SWR will bail out a revalidation if these conditions are not met.\n * @see {@link https://swr.vercel.app/docs/advanced/react-native#customize-focus-and-reconnect-events}\n */\n isOnline: () => boolean\n /**\n * IsOnline and isVisible are functions that return a boolean, to determine if the application is \"active\". By default, SWR will bail out a revalidation if these conditions are not met.\n * @see {@link https://swr.vercel.app/docs/advanced/react-native#customize-focus-and-reconnect-events}\n */\n isVisible: () => boolean\n}\n\nexport type FullConfiguration<\n Data = any,\n Error = any,\n Fn extends Fetcher = BareFetcher\n> = InternalConfiguration & PublicConfiguration\n\n/**\n * Provider configuration for custom focus and reconnect event handling.\n *\n * This configuration allows custom implementations for detecting window focus\n * and network reconnection events. Useful for React Native or other environments\n * where the default browser APIs are not available.\n *\n * @public\n * @see {@link https://swr.vercel.app/docs/advanced/react-native | React Native Documentation}\n */\nexport type ProviderConfiguration = {\n /**\n * Initialize focus event listener.\n *\n * @param callback - Function to call when window gains focus\n * @returns Optional cleanup function to remove the listener\n */\n initFocus: (callback: () => void) => (() => void) | void\n /**\n * Initialize reconnect event listener.\n *\n * @param callback - Function to call when network reconnects\n * @returns Optional cleanup function to remove the listener\n */\n initReconnect: (callback: () => void) => (() => void) | void\n}\n\n/**\n * The main useSWR hook interface with multiple overloads for different usage patterns.\n *\n * This interface provides type-safe overloads for various ways to call useSWR,\n * from simple key-only calls to complex configurations with custom fetchers.\n * The overloads ensure proper type inference for data, error, and configuration.\n *\n * @public\n *\n * @example Basic usage\n * ```ts\n * const { data, error } = useSWR('/api/data', fetcher)\n * ```\n *\n * @example With configuration\n * ```ts\n * const { data, error } = useSWR('/api/data', fetcher, {\n * refreshInterval: 1000,\n * revalidateOnFocus: false\n * })\n * ```\n *\n * @example Conditional fetching\n * ```ts\n * const { data, error } = useSWR(\n * user.id ? `/api/user/${user.id}` : null,\n * fetcher\n * )\n * ```\n *\n * @example Dynamic key with function\n * ```ts\n * const { data, error } = useSWR(\n * () => user.id ? [`/api/user/${user.id}`, user.token] : null,\n * ([url, token]) => fetcher(url, { headers: { Authorization: token } })\n * )\n * ```\n */\nexport interface SWRHook {\n /**\n * Basic usage with just a key. Requires a global fetcher to be configured,\n * or can be used for client-side state management without fetching.\n *\n * @example\n * ```ts\n * // With global fetcher\n * const { data } = useSWR('/api/user')\n *\n * // Client state management\n * const { data, mutate } = useSWR('user-settings')\n * mutate({ theme: 'dark' })\n * ```\n */\n (\n key: SWRKey\n ): SWRResponse\n\n /**\n * Most common usage pattern with key and explicit fetcher function.\n * The fetcher receives the key as its argument and returns the data.\n *\n * @example\n * ```ts\n * const { data, error } = useSWR('/api/user/123',\n * (url) => fetch(url).then(res => res.json())\n * )\n * ```\n */\n (\n key: SWRKey,\n fetcher: Fetcher | null\n ): SWRResponse\n\n /**\n * Key with fetcher using relaxed key constraints for dynamic or complex keys.\n * Allows more flexible key types including functions and objects.\n *\n * @example\n * ```ts\n * const { data } = useSWR(\n * () => user ? ['/api/posts', user.id] : null,\n * ([url, userId]) => fetchUserPosts(url, userId)\n * )\n * ```\n */\n (\n key: SWRKey,\n fetcher: Fetcher | null\n ): SWRResponse\n\n /**\n * Key-only with advanced configuration options and strict typing.\n * Useful when you need specific SWR options but rely on a global fetcher.\n *\n * @example\n * ```ts\n * const { data } = useSWR('/api/user', {\n * refreshInterval: 5000,\n * revalidateOnFocus: false\n * })\n * ```\n */\n <\n Data = any,\n Error = any,\n SWRKey extends Key = StrictKey,\n SWROptions extends\n | SWRConfiguration>\n | undefined =\n | SWRConfiguration>\n | undefined\n >(\n key: SWRKey\n ): SWRResponse\n\n /**\n * Key with fetcher and advanced configuration options with strict typing.\n * Provides full control over fetching behavior and SWR options.\n *\n * @example\n * ```ts\n * const { data } = useSWR('/api/data', fetcher, {\n * suspense: true,\n * fallbackData: initialData\n * })\n * ```\n */\n <\n Data = any,\n Error = any,\n SWRKey extends Key = StrictKey,\n SWROptions extends\n | SWRConfiguration>\n | undefined =\n | SWRConfiguration>\n | undefined\n >(\n key: SWRKey,\n fetcher: Fetcher | null\n ): SWRResponse\n\n /**\n * Key with configuration object but no explicit fetcher. Uses global fetcher\n * or can be used for pure client state management with configuration.\n *\n * @example\n * ```ts\n * // With global fetcher and config\n * const { data } = useSWR('/api/user', {\n * refreshInterval: 1000\n * })\n *\n * // Client state with config\n * const { data } = useSWR('local-state', {\n * fallbackData: defaultValue\n * })\n * ```\n */\n <\n Data = any,\n Error = any,\n SWRKey extends Key = StrictKey,\n SWROptions extends\n | SWRConfiguration>\n | undefined =\n | SWRConfiguration>\n | undefined\n >(\n key: SWRKey,\n config: SWRConfigurationWithOptionalFallback\n ): SWRResponse\n\n /**\n * Complete signature with key, fetcher, and configuration options.\n * Provides maximum flexibility and control over all SWR behavior.\n *\n * @example\n * ```ts\n * const { data, error, isLoading } = useSWR(\n * '/api/user',\n * async (url) => {\n * const res = await fetch(url)\n * if (!res.ok) throw new Error('Failed to fetch')\n * return res.json()\n * },\n * {\n * refreshInterval: 5000,\n * onError: (error) => console.error('SWR Error:', error),\n * fallbackData: { name: 'Loading...' }\n * }\n * )\n * ```\n */\n <\n Data = any,\n Error = any,\n SWRKey extends Key = StrictKey,\n SWROptions extends\n | SWRConfiguration>\n | undefined =\n | SWRConfiguration>\n | undefined\n >(\n key: SWRKey,\n fetcher: Fetcher | null,\n config: SWRConfigurationWithOptionalFallback\n ): SWRResponse\n\n /**\n * Simple key-only usage with flexible key types. Most permissive overload\n * that accepts any valid key format.\n *\n * @example\n * ```ts\n * const { data } = useSWR('/api/data')\n * const { data: userData } = useSWR(['user', userId])\n * const { data: settings } = useSWR({ endpoint: '/settings', version: 'v1' })\n * ```\n */\n (key: Key): SWRResponse\n\n /**\n * Key-only with configuration options using bare fetcher constraints.\n * Suitable for cases where fetcher type safety is less important.\n *\n * @example\n * ```ts\n * const { data } = useSWR('/api/data', {\n * dedupingInterval: 5000\n * })\n * ```\n */\n <\n Data = any,\n Error = any,\n SWROptions extends\n | SWRConfiguration>\n | undefined = SWRConfiguration> | undefined\n >(\n key: Key\n ): SWRResponse\n\n /**\n * Key with bare fetcher function that accepts any arguments.\n * Provides less type safety but maximum flexibility for fetcher signatures.\n *\n * @example\n * ```ts\n * const { data } = useSWR('/api/user',\n * (...args) => customFetcher(...args)\n * )\n * ```\n */\n <\n Data = any,\n Error = any,\n SWROptions extends\n | SWRConfiguration>\n | undefined = SWRConfiguration> | undefined\n >(\n key: Key,\n fetcher: BareFetcher | null\n ): SWRResponse\n\n /**\n * Key with configuration using relaxed fetcher typing constraints.\n * Useful when working with dynamic or loosely-typed fetcher functions.\n *\n * @example\n * ```ts\n * const { data } = useSWR(dynamicKey, {\n * fetcher: customFetcher,\n * refreshInterval: 2000\n * })\n * ```\n */\n <\n Data = any,\n Error = any,\n SWROptions extends\n | SWRConfiguration>\n | undefined = SWRConfiguration> | undefined\n >(\n key: Key,\n config: SWRConfigurationWithOptionalFallback\n ): SWRResponse\n\n /**\n * Complete signature with key, bare fetcher, and configuration.\n * Most flexible overload with minimal type constraints, suitable for\n * complex scenarios where strict typing isn't feasible.\n *\n * @example\n * ```ts\n * const { data } = useSWR(\n * complexKey,\n * (...args) => legacyFetcher(...args),\n * {\n * refreshInterval: 10000,\n * errorRetryCount: 3\n * }\n * )\n * ```\n */\n <\n Data = any,\n Error = any,\n SWROptions extends\n | SWRConfiguration>\n | undefined = SWRConfiguration> | undefined\n >(\n key: Key,\n fetcher: BareFetcher | null,\n config: SWRConfigurationWithOptionalFallback\n ): SWRResponse\n}\n\n/**\n * Middleware function type for extending SWR functionality.\n *\n * Middleware functions receive the next SWR hook in the chain and return\n * a modified hook function. This allows for composition of multiple\n * middleware functions to add features like logging, caching, or\n * request/response transformation.\n *\n * The middleware guarantees that a SWRHook receives a key, fetcher,\n * and config as arguments, providing a consistent interface for\n * middleware authors.\n *\n * @param useSWRNext - The next SWR hook function in the middleware chain\n * @returns A new SWR hook function with middleware functionality applied\n *\n * @template Data - The type of data returned by the fetcher\n * @template Error - The type of error that can be thrown\n *\n * @public\n * @see {@link https://swr.vercel.app/docs/middleware | Middleware Documentation}\n *\n * @example\n * ```ts\n * const logger: Middleware = (useSWRNext) => (key, fetcher, config) => {\n * console.log('SWR Request:', key)\n * return useSWRNext(key, fetcher, config)\n * }\n * ```\n */\nexport type Middleware = (\n useSWRNext: SWRHook\n) => (\n key: Key,\n fetcher: BareFetcher | null,\n config: SWRConfiguration>\n) => SWRResponse\n\n/**\n * Represents a tuple of arguments that can be passed to a fetcher.\n *\n * The first element is typically the primary key (like a URL), followed\n * by additional parameters that affect the request (like query parameters,\n * headers, or request options).\n *\n */\ntype ArgumentsTuple = readonly [any, ...unknown[]]\n\n/**\n * Valid types for SWR keys.\n *\n * SWR keys identify unique requests and can be:\n * - `string`: Simple URL or identifier\n * - `ArgumentsTuple`: Array with URL and additional parameters\n * - `Record`: Object that will be serialized\n * - `null | undefined | false`: Falsy values disable the request\n *\n * When a key is falsy, SWR will not make the request, allowing for\n * conditional fetching based on application state.\n *\n * @public\n *\n * @example\n * ```ts\n * // String key\n * useSWR('/api/users', fetcher)\n *\n * // Array key with parameters\n * useSWR(['/api/user', userId], ([url, id]) => fetcher(`${url}/${id}`))\n *\n * // Object key\n * useSWR({ url: '/api/data', params: { page: 1 } }, fetcher)\n *\n * // Conditional key\n * useSWR(userId ? `/api/user/${userId}` : null, fetcher)\n * ```\n */\nexport type Arguments =\n | string\n | ArgumentsTuple\n | Record\n | null\n | undefined\n | false\n\n/**\n * SWR key that can be static or a function that returns arguments.\n *\n * When a function is provided, it's called on each render to determine\n * the current key. This allows for dynamic keys based on component state\n * or props.\n *\n * @public\n *\n * @example\n * ```ts\n * // Static key\n * useSWR('/api/data', fetcher)\n *\n * // Dynamic key function\n * useSWR(() => user ? `/api/user/${user.id}` : null, fetcher)\n * ```\n */\nexport type Key = Arguments | (() => Arguments)\n\n/**\n * Strict tuple key type that only allows tuples or falsy values.\n *\n * @internal\n */\nexport type StrictTupleKey = ArgumentsTuple | null | undefined | false\n\n/**\n * Strict key type for internal use.\n *\n * @internal\n */\ntype StrictKey = StrictTupleKey | (() => StrictTupleKey)\n/**\n * Callback function type for mutator operations.\n *\n * This function receives the current cached data and can return new data\n * to update the cache. It can be synchronous or asynchronous, and can\n * return undefined to indicate no change should be made.\n *\n * @template Data - The type of the cached data\n * @param currentData - The current data in the cache (may be undefined)\n * @returns New data to set, undefined for no change, or a Promise resolving to either\n *\n * @public\n *\n * @example\n * ```ts\n * // Increment a counter\n * mutate(key, (current: number = 0) => current + 1)\n *\n * // Async update\n * mutate(key, async (current) => {\n * const updated = await updateData(current)\n * return updated\n * })\n * ```\n */\nexport type MutatorCallback = (\n currentData?: Data\n) => Promise | undefined | Data\n\n/**\n * Options for configuring mutator behavior.\n *\n * These options control how the mutation affects the cache, revalidation,\n * and error handling behavior.\n *\n * @template Data - The type of the data related to the key\n * @template MutationData - The type of the data returned by the mutator\n *\n * @public\n */\nexport type MutatorOptions = {\n /**\n * Whether to revalidate the cache after mutation.\n *\n * Can be a boolean or a function that receives the new data and key\n * to determine whether revalidation should occur.\n *\n * @defaultValue true\n */\n revalidate?: boolean | ((data: Data, key: Arguments) => boolean)\n\n /**\n * Whether and how to populate the cache with mutation results.\n *\n * - `false`: Don't update the cache\n * - `true`: Update cache with mutation result directly\n * - Function: Transform mutation result before caching\n *\n * @defaultValue true\n */\n populateCache?:\n | boolean\n | ((result: MutationData, currentData: Data | undefined) => Data)\n\n /**\n * Optimistic data to show immediately while mutation is pending.\n *\n * Can be the data directly or a function that computes it based on\n * current and displayed data. Useful for immediate UI feedback.\n *\n * @defaultValue undefined\n */\n optimisticData?:\n | Data\n | ((currentData: Data | undefined, displayedData: Data | undefined) => Data)\n\n /**\n * Whether to rollback optimistic updates on error.\n *\n * Can be a boolean or a function that receives the error to determine\n * whether rollback should occur.\n *\n * @defaultValue true\n */\n rollbackOnError?: boolean | ((error: unknown) => boolean)\n\n /**\n * Whether to throw errors instead of returning them in the error field.\n *\n * When true, errors will be thrown and can be caught with try/catch.\n * When false, errors are returned in the response object.\n *\n * @defaultValue false\n */\n throwOnError?: boolean\n}\n\nexport type MutatorConfig = {\n revalidate?: boolean\n populateCache?: boolean\n}\n\nexport type Broadcaster = (\n cache: Cache,\n key: string,\n data: Data,\n error?: Error,\n isValidating?: boolean,\n revalidate?: boolean,\n populateCache?: boolean\n) => Promise\n\n/**\n * Internal state structure stored in the cache.\n *\n * This represents the complete state for a cache entry, including\n * data, error, and loading states. All fields are optional as they\n * may not be present depending on the request lifecycle.\n *\n * @template Data - The type of data stored\n * @template Error - The type of error that can occur\n *\n * @internal\n */\nexport type State = {\n /** The cached data, if available */\n data?: Data\n /** The error object, if an error occurred */\n error?: Error\n /** Whether a revalidation is currently in progress */\n isValidating?: boolean\n /** Whether this is the initial load with no cached data */\n isLoading?: boolean\n}\n\nexport type MutatorFn = (\n cache: Cache,\n key: Key,\n data?: Data | Promise | MutatorCallback,\n opts?: boolean | MutatorOptions\n) => Promise\n\nexport type MutatorWrapper = Fn extends (\n ...args: [...infer Parameters]\n) => infer Result\n ? Parameters[3] extends boolean\n ? Result\n : Parameters[3] extends Required>\n ? Parameters[3]['populateCache'] extends false\n ? never\n : Result\n : Result\n : never\n\nexport type Mutator = MutatorWrapper>\n\nexport interface ScopedMutator {\n /**\n * @typeParam Data - The type of the data related to the key\n * @typeParam MutationData - The type of the data returned by the mutator\n */\n (\n matcher: (key?: Arguments) => boolean,\n data?: MutationData | Promise | MutatorCallback,\n opts?: boolean | MutatorOptions\n ): Promise>\n /**\n * @typeParam Data - The type of the data related to the key\n * @typeParam MutationData - The type of the data returned by the mutator\n */\n (\n key: Arguments,\n data?: T | Promise | MutatorCallback,\n opts?: boolean | MutatorOptions\n ): Promise\n}\n\n/**\n * @typeParam Data - The type of the data related to the key\n * @typeParam MutationData - The type of the data returned by the mutator\n */\nexport type KeyedMutator = (\n data?: Data | Promise | MutatorCallback,\n opts?: boolean | MutatorOptions\n) => Promise\n\nexport type SWRConfiguration<\n Data = any,\n Error = any,\n Fn extends BareFetcher = BareFetcher\n> = Partial> &\n Partial & {\n provider?: (cache: Readonly) => Cache\n }\n\nexport type IsLoadingResponse<\n Data = any,\n Options = SWRDefaultOptions\n> = SWRGlobalConfig extends { suspense: true }\n ? Options extends { suspense: true }\n ? false\n : false\n : boolean\n\ntype SWRDefaultOptions = SWRConfiguration>\ntype SWRConfigurationWithOptionalFallback =\n // If `Options` has `fallbackData`, this turns it to optional instead.\n Options extends SWRConfiguration &\n Required>\n ? Omit & Pick, 'fallbackData'>\n : Options\n\n/**\n * The response object returned by SWR hooks.\n *\n * This interface represents the return value of useSWR and related hooks,\n * providing access to data, error state, and control functions.\n *\n * @template Data - The type of data returned by the fetcher\n * @template Error - The type of error that can be thrown\n * @template Config - The configuration type used to determine blocking behavior\n *\n * @public\n */\nexport interface SWRResponse {\n /**\n * The data returned by the fetcher function.\n *\n * - When suspense is enabled or fallbackData is provided: always defined\n * - Otherwise: `undefined` during initial load or when key is falsy\n */\n data: BlockingData extends true ? Data : Data | undefined\n\n /**\n * The error object thrown by the fetcher function.\n *\n * `undefined` when there's no error or when a request is in progress.\n */\n error: Error | undefined\n\n /**\n * Function to mutate the cached data for this specific key.\n *\n * This is a bound version of the global mutate function that automatically\n * uses the current key, providing type safety and convenience.\n */\n mutate: KeyedMutator\n\n /**\n * Whether the request is currently being validated (loading fresh data).\n *\n * `true` during initial load, revalidation, or when mutate is called\n * with a promise or async function.\n */\n isValidating: boolean\n\n /**\n * Whether the request is in initial loading state.\n *\n * `true` only during the initial load when there's no cached data.\n * Unlike `isValidating`, this becomes `false` once data is available.\n */\n isLoading: IsLoadingResponse\n}\n\nexport type KeyLoader =\n | ((index: number, previousPageData: any | null) => Args)\n | null\n\nexport interface RevalidatorOptions {\n retryCount?: number\n dedupe?: boolean\n}\n\nexport type Revalidator = (\n revalidateOpts?: RevalidatorOptions\n) => Promise | void\n\nexport type RevalidateEvent =\n | typeof revalidateEvents.FOCUS_EVENT\n | typeof revalidateEvents.RECONNECT_EVENT\n | typeof revalidateEvents.MUTATE_EVENT\n | typeof revalidateEvents.ERROR_REVALIDATE_EVENT\ntype RevalidateCallbackReturnType = {\n [revalidateEvents.FOCUS_EVENT]: void\n [revalidateEvents.RECONNECT_EVENT]: void\n [revalidateEvents.MUTATE_EVENT]: Promise\n [revalidateEvents.ERROR_REVALIDATE_EVENT]: void\n}\nexport type RevalidateCallback = (\n type: K,\n opts?: any\n) => RevalidateCallbackReturnType[K]\n\n/**\n * Cache interface for storing SWR state.\n *\n * This interface defines the contract for cache providers used by SWR.\n * The default implementation uses a Map, but custom cache providers\n * can implement this interface to provide different storage mechanisms.\n *\n * @template Data - The type of data stored in the cache\n *\n * @public\n * @see {@link https://swr.vercel.app/docs/advanced/cache | Cache Documentation}\n */\nexport interface Cache {\n /**\n * Get an iterator of all cache keys.\n *\n * @returns Iterator that yields all cache keys as strings\n */\n keys(): IterableIterator\n\n /**\n * Get the cached state for a key.\n *\n * @param key - The cache key to look up\n * @returns The cached state or undefined if not found\n */\n get(key: string): State | undefined\n\n /**\n * Set the cached state for a key.\n *\n * @param key - The cache key to set\n * @param value - The state to cache\n */\n set(key: string, value: State): void\n\n /**\n * Delete a cached entry.\n *\n * @param key - The cache key to delete\n */\n delete(key: string): void\n}\n\nexport interface StateDependencies {\n data?: boolean\n error?: boolean\n isValidating?: boolean\n isLoading?: boolean\n}\n"
},
{
"path": "src/_internal/utils/cache.ts",
"content": "import { defaultConfigOptions } from './web-preset'\nimport { IS_SERVER } from './env'\nimport { UNDEFINED, mergeObjects, noop } from './shared'\nimport { internalMutate } from './mutate'\nimport { SWRGlobalState } from './global-state'\nimport * as revalidateEvents from '../events'\n\nimport type {\n Cache,\n ScopedMutator,\n RevalidateEvent,\n RevalidateCallback,\n ProviderConfiguration,\n GlobalState\n} from '../types'\n\nconst revalidateAllKeys = (\n revalidators: Record,\n type: RevalidateEvent\n) => {\n for (const key in revalidators) {\n if (revalidators[key][0]) revalidators[key][0](type)\n }\n}\n\nexport const initCache = (\n provider: Cache,\n options?: Partial\n):\n | [Cache, ScopedMutator, () => void, () => void]\n | [Cache, ScopedMutator]\n | undefined => {\n // The global state for a specific provider will be used to deduplicate\n // requests and store listeners. As well as a mutate function that is bound to\n // the cache.\n\n // The provider's global state might be already initialized. Let's try to get the\n // global state associated with the provider first.\n if (!SWRGlobalState.has(provider)) {\n const opts = mergeObjects(defaultConfigOptions, options)\n\n // If there's no global state bound to the provider, create a new one with the\n // new mutate function.\n const EVENT_REVALIDATORS = Object.create(null)\n\n const mutate = internalMutate.bind(UNDEFINED, provider) as ScopedMutator\n let unmount = noop\n\n const subscriptions: Record void)[]> =\n Object.create(null)\n const subscribe = (\n key: string,\n callback: (current: any, prev: any) => void\n ) => {\n const subs = subscriptions[key] || []\n subscriptions[key] = subs\n\n subs.push(callback)\n return () => subs.splice(subs.indexOf(callback), 1)\n }\n const setter = (key: string, value: any, prev: any) => {\n provider.set(key, value)\n const subs = subscriptions[key]\n if (subs) {\n for (const fn of subs) {\n fn(value, prev)\n }\n }\n }\n\n const initProvider = () => {\n if (!SWRGlobalState.has(provider)) {\n // Update the state if it's new, or if the provider has been extended.\n SWRGlobalState.set(provider, [\n EVENT_REVALIDATORS,\n Object.create(null),\n Object.create(null),\n Object.create(null),\n mutate,\n setter,\n subscribe\n ])\n if (!IS_SERVER) {\n // When listening to the native events for auto revalidations,\n // we intentionally put a delay (setTimeout) here to make sure they are\n // fired after immediate JavaScript executions, which can be\n // React's state updates.\n // This avoids some unnecessary revalidations such as\n // https://github.com/vercel/swr/issues/1680.\n const releaseFocus = opts.initFocus(\n setTimeout.bind(\n UNDEFINED,\n revalidateAllKeys.bind(\n UNDEFINED,\n EVENT_REVALIDATORS,\n revalidateEvents.FOCUS_EVENT\n )\n )\n )\n const releaseReconnect = opts.initReconnect(\n setTimeout.bind(\n UNDEFINED,\n revalidateAllKeys.bind(\n UNDEFINED,\n EVENT_REVALIDATORS,\n revalidateEvents.RECONNECT_EVENT\n )\n )\n )\n unmount = () => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n releaseFocus && releaseFocus()\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n releaseReconnect && releaseReconnect()\n // When un-mounting, we need to remove the cache provider from the state\n // storage too because it's a side-effect. Otherwise, when re-mounting we\n // will not re-register those event listeners.\n SWRGlobalState.delete(provider)\n }\n }\n }\n }\n initProvider()\n\n // This is a new provider, we need to initialize it and setup DOM events\n // listeners for `focus` and `reconnect` actions.\n\n // We might want to inject an extra layer on top of `provider` in the future,\n // such as key serialization, auto GC, etc.\n // For now, it's just a `Map` interface without any modifications.\n return [provider, mutate, initProvider, unmount]\n }\n\n return [provider, (SWRGlobalState.get(provider) as GlobalState)[4]]\n}\n"
},
{
"path": "src/_internal/utils/config-context.ts",
"content": "'use client'\n\nimport type { FC, PropsWithChildren } from 'react'\nimport {\n createContext,\n createElement,\n useContext,\n useMemo,\n useRef\n} from 'react'\nimport { cache as defaultCache } from './config'\nimport { initCache } from './cache'\nimport { mergeConfigs } from './merge-config'\nimport { UNDEFINED, mergeObjects, isFunction } from './shared'\nimport { useIsomorphicLayoutEffect } from './env'\nimport type { SWRConfiguration, FullConfiguration } from '../types'\n\nexport const SWRConfigContext = createContext>({})\n\nconst SWRConfig: FC<\n PropsWithChildren<{\n value?:\n | SWRConfiguration\n | ((parentConfig?: SWRConfiguration) => SWRConfiguration)\n }>\n> = props => {\n const { value } = props\n const parentConfig = useContext(SWRConfigContext)\n const isFunctionalConfig = isFunction(value)\n const config = useMemo(\n () => (isFunctionalConfig ? value(parentConfig) : value),\n [isFunctionalConfig, parentConfig, value]\n )\n // Extend parent context values and middleware.\n const extendedConfig = useMemo(\n () => (isFunctionalConfig ? config : mergeConfigs(parentConfig, config)),\n [isFunctionalConfig, parentConfig, config]\n )\n\n // Should not use the inherited provider.\n const provider = config && config.provider\n\n // initialize the cache only on first access.\n const cacheContextRef = useRef>(UNDEFINED)\n if (provider && !cacheContextRef.current) {\n cacheContextRef.current = initCache(\n provider((extendedConfig as any).cache || defaultCache),\n config\n )\n }\n const cacheContext = cacheContextRef.current\n\n // Override the cache if a new provider is given.\n if (cacheContext) {\n ;(extendedConfig as any).cache = cacheContext[0]\n ;(extendedConfig as any).mutate = cacheContext[1]\n }\n\n // Unsubscribe events.\n useIsomorphicLayoutEffect(() => {\n if (cacheContext) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n cacheContext[2] && cacheContext[2]()\n return cacheContext[3]\n }\n }, [])\n\n return createElement(\n SWRConfigContext.Provider,\n mergeObjects(props, {\n value: extendedConfig\n })\n )\n}\n\nexport default SWRConfig\n"
},
{
"path": "src/_internal/utils/config.ts",
"content": "import type {\n PublicConfiguration,\n FullConfiguration,\n RevalidatorOptions,\n Revalidator,\n ScopedMutator,\n Cache\n} from '../types'\n\nimport { initCache } from './cache'\nimport { preset } from './web-preset'\nimport { slowConnection } from './env'\nimport { isUndefined, noop, mergeObjects } from './shared'\n\nimport { dequal } from 'dequal/lite'\n\n// error retry\nconst onErrorRetry = (\n _: unknown,\n __: string,\n config: Readonly,\n revalidate: Revalidator,\n opts: Required\n): void => {\n const maxRetryCount = config.errorRetryCount\n const currentRetryCount = opts.retryCount\n\n // Exponential backoff\n const timeout =\n ~~(\n (Math.random() + 0.5) *\n (1 << (currentRetryCount < 8 ? currentRetryCount : 8))\n ) * config.errorRetryInterval\n\n if (!isUndefined(maxRetryCount) && currentRetryCount > maxRetryCount) {\n return\n }\n\n setTimeout(revalidate, timeout, opts)\n}\n\nconst compare = dequal\n\n// Default cache provider\nconst [cache, mutate] = initCache(new Map()) as [Cache, ScopedMutator]\nexport { cache, mutate, compare }\n\n// Default config\nexport const defaultConfig: FullConfiguration = mergeObjects(\n {\n // events\n onLoadingSlow: noop,\n onSuccess: noop,\n onError: noop,\n onErrorRetry,\n onDiscarded: noop,\n\n // switches\n revalidateOnFocus: true,\n revalidateOnReconnect: true,\n revalidateIfStale: true,\n shouldRetryOnError: true,\n\n // timeouts\n errorRetryInterval: slowConnection ? 10000 : 5000,\n focusThrottleInterval: 5 * 1000,\n dedupingInterval: 2 * 1000,\n loadingTimeout: slowConnection ? 5000 : 3000,\n\n // providers\n compare,\n isPaused: () => false,\n cache,\n mutate,\n fallback: {}\n },\n // use web preset by default\n preset\n)\n"
},
{
"path": "src/_internal/utils/devtools.ts",
"content": "import React from 'react'\nimport { isWindowDefined } from './helper'\n\n// @ts-expect-error\nconst enableDevtools = isWindowDefined && window.__SWR_DEVTOOLS_USE__\n\nexport const use = enableDevtools\n ? // @ts-expect-error\n window.__SWR_DEVTOOLS_USE__\n : []\n\nexport const setupDevTools = () => {\n if (enableDevtools) {\n // @ts-expect-error\n window.__SWR_DEVTOOLS_REACT__ = React\n }\n}\n"
},
{
"path": "src/_internal/utils/env.ts",
"content": "import React, { useEffect, useLayoutEffect } from 'react'\nimport { hasRequestAnimationFrame, isLegacyDeno, isWindowDefined } from './helper'\n\nexport const IS_REACT_LEGACY = !React.useId\n\nexport const IS_SERVER = !isWindowDefined || isLegacyDeno\n\n// Polyfill requestAnimationFrame\nexport const rAF = (\n f: (...args: any[]) => void\n): number | ReturnType =>\n hasRequestAnimationFrame()\n ? window['requestAnimationFrame'](f)\n : setTimeout(f, 1)\n\n// React currently throws a warning when using useLayoutEffect on the server.\n// To get around it, we can conditionally useEffect on the server (no-op) and\n// useLayoutEffect in the browser.\nexport const useIsomorphicLayoutEffect = IS_SERVER ? useEffect : useLayoutEffect\n\n// This assignment is to extend the Navigator type to use effectiveType.\nconst navigatorConnection =\n typeof navigator !== 'undefined' &&\n (\n navigator as Navigator & {\n connection?: {\n effectiveType: string\n saveData: boolean\n }\n }\n ).connection\n\n// Adjust the config based on slow connection status (<= 70Kbps).\nexport const slowConnection =\n !IS_SERVER &&\n navigatorConnection &&\n (['slow-2g', '2g'].includes(navigatorConnection.effectiveType) ||\n navigatorConnection.saveData)\n"
},
{
"path": "src/_internal/utils/global-state.ts",
"content": "import type { Cache, GlobalState } from '../types'\n\n// Global state used to deduplicate requests and store listeners\nexport const SWRGlobalState = new WeakMap()\n"
},
{
"path": "src/_internal/utils/hash.ts",
"content": "import { OBJECT, isUndefined } from './shared'\n\n// use WeakMap to store the object->key mapping\n// so the objects can be garbage collected.\n// WeakMap uses a hashtable under the hood, so the lookup\n// complexity is almost O(1).\nconst table = new WeakMap()\n\nconst getTypeName = (value: any) => OBJECT.prototype.toString.call(value)\n\nconst isObjectTypeName = (typeName: string, type: string) =>\n typeName === `[object ${type}]`\n\n// counter of the key\nlet counter = 0\n\n// A stable hash implementation that supports:\n// - Fast and ensures unique hash properties\n// - Handles unserializable values\n// - Handles object key ordering\n// - Generates short results\n//\n// This is not a serialization function, and the result is not guaranteed to be\n// parsable.\nexport const stableHash = (arg: any): string => {\n const type = typeof arg\n const typeName = getTypeName(arg)\n const isDate = isObjectTypeName(typeName, 'Date')\n const isRegex = isObjectTypeName(typeName, 'RegExp')\n const isPlainObject = isObjectTypeName(typeName, 'Object')\n let result: any\n let index: any\n\n if (OBJECT(arg) === arg && !isDate && !isRegex) {\n // Object/function, not null/date/regexp. Use WeakMap to store the id first.\n // If it's already hashed, directly return the result.\n result = table.get(arg)\n if (result) return result\n\n // Store the hash first for circular reference detection before entering the\n // recursive `stableHash` calls.\n // For other objects like set and map, we use this id directly as the hash.\n result = ++counter + '~'\n table.set(arg, result)\n\n if (Array.isArray(arg)) {\n // Array.\n result = '@'\n for (index = 0; index < arg.length; index++) {\n result += stableHash(arg[index]) + ','\n }\n table.set(arg, result)\n }\n if (isPlainObject) {\n // Object, sort keys.\n result = '#'\n const keys = OBJECT.keys(arg).sort()\n while (!isUndefined((index = keys.pop() as string))) {\n if (!isUndefined(arg[index])) {\n result += index + ':' + stableHash(arg[index]) + ','\n }\n }\n table.set(arg, result)\n }\n } else {\n result = isDate\n ? arg.toJSON()\n : type == 'symbol'\n ? arg.toString()\n : type == 'string'\n ? JSON.stringify(arg)\n : '' + arg\n }\n\n return result\n}\n"
},
{
"path": "src/_internal/utils/helper.ts",
"content": "import type { Cache, State, GlobalState } from '../types'\nimport { SWRGlobalState } from './global-state'\nimport { isUndefined, mergeObjects } from './shared'\n\nconst EMPTY_CACHE = {}\nconst INITIAL_CACHE: Record = {}\n\nconst STR_UNDEFINED = 'undefined'\n\n// NOTE: Use the function to guarantee it's re-evaluated between jsdom and node runtime for tests.\nexport const isWindowDefined = typeof window != STR_UNDEFINED\nexport const isDocumentDefined = typeof document != STR_UNDEFINED\nexport const isLegacyDeno = isWindowDefined && 'Deno' in window\n\nexport const hasRequestAnimationFrame = () =>\n isWindowDefined && typeof window['requestAnimationFrame'] != STR_UNDEFINED\n\nexport const createCacheHelper = >(\n cache: Cache,\n key: string | undefined\n) => {\n const state = SWRGlobalState.get(cache) as GlobalState\n return [\n // Getter\n () => ((!isUndefined(key) && cache.get(key)) || EMPTY_CACHE) as T,\n // Setter\n (info: T) => {\n if (!isUndefined(key)) {\n const prev = cache.get(key)\n\n // Before writing to the store, we keep the value in the initial cache\n // if it's not there yet.\n if (!(key in INITIAL_CACHE)) {\n INITIAL_CACHE[key] = prev\n }\n\n state[5](key, mergeObjects(prev, info), prev || EMPTY_CACHE)\n }\n },\n // Subscriber\n state[6],\n // Get server cache snapshot\n () => {\n if (!isUndefined(key)) {\n // If the cache was updated on the client, we return the stored initial value.\n if (key in INITIAL_CACHE) return INITIAL_CACHE[key]\n }\n\n // If we haven't done any client-side updates, we return the current value.\n return ((!isUndefined(key) && cache.get(key)) || EMPTY_CACHE) as T\n }\n ] as const\n}\n\n// export { UNDEFINED, OBJECT, isUndefined, isFunction, mergeObjects, isPromiseLike }\n"
},
{
"path": "src/_internal/utils/merge-config.ts",
"content": "import { mergeObjects } from './shared'\nimport type { FullConfiguration } from '../types'\n\nexport const mergeConfigs = (\n a: Partial,\n b?: Partial\n) => {\n // Need to create a new object to avoid mutating the original here.\n const v: Partial = mergeObjects(a, b)\n\n // If two configs are provided, merge their `use` and `fallback` options.\n if (b) {\n const { use: u1, fallback: f1 } = a\n const { use: u2, fallback: f2 } = b\n if (u1 && u2) {\n v.use = u1.concat(u2)\n }\n if (f1 && f2) {\n v.fallback = mergeObjects(f1, f2)\n }\n }\n\n return v\n}\n"
},
{
"path": "src/_internal/utils/middleware-preset.ts",
"content": "import { use as devtoolsUse } from './devtools'\nimport { middleware as preload } from './preload'\n\nexport const BUILT_IN_MIDDLEWARE = devtoolsUse.concat(preload)\n"
},
{
"path": "src/_internal/utils/mutate.ts",
"content": "import { serialize } from './serialize'\nimport { createCacheHelper } from './helper'\nimport {\n isFunction,\n isUndefined,\n UNDEFINED,\n mergeObjects,\n isPromiseLike\n} from './shared'\nimport { SWRGlobalState } from './global-state'\nimport { getTimestamp } from './timestamp'\nimport * as revalidateEvents from '../events'\nimport type {\n Cache,\n MutatorCallback,\n MutatorOptions,\n GlobalState,\n State,\n Arguments,\n Key\n} from '../types'\n\ntype KeyFilter = (key?: Arguments) => boolean\ntype MutateState = State & {\n // The previously committed data.\n _c?: Data\n}\n\nexport async function internalMutate(\n cache: Cache,\n _key: KeyFilter,\n _data?: Data | Promise | MutatorCallback,\n _opts?: boolean | MutatorOptions\n): Promise>\nexport async function internalMutate(\n cache: Cache,\n _key: Arguments,\n _data?: Data | Promise | MutatorCallback,\n _opts?: boolean | MutatorOptions\n): Promise\nexport async function internalMutate(\n ...args: [\n cache: Cache,\n _key: KeyFilter | Arguments,\n _data?: Data | Promise | MutatorCallback,\n _opts?: boolean | MutatorOptions\n ]\n): Promise {\n const [cache, _key, _data, _opts] = args\n\n // When passing as a boolean, it's explicitly used to disable/enable\n // revalidation.\n const options = mergeObjects(\n { populateCache: true, throwOnError: true },\n typeof _opts === 'boolean' ? { revalidate: _opts } : _opts || {}\n )\n\n let populateCache = options.populateCache\n\n const rollbackOnErrorOption = options.rollbackOnError\n let optimisticData = options.optimisticData\n\n const rollbackOnError = (error: unknown): boolean => {\n return typeof rollbackOnErrorOption === 'function'\n ? rollbackOnErrorOption(error)\n : rollbackOnErrorOption !== false\n }\n const throwOnError = options.throwOnError\n\n // If the second argument is a key filter, return the mutation results for all\n // filtered keys.\n if (isFunction(_key)) {\n const keyFilter = _key\n const matchedKeys: Key[] = []\n const it = cache.keys()\n for (const key of it) {\n if (\n // Skip the special useSWRInfinite and useSWRSubscription keys.\n !/^\\$(inf|sub)\\$/.test(key) &&\n keyFilter((cache.get(key) as { _k: Arguments })._k)\n ) {\n matchedKeys.push(key)\n }\n }\n return Promise.all(matchedKeys.map(mutateByKey))\n }\n\n return mutateByKey(_key)\n\n async function mutateByKey(_k: Key): Promise {\n // Serialize key\n const [key] = serialize(_k)\n if (!key) return\n const [get, set] = createCacheHelper>(cache, key)\n const [EVENT_REVALIDATORS, MUTATION, FETCH, PRELOAD] = SWRGlobalState.get(\n cache\n ) as GlobalState\n\n const startRevalidate = () => {\n const revalidators = EVENT_REVALIDATORS[key]\n const revalidate = isFunction(options.revalidate)\n ? options.revalidate(get().data, _k)\n : options.revalidate !== false\n if (revalidate) {\n // Invalidate the key by deleting the concurrent request markers so new\n // requests will not be deduped.\n delete FETCH[key]\n delete PRELOAD[key]\n if (revalidators && revalidators[0]) {\n return revalidators[0](revalidateEvents.MUTATE_EVENT).then(\n () => get().data\n )\n }\n }\n return get().data\n }\n\n // If there is no new data provided, revalidate the key with current state.\n if (args.length < 3) {\n // Revalidate and broadcast state.\n return startRevalidate()\n }\n\n let data: any = _data\n let error: unknown\n let isError = false\n\n // Update global timestamps.\n const beforeMutationTs = getTimestamp()\n MUTATION[key] = [beforeMutationTs, 0]\n\n const hasOptimisticData = !isUndefined(optimisticData)\n const state = get()\n\n // `displayedData` is the current value on screen. It could be the optimistic value\n // that is going to be overridden by a `committedData`, or get reverted back.\n // `committedData` is the validated value that comes from a fetch or mutation.\n const displayedData = state.data\n const currentData = state._c\n const committedData = isUndefined(currentData) ? displayedData : currentData\n\n // Do optimistic data update.\n if (hasOptimisticData) {\n optimisticData = isFunction(optimisticData)\n ? optimisticData(committedData, displayedData)\n : optimisticData\n\n // When we set optimistic data, backup the current committedData data in `_c`.\n set({ data: optimisticData, _c: committedData })\n }\n\n if (isFunction(data)) {\n // `data` is a function, call it passing current cache value.\n try {\n data = (data as MutatorCallback)(committedData)\n } catch (err) {\n // If it throws an error synchronously, we shouldn't update the cache.\n error = err\n isError = true\n }\n }\n\n // `data` is a promise/thenable, resolve the final data first.\n if (data && isPromiseLike(data)) {\n // This means that the mutation is async, we need to check timestamps to\n // avoid race conditions.\n data = await (data as Promise).catch(err => {\n error = err\n isError = true\n })\n\n // Check if other mutations have occurred since we've started this mutation.\n // If there's a race we don't update cache or broadcast the change,\n // just return the data.\n if (beforeMutationTs !== MUTATION[key][0]) {\n if (isError) throw error\n return data\n } else if (isError && hasOptimisticData && rollbackOnError(error)) {\n // Rollback. Always populate the cache in this case but without\n // transforming the data.\n populateCache = true\n\n // Reset data to be the latest committed data, and clear the `_c` value.\n set({ data: committedData, _c: UNDEFINED })\n }\n }\n\n // If we should write back the cache after request.\n if (populateCache) {\n if (!isError) {\n // Transform the result into data.\n if (isFunction(populateCache)) {\n const populateCachedData = populateCache(data, committedData)\n set({ data: populateCachedData, error: UNDEFINED, _c: UNDEFINED })\n } else {\n // Only update cached data and reset the error if there's no error. Data can be `undefined` here.\n set({ data, error: UNDEFINED, _c: UNDEFINED })\n }\n }\n }\n\n // Reset the timestamp to mark the mutation has ended.\n MUTATION[key][1] = getTimestamp()\n\n // Update existing SWR Hooks' internal states:\n Promise.resolve(startRevalidate()).then(() => {\n // The mutation and revalidation are ended, we can clear it since the data is\n // not an optimistic value anymore.\n set({ _c: UNDEFINED })\n })\n\n // Throw error or return data\n if (isError) {\n if (throwOnError) throw error\n return\n }\n return data\n }\n}\n"
},
{
"path": "src/_internal/utils/normalize-args.ts",
"content": "import { isFunction } from './shared'\n\nimport type { Key, Fetcher, SWRConfiguration } from '../types'\n\nexport const normalize = (\n args:\n | [KeyType]\n | [KeyType, Fetcher | null]\n | [KeyType, SWRConfiguration | undefined]\n | [KeyType, Fetcher | null, SWRConfiguration | undefined]\n): [KeyType, Fetcher | null, Partial>] => {\n return isFunction(args[1])\n ? [args[0], args[1], args[2] || {}]\n : [args[0], null, (args[1] === null ? args[2] : args[1]) || {}]\n}\n"
},
{
"path": "src/_internal/utils/preload.ts",
"content": "import type {\n Middleware,\n Key,\n BareFetcher,\n GlobalState,\n FetcherResponse\n} from '../types'\nimport { serialize } from './serialize'\nimport { cache } from './config'\nimport { SWRGlobalState } from './global-state'\nimport { isUndefined } from './shared'\nimport { INFINITE_PREFIX } from '../constants'\nimport { IS_SERVER } from './env'\n// Basically same as Fetcher but without Conditional Fetching\ntype PreloadFetcher<\n Data = unknown,\n SWRKey extends Key = Key\n> = SWRKey extends () => infer Arg\n ? (arg: Arg) => FetcherResponse\n : SWRKey extends infer Arg\n ? (arg: Arg) => FetcherResponse\n : never\n\nexport const preload = <\n Data = any,\n SWRKey extends Key = Key,\n Fetcher extends BareFetcher = PreloadFetcher\n>(\n key_: SWRKey,\n fetcher: Fetcher\n): ReturnType => {\n // preload should be a no-op on the server\n if (IS_SERVER) {\n return undefined as ReturnType\n }\n\n const [key, fnArg] = serialize(key_)\n const [, , , PRELOAD] = SWRGlobalState.get(cache) as GlobalState\n\n // Prevent preload to be called multiple times before used.\n if (PRELOAD[key]) return PRELOAD[key]\n\n const req = fetcher(fnArg) as ReturnType\n PRELOAD[key] = req\n return req\n}\n\nexport const middleware: Middleware =\n useSWRNext => (key_, fetcher_, config) => {\n // fetcher might be a sync function, so this should not be an async function\n const fetcher =\n fetcher_ &&\n ((...args: any[]) => {\n const [key] = serialize(key_)\n const [, , , PRELOAD] = SWRGlobalState.get(cache) as GlobalState\n\n if (key.startsWith(INFINITE_PREFIX)) {\n // we want the infinite fetcher to be called.\n // handling of the PRELOAD cache happens there.\n return fetcher_(...args)\n }\n\n const req = PRELOAD[key]\n if (isUndefined(req)) return fetcher_(...args)\n delete PRELOAD[key]\n return req\n })\n return useSWRNext(key_, fetcher, config)\n }\n"
},
{
"path": "src/_internal/utils/resolve-args.ts",
"content": "import { mergeConfigs } from './merge-config'\nimport { normalize } from './normalize-args'\nimport { useSWRConfig } from './use-swr-config'\nimport { BUILT_IN_MIDDLEWARE } from './middleware-preset'\n\n// It's tricky to pass generic types as parameters, so we just directly override\n// the types here.\nexport const withArgs = (hook: any) => {\n return function useSWRArgs(...args: any) {\n // Get the default and inherited configuration.\n const fallbackConfig = useSWRConfig()\n\n // Normalize arguments.\n const [key, fn, _config] = normalize(args)\n\n // Merge configurations.\n const config = mergeConfigs(fallbackConfig, _config)\n\n // Apply middleware\n let next = hook\n const { use } = config\n const middleware = (use || []).concat(BUILT_IN_MIDDLEWARE)\n for (let i = middleware.length; i--; ) {\n next = middleware[i](next)\n }\n\n return next(key, fn || config.fetcher || null, config)\n } as unknown as SWRType\n}\n"
},
{
"path": "src/_internal/utils/serialize.ts",
"content": "import { stableHash } from './hash'\nimport { isFunction } from './shared'\n\nimport type { Key, Arguments } from '../types'\n\nexport const serialize = (key: Key): [string, Arguments] => {\n if (isFunction(key)) {\n try {\n key = key()\n } catch (err) {\n // dependencies not ready\n key = ''\n }\n }\n\n // Use the original key as the argument of fetcher. This can be a string or an\n // array of values.\n const args = key\n\n // If key is not falsy, or not an empty array, hash it.\n key =\n typeof key == 'string'\n ? key\n : (Array.isArray(key) ? key.length : key)\n ? stableHash(key)\n : ''\n\n return [key, args]\n}\n"
},
{
"path": "src/_internal/utils/shared.ts",
"content": "// Shared state between server components and client components\n\nexport const noop = () => {}\n\n// Using noop() as the undefined value as undefined can be replaced\n// by something else. Prettier ignore and extra parentheses are necessary here\n// to ensure that tsc doesn't remove the __NOINLINE__ comment.\n// prettier-ignore\nexport const UNDEFINED = (/*#__NOINLINE__*/ noop()) as undefined\n\nexport const OBJECT = Object\n\nexport const isUndefined = (v: any): v is undefined => v === UNDEFINED\nexport const isFunction = <\n T extends (...args: any[]) => any = (...args: any[]) => any\n>(\n v: unknown\n): v is T => typeof v == 'function'\nexport const mergeObjects = (a: any, b?: any) => ({ ...a, ...b })\nexport const isPromiseLike = (x: unknown): x is PromiseLike =>\n isFunction((x as any).then)\n"
},
{
"path": "src/_internal/utils/subscribe-key.ts",
"content": "type Callback = (...args: any[]) => any\n\n// Add a callback function to a list of keyed callback functions and return\n// the unsubscribe function.\nexport const subscribeCallback = (\n key: string,\n callbacks: Record,\n callback: Callback\n) => {\n const keyedRevalidators = callbacks[key] || (callbacks[key] = [])\n keyedRevalidators.push(callback)\n\n return () => {\n const index = keyedRevalidators.indexOf(callback)\n\n if (index >= 0) {\n // O(1): faster than splice\n keyedRevalidators[index] = keyedRevalidators[keyedRevalidators.length - 1]\n keyedRevalidators.pop()\n }\n }\n}\n"
},
{
"path": "src/_internal/utils/timestamp.ts",
"content": "// Global timestamp.\nlet __timestamp = 0\n\nexport const getTimestamp = () => ++__timestamp\n"
},
{
"path": "src/_internal/utils/use-swr-config.ts",
"content": "import { useContext, useMemo } from 'react'\nimport { defaultConfig } from './config'\nimport { SWRConfigContext } from './config-context'\nimport { mergeObjects } from './shared'\nimport type { FullConfiguration } from '../types'\n\nexport const useSWRConfig = (): FullConfiguration => {\n const parentConfig = useContext(SWRConfigContext)\n const mergedConfig = useMemo(\n () => mergeObjects(defaultConfig, parentConfig),\n [parentConfig]\n )\n return mergedConfig\n}\n"
},
{
"path": "src/_internal/utils/web-preset.ts",
"content": "import type { ProviderConfiguration } from '../types'\nimport { isWindowDefined, isDocumentDefined } from './helper'\nimport { isUndefined, noop } from './shared'\n\n/**\n * Due to the bug https://bugs.chromium.org/p/chromium/issues/detail?id=678075,\n * it's not reliable to detect if the browser is currently online or offline\n * based on `navigator.onLine`.\n * As a workaround, we always assume it's online on the first load, and change\n * the status upon `online` or `offline` events.\n */\nlet online = true\nconst isOnline = () => online\n\n// For node and React Native, `add/removeEventListener` doesn't exist on window.\nconst [onWindowEvent, offWindowEvent] =\n isWindowDefined && window.addEventListener\n ? [\n window.addEventListener.bind(window),\n window.removeEventListener.bind(window)\n ]\n : [noop, noop]\n\nconst isVisible = () => {\n const visibilityState = isDocumentDefined && document.visibilityState\n return isUndefined(visibilityState) || visibilityState !== 'hidden'\n}\n\nconst initFocus = (callback: () => void) => {\n // focus revalidate\n if (isDocumentDefined) {\n document.addEventListener('visibilitychange', callback)\n }\n onWindowEvent('focus', callback)\n return () => {\n if (isDocumentDefined) {\n document.removeEventListener('visibilitychange', callback)\n }\n offWindowEvent('focus', callback)\n }\n}\n\nconst initReconnect = (callback: () => void) => {\n // revalidate on reconnected\n const onOnline = () => {\n online = true\n callback()\n }\n // nothing to revalidate, just update the status\n const onOffline = () => {\n online = false\n }\n onWindowEvent('online', onOnline)\n onWindowEvent('offline', onOffline)\n return () => {\n offWindowEvent('online', onOnline)\n offWindowEvent('offline', onOffline)\n }\n}\n\nexport const preset = {\n isOnline,\n isVisible\n} as const\n\nexport const defaultConfigOptions: ProviderConfiguration = {\n initFocus,\n initReconnect\n}\n"
},
{
"path": "src/_internal/utils/with-middleware.ts",
"content": "import { normalize } from './normalize-args'\n\nimport type {\n Key,\n Fetcher,\n Middleware,\n SWRConfiguration,\n SWRHook\n} from '../types'\n\n// Create a custom hook with a middleware\nexport const withMiddleware = (\n useSWR: SWRHook,\n middleware: Middleware\n): SWRHook => {\n return (\n ...args:\n | [Key]\n | [Key, Fetcher | null]\n | [Key, SWRConfiguration | undefined]\n | [Key, Fetcher | null, SWRConfiguration | undefined]\n ) => {\n const [key, fn, config] = normalize(args)\n const uses = (config.use || []).concat(middleware)\n return useSWR(key, fn, { ...config, use: uses })\n }\n}\n"
},
{
"path": "src/immutable/index.ts",
"content": "import type { Middleware } from '../index'\nimport useSWR from '../index'\nimport { withMiddleware } from '../_internal'\n\nexport const immutable: Middleware = useSWRNext => (key, fetcher, config) => {\n // Always override all revalidate options.\n config.revalidateOnFocus = false\n config.revalidateIfStale = false\n config.revalidateOnReconnect = false\n config.refreshInterval = 0\n return useSWRNext(key, fetcher, config)\n}\n\nconst useSWRImmutable = withMiddleware(useSWR, immutable)\n\nexport default useSWRImmutable\n"
},
{
"path": "src/index/config.ts",
"content": "'use client'\n\n// TODO: fix SWRConfig re-use issue with bundler\nimport { SWRConfig as S } from '../_internal'\nexport const SWRConfig = S\n"
},
{
"path": "src/index/index.react-server.ts",
"content": "export { unstable_serialize } from './serialize'\nexport { SWRConfig } from './config'\n"
},
{
"path": "src/index/index.ts",
"content": "// useSWR\nimport useSWR from './use-swr'\nexport default useSWR\n// Core APIs\nexport { SWRConfig } from './use-swr'\nexport { unstable_serialize } from './serialize'\nexport { useSWRConfig } from '../_internal'\nexport { mutate } from '../_internal'\nexport { preload } from '../_internal'\n\n// Config\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface SWRGlobalConfig {\n // suspense: true\n}\n\n// Types\nexport type {\n SWRConfiguration,\n Revalidator,\n RevalidatorOptions,\n Key,\n KeyLoader,\n KeyedMutator,\n SWRHook,\n SWRResponse,\n Cache,\n BareFetcher,\n Fetcher,\n MutatorCallback,\n MutatorOptions,\n Middleware,\n Arguments,\n State,\n ScopedMutator\n} from '../_internal'\n"
},
{
"path": "src/index/serialize.ts",
"content": "import type { Key } from '../_internal'\nimport { serialize } from '../_internal/utils/serialize'\n\nexport const unstable_serialize = (key: Key) => serialize(key)[0]\n"
},
{
"path": "src/index/use-swr.ts",
"content": "/// \nimport React, { useCallback, useRef, useDebugValue, useMemo } from 'react'\nimport { useSyncExternalStore } from 'use-sync-external-store/shim'\n\nimport {\n defaultConfig,\n IS_REACT_LEGACY,\n IS_SERVER,\n rAF,\n useIsomorphicLayoutEffect,\n SWRGlobalState,\n serialize,\n isUndefined,\n UNDEFINED,\n OBJECT,\n isFunction,\n createCacheHelper,\n SWRConfig as ConfigProvider,\n withArgs,\n subscribeCallback,\n getTimestamp,\n internalMutate,\n revalidateEvents,\n mergeObjects,\n isPromiseLike,\n noop\n} from '../_internal'\nimport type {\n State,\n Fetcher,\n Key,\n SWRResponse,\n RevalidatorOptions,\n FullConfiguration,\n SWRConfiguration,\n SWRHook,\n RevalidateEvent,\n StateDependencies,\n GlobalState\n} from '../_internal'\n\nconst use =\n React.use ||\n // This extra generic is to avoid TypeScript mixing up the generic and JSX sytax\n // and emitting an error.\n // We assume that this is only for the `use(thenable)` case, not `use(context)`.\n // https://github.com/facebook/react/blob/aed00dacfb79d17c53218404c52b1c7aa59c4a89/packages/react-server/src/ReactFizzThenable.js#L45\n ((\n thenable: Promise & {\n status?: 'pending' | 'fulfilled' | 'rejected'\n value?: T\n reason?: unknown\n }\n ): T => {\n switch (thenable.status) {\n case 'pending':\n throw thenable\n case 'fulfilled':\n return thenable.value as T\n case 'rejected':\n throw thenable.reason\n default:\n thenable.status = 'pending'\n thenable.then(\n v => {\n thenable.status = 'fulfilled'\n thenable.value = v\n },\n e => {\n thenable.status = 'rejected'\n thenable.reason = e\n }\n )\n throw thenable\n }\n })\n\nconst WITH_DEDUPE = { dedupe: true }\n\ntype DefinitelyTruthy = false extends T\n ? never\n : 0 extends T\n ? never\n : '' extends T\n ? never\n : null extends T\n ? never\n : undefined extends T\n ? never\n : T\n\nconst resolvedUndef = Promise.resolve(UNDEFINED)\nconst sub = () => noop\n/**\n * The core implementation of the useSWR hook.\n *\n * This is the main handler function that implements all SWR functionality including\n * data fetching, caching, revalidation, error handling, and state management.\n * It manages the complete lifecycle of SWR requests from initialization through\n * cleanup.\n *\n * Key responsibilities:\n * - Key serialization and normalization\n * - Cache state management and synchronization\n * - Automatic and manual revalidation\n * - Error handling and retry logic\n * - Suspense integration\n * - Loading state management\n * - Effect cleanup and memory management\n *\n * @template Data - The type of data returned by the fetcher\n * @template Error - The type of error that can be thrown\n *\n * @param _key - The SWR key (string, array, object, function, or falsy)\n * @param fetcher - The fetcher function to retrieve data, or null to disable fetching\n * @param config - Complete SWR configuration object with both public and internal options\n *\n * @returns SWRResponse object containing data, error, mutate function, and loading states\n *\n * @internal This is the internal implementation. Use `useSWR` instead.\n */\nexport const useSWRHandler = (\n _key: Key,\n fetcher: Fetcher | null,\n config: FullConfiguration & SWRConfiguration\n) => {\n const {\n cache,\n compare,\n suspense,\n fallbackData,\n revalidateOnMount,\n revalidateIfStale,\n refreshInterval,\n refreshWhenHidden,\n refreshWhenOffline,\n keepPreviousData,\n strictServerPrefetchWarning\n } = config\n\n const [EVENT_REVALIDATORS, MUTATION, FETCH, PRELOAD] = SWRGlobalState.get(\n cache\n ) as GlobalState\n\n // `key` is the identifier of the SWR internal state,\n // `fnArg` is the argument/arguments parsed from the key, which will be passed\n // to the fetcher.\n // All of them are derived from `_key`.\n const [key, fnArg] = serialize(_key)\n\n // If it's the initial render of this hook.\n const initialMountedRef = useRef(false)\n\n // If the hook is unmounted already. This will be used to prevent some effects\n // to be called after unmounting.\n const unmountedRef = useRef(false)\n\n // Refs to keep the key and config.\n const keyRef = useRef(key)\n const fetcherRef = useRef(fetcher)\n const configRef = useRef(config)\n const getConfig = () => configRef.current\n const isActive = () => getConfig().isVisible() && getConfig().isOnline()\n\n const [getCache, setCache, subscribeCache, getInitialCache] =\n createCacheHelper<\n Data,\n State & {\n // The original key arguments.\n _k?: Key\n }\n >(cache, key)\n\n const stateDependencies = useRef({}).current\n\n // Resolve the fallback data from either the inline option, or the global provider.\n // If it's a promise, we simply let React suspend and resolve it for us.\n const fallback = isUndefined(fallbackData)\n ? isUndefined(config.fallback)\n ? UNDEFINED\n : config.fallback[key]\n : fallbackData\n\n const isEqual = (prev: State, current: State) => {\n for (const _ in stateDependencies) {\n const t = _ as keyof StateDependencies\n if (t === 'data') {\n if (!compare(prev[t], current[t])) {\n if (!isUndefined(prev[t])) {\n return false\n }\n if (!compare(returnedData, current[t])) {\n return false\n }\n }\n } else {\n if (current[t] !== prev[t]) {\n return false\n }\n }\n }\n return true\n }\n const isInitialMount = !initialMountedRef.current\n const getSnapshot = useMemo(() => {\n const cachedData = getCache()\n const initialData = getInitialCache()\n const getSelectedCache = (state: ReturnType) => {\n // We only select the needed fields from the state.\n const snapshot = mergeObjects(state)\n delete snapshot._k\n\n const shouldStartRequest = (() => {\n if (!key) return false\n if (!fetcher) return false\n // If it's paused, we skip revalidation.\n if (getConfig().isPaused()) return false\n // If `revalidateOnMount` is set, we take the value directly.\n if (isInitialMount && !isUndefined(revalidateOnMount))\n return revalidateOnMount\n const data = !isUndefined(fallback) ? fallback : snapshot.data\n if (suspense) return isUndefined(data) || revalidateIfStale\n return isUndefined(data) || revalidateIfStale\n })()\n\n if (!shouldStartRequest) {\n return snapshot\n }\n\n return {\n isValidating: true,\n isLoading: true,\n ...snapshot\n }\n }\n\n const clientSnapshot = getSelectedCache(cachedData)\n const serverSnapshot =\n cachedData === initialData\n ? clientSnapshot\n : getSelectedCache(initialData)\n // To make sure that we are returning the same object reference to avoid\n // unnecessary re-renders, we keep the previous snapshot and use deep\n // comparison to check if we need to return a new one.\n let memorizedSnapshot = clientSnapshot\n\n return [\n () => {\n const newSnapshot = getSelectedCache(getCache())\n const compareResult = isEqual(newSnapshot, memorizedSnapshot)\n\n if (compareResult) {\n // Mentally, we should always return the `memorizedSnapshot` here\n // as there's no change between the new and old snapshots.\n // However, since the `isEqual` function only compares selected fields,\n // the values of the unselected fields might be changed. That's\n // simply because we didn't track them.\n // To support the case in https://github.com/vercel/swr/pull/2576,\n // we need to update these fields in the `memorizedSnapshot` too\n // with direct mutations to ensure the snapshot is always up-to-date\n // even for the unselected fields, but only trigger re-renders when\n // the selected fields are changed.\n memorizedSnapshot.data = newSnapshot.data\n memorizedSnapshot.isLoading = newSnapshot.isLoading\n memorizedSnapshot.isValidating = newSnapshot.isValidating\n memorizedSnapshot.error = newSnapshot.error\n return memorizedSnapshot\n } else {\n memorizedSnapshot = newSnapshot\n return newSnapshot\n }\n },\n () => serverSnapshot\n ]\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [cache, key])\n\n // Get the current state that SWR should return.\n const cached = useSyncExternalStore(\n useCallback(\n (callback: () => void) =>\n subscribeCache(\n key,\n (current: State, prev: State) => {\n if (!isEqual(prev, current)) callback()\n }\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [cache, key]\n ),\n getSnapshot[0],\n getSnapshot[1]\n )\n\n const hasRevalidator =\n EVENT_REVALIDATORS[key] && EVENT_REVALIDATORS[key].length > 0\n\n const cachedData = cached.data\n\n const data = isUndefined(cachedData)\n ? fallback && isPromiseLike(fallback)\n ? use(fallback)\n : fallback\n : cachedData\n const error = cached.error\n\n // Use a ref to store previously returned data. Use the initial data as its initial value.\n const laggyDataRef = useRef(data)\n\n const returnedData = keepPreviousData\n ? isUndefined(cachedData)\n ? // checking undefined to avoid null being fallback as well\n isUndefined(laggyDataRef.current)\n ? data\n : laggyDataRef.current\n : cachedData\n : data\n\n const hasKeyButNoData = key && isUndefined(data)\n const hydrationRef = useRef(null)\n // Note: the conditionally hook call is fine because the environment\n // `IS_SERVER` never changes.\n // @ts-expect-error -- use hydrationRef directly\n const _ =\n !IS_SERVER &&\n // getServerSnapshot is only called during hydration\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useSyncExternalStore(\n sub,\n () => {\n hydrationRef.current = false\n return hydrationRef\n },\n () => {\n hydrationRef.current = true\n return hydrationRef\n }\n )\n const isHydration = hydrationRef.current\n // During the initial SSR render, warn if the key has no data pre-fetched via:\n // - fallback data\n // - preload calls\n // - initial data from the cache provider\n // We only warn once for each key during Hydration.\n if (\n strictServerPrefetchWarning &&\n isHydration &&\n !suspense &&\n hasKeyButNoData\n ) {\n console.warn(\n `Missing pre-initiated data for serialized key \"${key}\" during server-side rendering. Data fetching should be initiated on the server and provided to SWR via fallback data. You can set \"strictServerPrefetchWarning: false\" to disable this warning.`\n )\n }\n\n // Resolve the default validating state:\n // If it's able to validate, and it should revalidate when mount, this will be true.\n // - Suspense mode and there's stale data for the initial render.\n // - Not suspense mode and there is no fallback data and `revalidateIfStale` is enabled.\n // - `revalidateIfStale` is enabled but `data` is not defined.\n const shouldDoInitialRevalidation = (() => {\n if (!key || !fetcher) return false\n // If it's paused, we skip revalidation.\n if (getConfig().isPaused()) return false\n // if a key already has revalidators and also has error, we should not trigger revalidation\n if (hasRevalidator && !isUndefined(error)) return false\n // If `revalidateOnMount` is set, we take the value directly.\n if (isInitialMount && !isUndefined(revalidateOnMount))\n return revalidateOnMount\n // Under suspense mode, it will always fetch on render if there is no\n // stale data so no need to revalidate immediately mount it again.\n // If data exists, only revalidate if `revalidateIfStale` is true.\n if (suspense) return isUndefined(data) ? false : revalidateIfStale\n // If there is no stale data, we need to revalidate when mount;\n // If `revalidateIfStale` is set to true, we will always revalidate.\n return isUndefined(data) || revalidateIfStale\n })()\n\n const defaultValidatingState = isInitialMount && shouldDoInitialRevalidation\n\n const isValidating = isUndefined(cached.isValidating)\n ? defaultValidatingState\n : cached.isValidating\n const isLoading = isUndefined(cached.isLoading)\n ? defaultValidatingState\n : cached.isLoading\n\n // The revalidation function is a carefully crafted wrapper of the original\n // `fetcher`, to correctly handle the many edge cases.\n const revalidate = useCallback(\n async (revalidateOpts?: RevalidatorOptions): Promise => {\n const currentFetcher = fetcherRef.current\n\n if (\n !key ||\n !currentFetcher ||\n unmountedRef.current ||\n getConfig().isPaused()\n ) {\n return false\n }\n\n let newData: Data\n let startAt: number\n let loading = true\n const opts = revalidateOpts || {}\n\n // If there is no ongoing concurrent request, or `dedupe` is not set, a\n // new request should be initiated.\n const shouldStartNewRequest = !FETCH[key] || !opts.dedupe\n\n /*\n For React 17\n Do unmount check for calls:\n If key has changed during the revalidation, or the component has been\n unmounted, old dispatch and old event callbacks should not take any\n effect\n\n For React 18\n only check if key has changed\n https://github.com/reactwg/react-18/discussions/82\n */\n const callbackSafeguard = () => {\n if (IS_REACT_LEGACY) {\n return (\n !unmountedRef.current &&\n key === keyRef.current &&\n initialMountedRef.current\n )\n }\n return key === keyRef.current\n }\n\n // The final state object when the request finishes.\n const finalState: State = {\n isValidating: false,\n isLoading: false\n }\n const finishRequestAndUpdateState = () => {\n setCache(finalState)\n }\n const cleanupState = () => {\n // Check if it's still the same request before deleting it.\n const requestInfo = FETCH[key]\n if (requestInfo && requestInfo[1] === startAt) {\n delete FETCH[key]\n }\n }\n\n // Start fetching. Change the `isValidating` state, update the cache.\n const initialState: State