Repository: vercel/swr Branch: main Commit: 5fa29522f196 Files: 344 Total size: 663.2 KB Directory structure: gitextract__gxvvg_b/ ├── .codesandbox/ │ └── ci.json ├── .editorconfig ├── .github/ │ ├── CODEOWNERS │ ├── CODE_OF_CONDUCT.md │ ├── CONTRIBUTING.md │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── config.yml │ ├── SECURITY.md │ └── workflows/ │ ├── install/ │ │ └── action.yml │ ├── test-canary.yml │ ├── test-legacy-react.yml │ ├── test-release.yml │ └── trigger-release.yml ├── .gitignore ├── .husky/ │ └── pre-commit ├── .npmrc ├── .swcrc ├── LICENSE ├── README.md ├── _internal/ │ └── package.json ├── e2e/ │ ├── site/ │ │ ├── README.md │ │ ├── app/ │ │ │ ├── basic-ssr/ │ │ │ │ ├── block.tsx │ │ │ │ └── page.tsx │ │ │ ├── concurrent-transition/ │ │ │ │ ├── page.tsx │ │ │ │ └── transition-demo.tsx │ │ │ ├── issue-2702/ │ │ │ │ ├── page.tsx │ │ │ │ └── reproduction.tsx │ │ │ ├── layout.tsx │ │ │ ├── mutate-server-action/ │ │ │ │ ├── action.tsx │ │ │ │ └── page.tsx │ │ │ ├── page.tsx │ │ │ ├── partially-hydrate/ │ │ │ │ ├── layout.tsx │ │ │ │ ├── loading.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── use-data.tsx │ │ │ ├── perf/ │ │ │ │ └── page.tsx │ │ │ ├── react-server-entry/ │ │ │ │ └── page.tsx │ │ │ ├── render-count/ │ │ │ │ └── page.tsx │ │ │ ├── render-preload-avoid-waterfall/ │ │ │ │ └── page.tsx │ │ │ ├── render-preload-basic/ │ │ │ │ └── page.tsx │ │ │ ├── render-promise-suspense-error/ │ │ │ │ └── page.tsx │ │ │ ├── render-promise-suspense-resolve/ │ │ │ │ └── page.tsx │ │ │ ├── render-promise-suspense-shared/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-avoid-rerender/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-cached-error/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-error/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-fallback/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-fetcher/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-infinite-preload/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-initial-data/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-keep-previous/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-key-change/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-multiple-fallbacks/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-no-revalidate/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-non-promise/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-null-key/ │ │ │ │ └── page.tsx │ │ │ ├── render-suspense-same-data/ │ │ │ │ └── page.tsx │ │ │ ├── server-prefetch-warning/ │ │ │ │ └── page.tsx │ │ │ ├── suspense-after-preload/ │ │ │ │ ├── page.tsx │ │ │ │ └── remote-data.tsx │ │ │ ├── suspense-fallback/ │ │ │ │ ├── layout.tsx │ │ │ │ └── promise/ │ │ │ │ └── page.tsx │ │ │ ├── suspense-infinite-get-key/ │ │ │ │ └── page.tsx │ │ │ ├── suspense-retry/ │ │ │ │ ├── manual-retry.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── use-remote-data.ts │ │ │ └── suspense-undefined-key/ │ │ │ └── page.tsx │ │ ├── component/ │ │ │ ├── manual-retry-mutate.tsx │ │ │ ├── manual-retry.tsx │ │ │ ├── only-render-in-client.tsx │ │ │ └── use-remote-data.ts │ │ ├── lib/ │ │ │ ├── sleep.ts │ │ │ └── use-debug-history.ts │ │ ├── next-env.d.ts │ │ ├── next.config.js │ │ ├── package.json │ │ ├── pages/ │ │ │ ├── api/ │ │ │ │ ├── data.ts │ │ │ │ └── retry.ts │ │ │ ├── suspense-retry-19.tsx │ │ │ └── suspense-retry-mutate.tsx │ │ └── tsconfig.json │ └── test/ │ ├── concurrent-transition.test.ts │ ├── initial-render.test.ts │ ├── issue-2702-too-many-hooks.ts │ ├── mutate-server-action.test.ts │ ├── perf.test.ts │ ├── preload-scenarios.test.ts │ ├── promise-scenarios.test.ts │ ├── server-prefetch-warning.test.ts │ ├── stream-ssr.test.ts │ ├── suspense-fallback.test.ts │ ├── suspense-scenarios.test.ts │ ├── suspense-undefined-key.test.ts │ └── tsconfig.json ├── eslint.config.mjs ├── examples/ │ ├── .eslintrc │ ├── api-hooks/ │ │ ├── README.md │ │ ├── hooks/ │ │ │ ├── use-projects.js │ │ │ └── use-repository.js │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── package.json │ │ └── pages/ │ │ ├── [user]/ │ │ │ └── [repo].js │ │ ├── api/ │ │ │ └── data.js │ │ └── index.js │ ├── autocomplete-suggestions/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── fetcher.js │ │ ├── package.json │ │ └── pages/ │ │ ├── api/ │ │ │ └── suggestions.js │ │ └── index.js │ ├── axios/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── useRequest.js │ │ ├── package.json │ │ └── pages/ │ │ ├── [user]/ │ │ │ └── [repo].js │ │ ├── api/ │ │ │ └── data.js │ │ └── index.js │ ├── axios-typescript/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── useRequest.ts │ │ ├── next-env.d.ts │ │ ├── package.json │ │ ├── pages/ │ │ │ ├── [user]/ │ │ │ │ └── [repo].tsx │ │ │ ├── api/ │ │ │ │ └── data.ts │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── basic/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── package.json │ │ └── pages/ │ │ ├── [user]/ │ │ │ └── [repo].js │ │ ├── api/ │ │ │ └── data.js │ │ └── index.js │ ├── basic-typescript/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── fetch.ts │ │ ├── next-env.d.ts │ │ ├── package.json │ │ ├── pages/ │ │ │ ├── [user]/ │ │ │ │ └── [repo].tsx │ │ │ ├── api/ │ │ │ │ └── data.ts │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── focus-revalidate/ │ │ ├── README.md │ │ ├── components/ │ │ │ └── button.js │ │ ├── libs/ │ │ │ ├── auth.js │ │ │ └── fetch.js │ │ ├── package.json │ │ └── pages/ │ │ ├── api/ │ │ │ └── user.js │ │ └── index.js │ ├── global-fetcher/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── package.json │ │ └── pages/ │ │ ├── [user]/ │ │ │ └── [repo].js │ │ ├── _app.js │ │ ├── api/ │ │ │ └── data.js │ │ └── index.js │ ├── infinite/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── package.json │ │ └── pages/ │ │ └── index.js │ ├── infinite-scroll/ │ │ ├── README.md │ │ ├── hooks/ │ │ │ └── useOnScreen.js │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── package.json │ │ └── pages/ │ │ └── index.js │ ├── local-state-sharing/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── store.js │ │ ├── package.json │ │ └── pages/ │ │ └── index.js │ ├── optimistic-ui/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── package.json │ │ ├── pages/ │ │ │ ├── _app.js │ │ │ ├── api/ │ │ │ │ └── todos.js │ │ │ └── index.js │ │ └── styles.css │ ├── optimistic-ui-immer/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── package.json │ │ └── pages/ │ │ ├── api/ │ │ │ └── data.js │ │ └── index.js │ ├── prefetch-preload/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── package.json │ │ └── pages/ │ │ ├── [user]/ │ │ │ └── [repo].js │ │ ├── api/ │ │ │ └── data.js │ │ └── index.js │ ├── refetch-interval/ │ │ ├── README.md │ │ ├── components/ │ │ │ └── button.js │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── package.json │ │ └── pages/ │ │ ├── api/ │ │ │ └── data.js │ │ └── index.js │ ├── server-render/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── fetcher.js │ │ ├── package.json │ │ └── pages/ │ │ ├── [pokemon].js │ │ └── index.js │ ├── storage-tab-sync/ │ │ ├── README.md │ │ ├── libs/ │ │ │ └── storage.js │ │ ├── package.json │ │ └── pages/ │ │ └── index.js │ ├── subscription/ │ │ ├── README.md │ │ ├── package.json │ │ └── pages/ │ │ └── index.js │ ├── suspense/ │ │ ├── README.md │ │ ├── app/ │ │ │ ├── layout.jsx │ │ │ └── rsc/ │ │ │ ├── [user]/ │ │ │ │ └── [repo]/ │ │ │ │ ├── error.jsx │ │ │ │ ├── loading.jsx │ │ │ │ ├── page.jsx │ │ │ │ └── repo.jsx │ │ │ ├── loading.jsx │ │ │ ├── page.jsx │ │ │ └── repos.jsx │ │ ├── components/ │ │ │ └── error-handling.js │ │ ├── libs/ │ │ │ └── fetch.js │ │ ├── next-env.d.ts │ │ ├── package.json │ │ └── pages/ │ │ ├── [user]/ │ │ │ └── [repo].js │ │ ├── api/ │ │ │ └── data.js │ │ └── index.js │ ├── suspense-global/ │ │ ├── README.md │ │ ├── components/ │ │ │ └── error-handling.ts │ │ ├── global-swr-config.tsx │ │ ├── libs/ │ │ │ └── fetch.ts │ │ ├── next-env.d.ts │ │ ├── package.json │ │ ├── pages/ │ │ │ ├── [user]/ │ │ │ │ ├── [repo].tsx │ │ │ │ └── detail.tsx │ │ │ ├── _app.tsx │ │ │ ├── api/ │ │ │ │ └── data.ts │ │ │ ├── index.tsx │ │ │ └── repos.tsx │ │ └── tsconfig.json │ └── suspense-retry/ │ ├── app/ │ │ ├── api/ │ │ │ └── route.ts │ │ ├── layout.tsx │ │ ├── manual-retry.tsx │ │ ├── page.tsx │ │ └── use-remote-data.ts │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── pages/ │ │ └── retry.tsx │ └── tsconfig.json ├── immutable/ │ └── package.json ├── infinite/ │ └── package.json ├── jest.config.build.js ├── jest.config.js ├── mutation/ │ └── package.json ├── package.json ├── playwright.config.js ├── pnpm-workspace.yaml ├── scripts/ │ └── bump-next-version.js ├── src/ │ ├── _internal/ │ │ ├── constants.ts │ │ ├── events.ts │ │ ├── index.react-server.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── utils/ │ │ ├── cache.ts │ │ ├── config-context.ts │ │ ├── config.ts │ │ ├── devtools.ts │ │ ├── env.ts │ │ ├── global-state.ts │ │ ├── hash.ts │ │ ├── helper.ts │ │ ├── merge-config.ts │ │ ├── middleware-preset.ts │ │ ├── mutate.ts │ │ ├── normalize-args.ts │ │ ├── preload.ts │ │ ├── resolve-args.ts │ │ ├── serialize.ts │ │ ├── shared.ts │ │ ├── subscribe-key.ts │ │ ├── timestamp.ts │ │ ├── use-swr-config.ts │ │ ├── web-preset.ts │ │ └── with-middleware.ts │ ├── immutable/ │ │ └── index.ts │ ├── index/ │ │ ├── config.ts │ │ ├── index.react-server.ts │ │ ├── index.ts │ │ ├── serialize.ts │ │ └── use-swr.ts │ ├── infinite/ │ │ ├── index.react-server.ts │ │ ├── index.ts │ │ ├── serialize.ts │ │ └── types.ts │ ├── mutation/ │ │ ├── index.ts │ │ ├── state.ts │ │ └── types.ts │ └── subscription/ │ ├── index.ts │ └── types.ts ├── subscription/ │ └── package.json ├── test/ │ ├── jest-setup.ts │ ├── tsconfig.json │ ├── type/ │ │ ├── .eslintrc │ │ ├── config.tsx │ │ ├── fetcher.ts │ │ ├── helper-types.tsx │ │ ├── internal.tsx │ │ ├── mutate.ts │ │ ├── mutation.ts │ │ ├── option-fetcher.ts │ │ ├── preload.ts │ │ ├── subscription.ts │ │ ├── suspense/ │ │ │ ├── helper-types.tsx │ │ │ ├── suspense.ts │ │ │ └── tsconfig.json │ │ ├── trigger.ts │ │ ├── tsconfig.json │ │ └── utils.ts │ ├── unit/ │ │ ├── serialize.test.ts │ │ ├── utils.test.tsx │ │ └── web-preset.test.ts │ ├── use-swr-cache.test.tsx │ ├── use-swr-concurrent-rendering.test.tsx │ ├── use-swr-config-callbacks.test.tsx │ ├── use-swr-config.test.tsx │ ├── use-swr-context-config.test.tsx │ ├── use-swr-devtools.test.tsx │ ├── use-swr-error.test.tsx │ ├── use-swr-fetcher.test.tsx │ ├── use-swr-focus.test.tsx │ ├── use-swr-immutable.test.tsx │ ├── use-swr-infinite-preload.test.tsx │ ├── use-swr-infinite.test.tsx │ ├── use-swr-integration.test.tsx │ ├── use-swr-key.test.tsx │ ├── use-swr-laggy.test.tsx │ ├── use-swr-legacy-react.test.tsx │ ├── use-swr-loading.test.tsx │ ├── use-swr-local-mutation.test.tsx │ ├── use-swr-middlewares.test.tsx │ ├── use-swr-node-env.test.tsx │ ├── use-swr-offline.test.tsx │ ├── use-swr-preload.test.tsx │ ├── use-swr-promise.test.tsx │ ├── use-swr-reconnect.test.tsx │ ├── use-swr-refresh.test.tsx │ ├── use-swr-remote-mutation.test.tsx │ ├── use-swr-revalidate.test.tsx │ ├── use-swr-server.test.tsx │ ├── use-swr-streaming-ssr.test.tsx │ ├── use-swr-subscription.test.tsx │ ├── use-swr-suspense.test.tsx │ └── utils.tsx └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .codesandbox/ci.json ================================================ { "sandboxes": ["swr-basic-p7dg6", "swr-states-4une7", "swr-infinite-jb5bm", "swr-ssr-j9b2y"], "node": "18", "installCommand": "csb:install", "buildCommand": "csb:build" } ================================================ FILE: .editorconfig ================================================ root = true [*.{js,ts,jsx,tsx}] indent_size = 2 indent_style = space ================================================ FILE: .github/CODEOWNERS ================================================ * @shuding @huozhi ================================================ FILE: .github/CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: * Using welcoming and inclusive language * Being respectful of differing viewpoints and experiences * Gracefully accepting constructive criticism * Focusing on what is best for the community * Showing empathy towards other community members Examples of unacceptable behavior by participants include: * The use of sexualized language or imagery and unwelcome sexual attention or advances * Trolling, insulting/derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as physical or electronic address, without explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at coc@vercel.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality concerning the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html [homepage]: https://www.contributor-covenant.org For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq ================================================ FILE: .github/CONTRIBUTING.md ================================================ # SWR Contribution Guidelines Thank you for reading this guide and we appreciate any contribution. ## Ask a Question You 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. ## Report a Bug Whenever 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. If 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. ## Request for a New Feature For 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. If possible, you can add another additional context like how this feature can be implemented technically, what other alternative solutions we can have, etc. ## Open a PR for Bugfix or Feature ### Local Development with Examples To 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. First of all, build SWR assets ```sh corepack enable corepack pnpm install pnpm watch ``` Install dependency of the target example, for instance `examples/basic`: ```sh # by default it will run next dev for the example pnpm next dev examples/basic ``` All examples are built with Next.js, so Next.js commands are all supported: ```sh # if you want to build and start pnpm next build examples/basic pnpm next start examples/basic ``` ## Update Documentation To update the [SWR Documentation](https://swr.vercel.app), you can contribute to the [website repository](https://github.com/vercel/swr-site). ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.md ================================================ --- name: Bug report about: Create a bug report for the SWR library --- # Bug report ## Description / Observed Behavior What kind of issues did you encounter with SWR? ## Expected Behavior How did you expect SWR to behave here? ## Repro Steps / Code Example Or share your code snippet or a [CodeSandbox](https://codesandbox.io) link is also appreciated! ## Additional Context SWR version. Add any other context about the problem here. ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ blank_issues_enabled: false contact_links: - name: Ask Question url: https://github.com/vercel/swr/discussions about: Ask questions and discuss with other community members ================================================ FILE: .github/SECURITY.md ================================================ # Reporting Security Issues If you believe you have found a security vulnerability in SWR, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem. Email `security@vercel.com` to disclose any security vulnerabilities. https://vercel.com/security ================================================ FILE: .github/workflows/install/action.yml ================================================ name: 'Install' description: 'Set up and install dependencies' runs: using: composite steps: - name: Setup pnpm uses: pnpm/action-setup@v4 - name: Lock Corepack version shell: bash run: pnpm i -g corepack@0.31.0 - name: Use Node.js lts uses: actions/setup-node@v4 with: node-version: 22 cache: pnpm registry-url: 'https://registry.npmjs.org' - name: Install Dependencies shell: bash run: | corepack enable node -v pnpm -v pnpm install ================================================ FILE: .github/workflows/test-canary.yml ================================================ name: Test React Canary on: workflow_dispatch: schedule: - cron: '0 0 * * *' jobs: test: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Install uses: ./.github/workflows/install - name: Install Canary run: corepack pnpm upgrade react@canary react-dom@canary use-sync-external-store@canary - name: Lint and test env: TEST_REACT_CANARY: 1 run: | pnpm clean pnpm build pnpm test pnpm test:build pnpm test-typing ================================================ FILE: .github/workflows/test-legacy-react.yml ================================================ name: Test React 17 on: push: branches: - main tags: - v* pull_request: jobs: test: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Install uses: ./.github/workflows/install - name: Test env: TEST_REACT_LEGACY: 1 run: | pnpm clean pnpm build pnpm test pnpm test:build pnpm test-typing ================================================ FILE: .github/workflows/test-release.yml ================================================ name: Test and Release on: push: branches: - main tags: - v* pull_request: jobs: test: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Install uses: ./.github/workflows/install - name: Lint and test run: | pnpm clean pnpm build pnpm run-all-checks npm pack pnpm attw pnpm test pnpm test:build pnpm test-typing e2e: runs-on: ubuntu-latest container: image: mcr.microsoft.com/playwright:v1.57.0-noble steps: - name: Checkout uses: actions/checkout@v4 - name: Install uses: ./.github/workflows/install - name: E2E Tests run: | pnpm clean pnpm build pnpm build:e2e pnpm test:e2e - name: Upload test results if: always() uses: actions/upload-artifact@v4 with: name: playwright-report path: playwright-report release: runs-on: ubuntu-latest needs: ["test", "e2e"] if: startsWith(github.ref, 'refs/tags/v') permissions: id-token: write steps: - name: Check out uses: actions/checkout@v4 - name: Install uses: ./.github/workflows/install - name: Determine tag id: determine_tag run: | echo "tag=$(echo $GITHUB_REF | grep -Eo 'alpha|beta|canary|rc')" >> $GITHUB_OUTPUT - name: Publish to versioned tag if: steps.determine_tag.outputs.tag != '' run: | echo "Publishing to ${{ steps.determine_tag.outputs.tag }} tag" npm publish --access public --no-git-checks --provenance --tag ${{ steps.determine_tag.outputs.tag }} env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }} - name: Publish to latest if: steps.determine_tag.outputs.tag == '' run: | echo "Publishing to latest" npm publish --access public --no-git-checks --provenance env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }} ================================================ FILE: .github/workflows/trigger-release.yml ================================================ on: workflow_dispatch: inputs: releaseType: description: Release stable or beta? required: true type: choice options: - beta - stable semverType: description: semver type? type: choice options: - patch - minor - major name: Trigger Release env: SEMVER_TYPE: ${{ github.event.inputs.semverType }} RELEASE_TYPE: ${{ github.event.inputs.releaseType }} jobs: start: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 with: fetch-depth: 10 token: ${{ secrets.RELEASE_BOT_GITHUB_TOKEN }} - name: Install uses: ./.github/workflows/install - name: Test run: | pnpm clean pnpm build pnpm run-all-checks pnpm test:build - name: Configure git run: | git config user.name "vercel-release-bot" git config user.email "infra+release@vercel.com" - name: Bump version and tag run: | node ./scripts/bump-next-version.js - name: Git push run: | git push origin main git push origin --tags ================================================ FILE: .gitignore ================================================ node_modules dist *.log *.tgz .env .next .DS_Store .idea .vscode .eslintcache examples/**/yarn.lock package-lock.json *.tsbuildinfo coverage .rollup.cache playwright-report test-results ================================================ FILE: .husky/pre-commit ================================================ pnpm lint-staged && pnpm types:check ================================================ FILE: .npmrc ================================================ # prevent sub-packages from installing peer-deps (multiple react versions) auto-install-peers=false ================================================ FILE: .swcrc ================================================ { "$schema": "https://json.schemastore.org/swcrc", "sourceMaps": true, "jsc": { "parser": { "syntax": "typescript", "tsx": true }, "transform": { "react": { "runtime": "automatic" } } } } ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2023 Vercel, Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ [![SWR](https://assets.vercel.com/image/upload/v1572289618/swr/banner.png)](https://swr.vercel.app)


## Introduction SWR is a React Hooks library for data fetching. The name “**SWR**” is derived from `stale-while-revalidate`, a cache invalidation strategy popularized by [HTTP RFC 5861](https://tools.ietf.org/html/rfc5861). **SWR** first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again. With 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: - **Fast**, **lightweight** and **reusable** data fetching - Transport and protocol agnostic - Built-in **cache** and request deduplication - **Real-time** experience - Revalidation on focus - Revalidation on network recovery - Polling - Pagination and scroll position recovery - SSR and SSG - Local mutation (Optimistic UI) - Built-in smart error retry - TypeScript - React Suspense - React Native ...and a lot more. With SWR, components will get **a stream of data updates constantly and automatically**. Thus, the UI will be always **fast** and **reactive**. --- **View full documentation and examples on [swr.vercel.app](https://swr.vercel.app).**
## Quick Start ```js import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return
failed to load
if (isLoading) return
loading...
return
hello {data.name}!
} ``` In this example, the React Hook `useSWR` accepts a `key` and a `fetcher` function. The `key` is a unique identifier of the request, normally the URL of the API. And the `fetcher` accepts `key` as its parameter and returns the data asynchronously. `useSWR` also returns 3 values: `data`, `isLoading` and `error`. When the request (fetcher) is not yet finished, `data` will be `undefined` and `isLoading` will be `true`. When we get a response, it sets `data` and `error` based on the result of `fetcher`, `isLoading` to false and rerenders the component. Note that `fetcher` can be any asynchronous function, you can use your favourite data-fetching library to handle that part. --- **View full documentation and examples on [swr.vercel.app](https://swr.vercel.app).**
## Authors This library is created by the team behind [Next.js](https://nextjs.org), with contributions from our community: - Shu Ding ([@shuding\_](https://x.com/shuding_)) - [Vercel](https://vercel.com) - Jiachi Liu ([@huozhi](https://x.com/huozhi)) - [Vercel](https://vercel.com) - Guillermo Rauch ([@rauchg](https://x.com/rauchg)) - [Vercel](https://vercel.com) - Joe Haddad ([@timer150](https://x.com/timer150)) - [Vercel](https://vercel.com) - Paco Coursey ([@pacocoursey](https://x.com/pacocoursey)) - [Vercel](https://vercel.com) [Contributors](https://github.com/vercel/swr/graphs/contributors) Thanks to Ryan Chen for providing the awesome `swr` npm package name!
## License The MIT License. ================================================ FILE: _internal/package.json ================================================ { "main": "../dist/_internal/index.js", "module": "../dist/_internal/index.mjs", "types": "../dist/_internal/index.d.ts", "private": true } ================================================ FILE: e2e/site/README.md ================================================ 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). ## Getting Started First, run the development server: ```bash npm run dev # or yarn dev # or pnpm dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. [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`. The `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. This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! ## Deploy on Vercel The 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. Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. ================================================ FILE: e2e/site/app/basic-ssr/block.tsx ================================================ 'use client' import useSWR from 'swr' import { useDebugHistory } from '~/lib/use-debug-history' export default function Block() { const { data } = useSWR('/api/data', async (url: string) => { const res = await fetch(url).then(v => v.json()) return res.name }) const debugRef = useDebugHistory(data, 'history:') return ( <>
result:{data || 'undefined'}
) } ================================================ FILE: e2e/site/app/basic-ssr/page.tsx ================================================ import Block from './block' export default function BasicSSRPage() { return } ================================================ FILE: e2e/site/app/concurrent-transition/page.tsx ================================================ 'use client' import { Suspense } from 'react' import dynamic from 'next/dynamic' const TransitionDemo = dynamic(() => import('./transition-demo'), { ssr: false }) export default function ConcurrentTransitionPage() { return (

React 19 Concurrent Transition Test

This page tests SWR's behavior with React 19 concurrent transitions. When using useTransition, SWR should "pause" loading states to provide smooth UX.

Loading page...
}> ) } ================================================ FILE: e2e/site/app/concurrent-transition/transition-demo.tsx ================================================ 'use client' import React, { useState, useTransition, Suspense, useCallback } from 'react' import useSWR from 'swr' // Simulate API data fetching with delay const fetcher = async (key: string): Promise => { // Slightly longer delay to make transition behavior more observable await new Promise(resolve => setTimeout(resolve, 150)) return key } // Component that uses SWR with suspense function DataComponent({ swrKey }: { swrKey: string }) { const { data } = useSWR(swrKey, fetcher, { dedupingInterval: 0, suspense: true, // React 19 improvements for concurrent features keepPreviousData: false }) return data:{data} } export default function TransitionDemo() { const [isPending, startTransition] = useTransition() const [key, setKey] = useState('initial-key') const handleTransition = useCallback(() => { startTransition(() => { setKey('new-key') }) }, []) return (

React 19 Concurrent Transition Demo

isPending:{isPending ? '1' : '0'}
loading} >

Click to test concurrent transition behavior

) } ================================================ FILE: e2e/site/app/issue-2702/page.tsx ================================================ import Comp from './reproduction' export default function Page() { return (
) } ================================================ FILE: e2e/site/app/issue-2702/reproduction.tsx ================================================ 'use client' import useSWR, { preload } from 'swr' import { Suspense, use, useEffect, useState } from 'react' const sleep = (time: number, data: string) => new Promise(resolve => { setTimeout(() => resolve(data), time) }) const Bug = () => { const a = use(preload('a', () => sleep(1000, 'a'))) const { data: b } = useSWR('b', () => sleep(2000, 'b'), { suspense: true }) useState(b) return (
{a},{b}
) } const Comp = () => { const [loading, setLoading] = useState(true) // To prevent SSR useEffect(() => { setLoading(false) }, []) if (loading) { return Loading... } return ( fetching}> ) } export default Comp ================================================ FILE: e2e/site/app/layout.tsx ================================================ export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {/* will contain the components returned by the nearest parent head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head */} {children} ) } ================================================ FILE: e2e/site/app/mutate-server-action/action.tsx ================================================ 'use server' export async function action(): Promise<{ result: number }> { await sleep(500) return { result: 10086 } } function sleep(ms: number): Promise { return new Promise(resolve => { setTimeout(() => { resolve() }, ms) }) } ================================================ FILE: e2e/site/app/mutate-server-action/page.tsx ================================================ 'use client' import useSWRMutation from 'swr/mutation' import { action } from './action' const useServerActionMutation = () => useSWRMutation('/api/mutate-server-action', () => action()) const Page = () => { const { trigger, data, isMutating } = useServerActionMutation() return (
isMutating: {isMutating.toString()}
data: {data?.result}
) } export default Page ================================================ FILE: e2e/site/app/page.tsx ================================================ 'use client' import { Suspense, useReducer } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' const fetcher = async (key: string) => { // Add a small delay to simulate network request await new Promise(resolve => setTimeout(resolve, 100)) return 'SWR' } const Section = ({ trigger }: { trigger: boolean }) => { const { data } = useSWR(trigger ? 'test-key' : undefined, fetcher, { suspense: true }) return
{data || 'empty'}
} export default function Page() { const [trigger, toggle] = useReducer(x => !x, false) return ( fallback}>
) } ================================================ FILE: e2e/site/app/partially-hydrate/layout.tsx ================================================ 'use client' import type { PropsWithChildren } from 'react' import { useDebugHistory } from '~/lib/use-debug-history' import useData from './use-data' export default function Layout({ children }: PropsWithChildren) { const { data } = useData() const debugRef = useDebugHistory(data, 'first history:') return (
<>first data:{data || 'undefined'}
{children} ) } ================================================ FILE: e2e/site/app/partially-hydrate/loading.tsx ================================================ export default function Loading() { return
Loading...
} ================================================ FILE: e2e/site/app/partially-hydrate/page.tsx ================================================ 'use client' import { useDebugHistory } from '~/lib/use-debug-history' import useData from './use-data' import { use } from 'react' let resolved = false const susp = new Promise(res => { setTimeout(() => { resolved = true res(true) }, 2000) }) export default function Page() { // We trigger the suspense boundary here! if (!resolved) { use(susp) } const { data } = useData() const debugRef = useDebugHistory(data, 'second history:') return (
<>second data (delayed hydration):{data || 'undefined'}
) } ================================================ FILE: e2e/site/app/partially-hydrate/use-data.tsx ================================================ import useSWR from 'swr' export default function useData() { return useSWR('/api/data', async (url: string) => { const res = await fetch(url).then(v => v.json()) return res.name }) } ================================================ FILE: e2e/site/app/perf/page.tsx ================================================ 'use client' import { useState } from 'react' import useSWR from 'swr' const elementCount = 10_000 const useData = () => { return useSWR('1', async (url: string) => { return 1 }) } const HookUser = () => { const { data } = useData() return
{data}
} /** * This renders 10,000 divs and is used to compare against the render performance * when using swr. */ const CheapComponent = () => { const cheapComponents = Array.from({ length: elementCount }, (_, i) => (
{i}
)) return (

Cheap Component

{cheapComponents}
) } /** * This renders 10,000 divs, each of which uses the same swr hook. */ const ExpensiveComponent = () => { const hookComponents = Array.from({ length: elementCount }, (_, i) => ( )) return (

Expensive Component

{hookComponents}
) } export default function PerformancePage() { const [renderExpensive, setRenderExpensive] = useState(false) return (

Performance Page

{!renderExpensive ? : }
) } ================================================ FILE: e2e/site/app/react-server-entry/page.tsx ================================================ import { unstable_serialize } from 'swr' import { unstable_serialize as infinite_unstable_serialize } from 'swr/infinite' export default function Page() { return ( <>
SWR Server Component entry test
unstable_serialize: {unstable_serialize('useSWR')}
infinite_unstable_serialize:{' '} {infinite_unstable_serialize(() => 'useSWRInfinite')}
) } ================================================ FILE: e2e/site/app/render-count/page.tsx ================================================ 'use client' import useSWR from 'swr' export default function Page() { useSWR('swr should not cause extra rerenders') console.count('render') return
render count pages
} ================================================ FILE: e2e/site/app/render-preload-avoid-waterfall/page.tsx ================================================ 'use client' import { Suspense, useEffect, useState } from 'react' import useSWR, { preload } from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' const keyA = 'render-preload-avoid-waterfall:a' const keyB = 'render-preload-avoid-waterfall:b' const delay = 200 async function fetcherA() { await sleep(delay) return 'foo' } async function fetcherB() { await sleep(delay) return 'bar' } function Preload({ children }: { children?: React.ReactNode }) { const [ready, setReady] = useState(false) useEffect(() => { preload(keyA, fetcherA) preload(keyB, fetcherB) setReady(true) }, []) return ready ? <>{children} : null } function Content() { const { data: first } = useSWR(keyA, fetcherA, { suspense: true }) const { data: second } = useSWR(keyB, fetcherB, { suspense: true }) useEffect(() => { if (!first || !second) { return } }, [first, second]) return (
data:{first}:{second}
) } export default function Page() { return ( Loading...}> ) } ================================================ FILE: e2e/site/app/render-preload-basic/page.tsx ================================================ 'use client' import { Suspense, useEffect, useState } from 'react' import useSWR, { preload } from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' const key = 'render-preload-basic' let fetchCount = 0 async function fetcher() { await sleep(100) fetchCount += 1 return 'foo' } function Preload({ children }: { children?: React.ReactNode }) { const [isPreloaded, setIsPreloaded] = useState(false) useEffect(() => { preload(key, fetcher) setIsPreloaded(true) }, []) return <>{isPreloaded ? children : null} } export default function Page() { const { data } = useSWR(key, fetcher) const [count, setCount] = useState(fetchCount) useEffect(() => { setCount(fetchCount) }, [data]) return ( Loading...}>
data:{data ?? ''}
fetches: {count}
 ) } ================================================ FILE: e2e/site/app/render-promise-suspense-error/page.tsx ================================================ 'use client' import { Suspense, useMemo, useState } from 'react' import type { ReactNode } from 'react' import { ErrorBoundary } from 'react-error-boundary' import useSWR, { SWRConfig } from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' const key = 'render-promise-suspense-error' const fallbackDelay = 150 function PromiseConfig({ children }: { children: ReactNode }) { const [fallback] = useState(() => sleep(fallbackDelay).then(() => { throw new Error('error') }) ) const value = useMemo(() => ({ fallback: { [key]: fallback } }), [fallback]) return {children} } function Content() { const { data } = useSWR(key) return
data:{data ?? 'undefined'}
} export default function Page() { return ( (
{error.message}
)} > loading}> ) } ================================================ FILE: e2e/site/app/render-promise-suspense-resolve/page.tsx ================================================ 'use client' import { Suspense, useMemo, useState } from 'react' import type { ReactNode } from 'react' import useSWR, { SWRConfig } from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' import { useDebugHistory } from '~/lib/use-debug-history' const key = 'render-promise-suspense-resolve' const fallbackDelay = 150 const fetchDelay = 200 async function fetcher() { await sleep(fetchDelay) return 'new data' } function PromiseConfig({ children }: { children: ReactNode }) { const [fallback] = useState(() => sleep(fallbackDelay).then(() => 'initial data') ) const value = useMemo(() => ({ fallback: { [key]: fallback } }), [fallback]) return {children} } function Content() { const { data } = useSWR(key, fetcher) const historyRef = useDebugHistory(data, 'history:') return (
data:{data ?? 'undefined'}
) } export default function Page() { return ( loading}> ) } ================================================ FILE: e2e/site/app/render-promise-suspense-shared/page.tsx ================================================ 'use client' import { Suspense, useMemo, useState } from 'react' import type { ReactNode } from 'react' import useSWR, { SWRConfig } from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' const key = 'render-promise-suspense-shared' const fallbackDelay = 150 function PromiseConfig({ children }: { children: ReactNode }) { const [fallback] = useState(() => sleep(fallbackDelay).then(() => 'value')) const value = useMemo(() => ({ fallback: { [key]: fallback } }), [fallback]) return {children} } function Item({ id }: { id: string }) { const { data } = useSWR(key) return
data:{data ?? 'undefined'}
} export default function Page() { return ( loading}>
) } ================================================ FILE: e2e/site/app/render-suspense-avoid-rerender/page.tsx ================================================ 'use client' import { Suspense, useRef } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchValue() { await sleep(150) return 'SWR' } function Section() { const startCountRef = useRef(0) const dataCountRef = useRef(0) const prevDataRef = useRef(Symbol('initial')) startCountRef.current += 1 const { data } = useSWR('render-suspense-avoid-rerender', fetchValue, { suspense: true }) if (data !== prevDataRef.current) { if (data !== undefined) { dataCountRef.current += 1 } prevDataRef.current = data } return (
start renders: {startCountRef.current}
data renders: {dataCountRef.current}
{data}
) } export default function Page() { return ( fallback}>
) } ================================================ FILE: e2e/site/app/render-suspense-cached-error/page.tsx ================================================ 'use client' import { Suspense } from 'react' import { ErrorBoundary } from 'react-error-boundary' import useSWR, { SWRConfig } from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchWithError(): Promise { await sleep(150) throw new Error('error') } function Section() { const { data, error } = useSWR( 'render-suspense-cached-error', fetchWithError, { suspense: true } ) return (
data: {data ?? ''}, error: {error?.message ?? ''}
) } const cache = new Map() cache.set('render-suspense-cached-error', 'hello') const cacheProvider = () => cache function ErrorFallback(_: { error: Error; resetErrorBoundary: () => void }) { return
error boundary
} export default function Page() { return ( fallback}>
) } ================================================ FILE: e2e/site/app/render-suspense-error/page.tsx ================================================ 'use client' import { Suspense } from 'react' import useSWR from 'swr' import { ErrorBoundary } from 'react-error-boundary' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchWithError(): Promise { await sleep(120) throw new Error('error') } function Section() { const { data } = useSWR('render-suspense-error', fetchWithError, { suspense: true }) return
{data}
} function ErrorFallback(_: { error: Error; resetErrorBoundary: () => void }) { return
error boundary
} export default function Page() { return ( fallback}>
) } ================================================ FILE: e2e/site/app/render-suspense-fallback/page.tsx ================================================ 'use client' import { Suspense } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchGreeting() { await sleep(500) return 'SWR' } function Section() { const { data } = useSWR('render-suspense-fallback', fetchGreeting, { suspense: true }) return
{data}
} export default function Page() { return ( fallback}>
) } ================================================ FILE: e2e/site/app/render-suspense-fetcher/page.tsx ================================================ 'use client' import { Suspense, useRef, useState } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' function Section() { const [prefix, setPrefix] = useState('a') const fetcherRef = useRef<() => Promise>(() => sleep(100).then(() => 'foo') ) const { data } = useSWR( `render-suspense-fetcher-${prefix}`, () => fetcherRef.current(), { suspense: true } ) return (
data:{data}
) } export default function Page() { return ( loading}>
) } ================================================ FILE: e2e/site/app/render-suspense-infinite-preload/page.tsx ================================================ 'use client' import { Suspense, useEffect, useState } from 'react' import useSWRInfinite from 'swr/infinite' import { preload } from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' const baseKey = 'render-suspense-infinite-preload' const getKey = (index: number) => `${baseKey}-${index}` let fetchCount = 0 let preloaded = false let fallbackRenderCount = 0 async function fetcher(key: string) { fetchCount += 1 await sleep(100) return `${key}-value` } if (!preloaded) { preloaded = true preload(getKey(0), fetcher) } function Section() { const { data } = useSWRInfinite(index => getKey(index), fetcher, { suspense: true }) const [count, setCount] = useState(fetchCount) const [fallbackCount, setFallbackCount] = useState(fallbackRenderCount) useEffect(() => { setCount(fetchCount) setFallbackCount(fallbackRenderCount) }, [data]) const firstPage = data?.[0] return (
{firstPage ?? 'no-data'}
fetches: {count}
fallback renders: {fallbackCount}
) } function Fallback() { fallbackRenderCount += 1 return
loading
} export default function Page() { return ( }>
) } ================================================ FILE: e2e/site/app/render-suspense-initial-data/page.tsx ================================================ 'use client' import { Suspense } from 'react' import useSWR from 'swr' const fetcher = () => 'SWR' function PageContent() { const { data } = useSWR('render-suspense-initial-data', fetcher, { fallbackData: 'Initial', suspense: true }) return
hello, {data}
} export default function Page() { return ( fallback}> ) } ================================================ FILE: e2e/site/app/render-suspense-keep-previous/page.tsx ================================================ 'use client' import { Suspense, useState } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchValue(key: string) { await sleep(150) return `data:${key}` } function Section() { const [query, setQuery] = useState('origin') const { data } = useSWR(query, fetchValue, { suspense: true, keepPreviousData: true }) return (
{data}
) } function Fallback() { return
loading
} export default function Page() { return ( }>
) } ================================================ FILE: e2e/site/app/render-suspense-key-change/page.tsx ================================================ 'use client' import { Suspense, useState } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchValue(key: string) { await sleep(120) return key } function Section() { const [key, setKey] = useState('initial') const { data } = useSWR( key ? `render-suspense-key-change-${key}` : null, fetchValue, { suspense: true } ) return (
data: {data}
) } export default function Page() { return ( fallback}>
) } ================================================ FILE: e2e/site/app/render-suspense-multiple-fallbacks/page.tsx ================================================ 'use client' import { Suspense } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchValue(key: string) { if (key === 'render-suspense-multiple-fallbacks-1') { await sleep(50) return 1 } await sleep(140) return 2 } function Section() { const { data: v1 } = useSWR( 'render-suspense-multiple-fallbacks-1', fetchValue, { suspense: true } ) const { data: v2 } = useSWR( 'render-suspense-multiple-fallbacks-2', fetchValue, { suspense: true } ) return
{(v1 ?? 0) + (v2 ?? 0)}
} export default function Page() { return ( fallback}>
) } ================================================ FILE: e2e/site/app/render-suspense-no-revalidate/page.tsx ================================================ 'use client' import { Suspense, useLayoutEffect, useState } from 'react' import useSWR, { preload } from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchFreshValue() { await sleep(120) return 'fresh' } function Preload({ children }: { children?: React.ReactNode }) { const [isMounted, setIsMounted] = useState(false) useLayoutEffect(() => { preload('render-suspense-no-revalidate', () => 'cached') setIsMounted(true) }, []) return isMounted ? <>{children} : null } function Section() { const { data } = useSWR('render-suspense-no-revalidate', fetchFreshValue, { suspense: true, revalidateIfStale: false }) return
data: {data}
} export default function Page() { return ( fallback}>
) } ================================================ FILE: e2e/site/app/render-suspense-non-promise/page.tsx ================================================ 'use client' import { Suspense } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' function Section() { const { data } = useSWR('render-suspense-non-promise', () => 'hello', { suspense: true }) return
{data}
} export default function Page() { return ( fallback}>
) } ================================================ FILE: e2e/site/app/render-suspense-null-key/page.tsx ================================================ 'use client' import { Suspense, useState } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchValue(key: string) { await sleep(150) return key } function Result({ query }: { query: string }) { const { data } = useSWR( query ? `render-suspense-null-key-${query}` : null, fetchValue, { suspense: true } ) const text = data ?? 'render-suspense-null-key-nodata' return
{text}
} export default function Page() { const [query, setQuery] = useState('123') return (
) } ================================================ FILE: e2e/site/app/render-suspense-same-data/page.tsx ================================================ 'use client' import { Suspense, useState } from 'react' import useSWR from 'swr' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' async function fetchValue() { await sleep(120) return '123' } function Section() { const [step, setStep] = useState(1) const { data } = useSWR(`render-suspense-same-data-${step}`, fetchValue, { suspense: true }) return (
data: {data},{step}
) } export default function Page() { return ( fallback}>
) } ================================================ FILE: e2e/site/app/server-prefetch-warning/page.tsx ================================================ 'use client' import { useEffect, useState } from 'react' import useSWR, { SWRConfig } from 'swr' const fetcher = () => 'SWR' function Content() { const [hydrated, setHydrated] = useState(false) useEffect(() => { setHydrated(true) }, []) useSWR('ssr:1', fetcher) useSWR('ssr:2', fetcher) useSWR('ssr:3', fetcher, { strictServerPrefetchWarning: false }) useSWR('ssr:4', fetcher, { fallbackData: 'SWR' }) useSWR('ssr:5', fetcher) return (
server-prefetch-warning
{hydrated ? 'hydrated' : 'ssr'}
) } export default function ServerPrefetchWarningPage() { return ( ) } ================================================ FILE: e2e/site/app/suspense-after-preload/page.tsx ================================================ 'use client' import { Suspense } from 'react' import dynamic from 'next/dynamic' const RemoteData = dynamic(() => import('./remote-data'), { ssr: false }) export default function HomePage() { return ( loading component}> ) } ================================================ FILE: e2e/site/app/suspense-after-preload/remote-data.tsx ================================================ 'use client' import { Suspense, useState } from 'react' import useSWR from 'swr' import { preload } from 'swr' const fetcher = ([key, delay]: [key: string, delay: number]) => new Promise(r => { setTimeout(r, delay, key) }) const key = ['suspense-after-preload', 300] as const const useRemoteData = () => useSWR(key, fetcher, { suspense: true }) const Demo = () => { const { data } = useRemoteData() return
{data}
} function Comp() { const [show, toggle] = useState(false) return (
{show ? ( loading
}> ) : null} ) } export default Comp ================================================ FILE: e2e/site/app/suspense-fallback/layout.tsx ================================================ import { SWRConfig } from 'swr' function createPromiseData(data: any, timeout: number) { return new Promise(resolve => { setTimeout(() => { resolve(data) }, timeout) }) } export default function Layout({ children }: { children: React.ReactNode }) { const fallback = { '/api/promise': createPromiseData({ value: 'async promise' }, 2000) } return {children} } ================================================ FILE: e2e/site/app/suspense-fallback/promise/page.tsx ================================================ 'use client' import useSWR from 'swr' export default function Page() { const { data, isLoading } = useSWR('/api/promise') return
{isLoading ? 'loading...' : data?.value}
} ================================================ FILE: e2e/site/app/suspense-infinite-get-key/page.tsx ================================================ 'use client' import { Suspense, useState } from 'react' import useSWRInfinite from 'swr/infinite' import { OnlyRenderInClient } from '~/component/only-render-in-client' import { sleep } from '~/lib/sleep' const DATA: Record = { 'suspense-key-a': ['A1', 'A2', 'A3'], 'suspense-key-b': ['B1', 'B2', 'B3'] } async function fetchList(key: string) { await sleep(150) return DATA[key] } function List() { const [status, setStatus] = useState<'a' | 'b'>('a') const { data, setSize } = useSWRInfinite( () => (status === 'a' ? 'suspense-key-a' : 'suspense-key-b'), fetchList, { suspense: true } ) return ( <>
data: {String(data)}
) } export default function Page() { return ( loading}> ) } ================================================ FILE: e2e/site/app/suspense-retry/manual-retry.tsx ================================================ 'use client' import { Suspense } from 'react' import { ErrorBoundary } from 'react-error-boundary' import { useRemoteData, preloadRemote } from './use-remote-data' const Demo = () => { const { data } = useRemoteData() return
data: {data}
} function Fallback({ resetErrorBoundary }: any) { return (

Something went wrong

) } function RemoteData() { return (
{ preloadRemote() }} > loading
}> ) } export default RemoteData ================================================ FILE: e2e/site/app/suspense-retry/page.tsx ================================================ 'use client' import { Suspense } from 'react' import dynamic from 'next/dynamic' const RemoteData = dynamic(() => import('./manual-retry'), { ssr: false }) export default function HomePage() { return ( loading component}> ) } ================================================ FILE: e2e/site/app/suspense-retry/use-remote-data.ts ================================================ 'use client' import useSWR from 'swr' import { preload } from 'swr' let count = 0 const fetcher = () => { count++ if (count === 1) return Promise.reject('wrong') return fetch('/api/retry') .then(r => r.json()) .then(r => r.name) } const key = 'manual-retry-18-3' export const useRemoteData = () => useSWR(key, fetcher, { suspense: true }) export const preloadRemote = () => preload(key, fetcher) ================================================ FILE: e2e/site/app/suspense-undefined-key/page.tsx ================================================ 'use client' import { Suspense, useReducer } from 'react' import useSWR from 'swr' const fetcher = async (key: string) => { // Add a small delay to simulate network request await new Promise(resolve => setTimeout(resolve, 100)) return 'SWR' } const Section = ({ trigger }: { trigger: boolean }) => { const { data } = useSWR(trigger ? 'test-key' : undefined, fetcher, { suspense: true }) return
{data || 'empty'}
} export default function Page() { const [trigger, toggle] = useReducer(x => !x, false) return (
fallback
}>
) } ================================================ FILE: e2e/site/component/manual-retry-mutate.tsx ================================================ import { Suspense } from 'react' import { ErrorBoundary } from 'react-error-boundary' import useSWR from 'swr' import { mutate } from 'swr' let count = 0 export const fetcher = () => { count++ if (count === 1) return Promise.reject('wrong') return fetch('/api/retry') .then(r => r.json()) .then(r => r.name) } const key = 'manual-retry-mutate' export const useRemoteData = () => useSWR(key, fetcher, { suspense: true }) const Demo = () => { const { data } = useRemoteData() return
data: {data}
} function Fallback({ resetErrorBoundary }: any) { return (

Something went wrong

) } function RemoteData() { return (
loading
}> ) } export default RemoteData ================================================ FILE: e2e/site/component/manual-retry.tsx ================================================ import { Suspense } from 'react' import { ErrorBoundary } from 'react-error-boundary' import { useRemoteData, preloadRemote } from './use-remote-data' const Demo = () => { const { data } = useRemoteData() return
data: {data}
} function Fallback({ resetErrorBoundary }: any) { return (

Something went wrong

) } function RemoteData() { return (
{ preloadRemote() }} > loading
}> ) } export default RemoteData ================================================ FILE: e2e/site/component/only-render-in-client.tsx ================================================ 'use client' import React from 'react' // This component ensures its children are only rendered on the client side. export function OnlyRenderInClient({ children }: { children?: React.ReactNode }) { const [isClient, setIsClient] = React.useState(false) React.useEffect(() => { setIsClient(true) }, []) if (!isClient) { return null } return <>{children} } ================================================ FILE: e2e/site/component/use-remote-data.ts ================================================ import useSWR from 'swr' import { preload } from 'swr' let count = 0 export const fetcher = () => { count++ if (count === 1) return Promise.reject('wrong') return fetch('/api/retry') .then(r => r.json()) .then(r => r.name) } const key = 'manual-retry-18-2' export const useRemoteData = () => useSWR(key, fetcher, { suspense: true }) export const preloadRemote = () => preload(key, fetcher) ================================================ FILE: e2e/site/lib/sleep.ts ================================================ export function sleep(ms: number) { return new Promise(resolve => setTimeout(resolve, ms)) } ================================================ FILE: e2e/site/lib/use-debug-history.ts ================================================ 'use client' import { useEffect, useRef } from 'react' export const useDebugHistory = (data: T, prefix = '') => { const dataRef = useRef([]) const debugRef = useRef(null) useEffect(() => { dataRef.current.push(data) if (debugRef.current) { debugRef.current.innerText = `${prefix}${JSON.stringify(dataRef.current)}` } }, [data, prefix]) return debugRef } ================================================ FILE: e2e/site/next-env.d.ts ================================================ /// /// /// import './.next/types/routes.d.ts' // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. ================================================ FILE: e2e/site/next.config.js ================================================ /** @type {import('next').NextConfig} */ const nextConfig = {} module.exports = nextConfig ================================================ FILE: e2e/site/package.json ================================================ { "name": "site", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@types/node": "^22.19.1", "@types/react": "^19.2.7", "@types/react-dom": "^19.2.7", "next": "^16.0.10", "react": "^19.1.4", "react-dom": "^19.1.4", "typescript": "5.9.3", "swr": "link:../../" } } ================================================ FILE: e2e/site/pages/api/data.ts ================================================ // Next.js API route support: https://nextjs.org/docs/api-routes/introduction import type { NextApiRequest, NextApiResponse } from 'next' type Data = { name: string } export default function handler( req: NextApiRequest, res: NextApiResponse ) { res.status(200).json({ name: 'SSR Works' }) } ================================================ FILE: e2e/site/pages/api/retry.ts ================================================ import type { NextApiRequest, NextApiResponse } from 'next' type Data = { name: string } export default function handler( req: NextApiRequest, res: NextApiResponse ) { res.status(200).json({ name: 'SWR suspense retry works' }) } ================================================ FILE: e2e/site/pages/suspense-retry-19.tsx ================================================ import { Suspense } from 'react' import dynamic from 'next/dynamic' const RemoteData = dynamic(() => import('../component/manual-retry'), { ssr: false }) export default function HomePage() { return ( loading component}> ) } ================================================ FILE: e2e/site/pages/suspense-retry-mutate.tsx ================================================ import { Suspense } from 'react' import dynamic from 'next/dynamic' const RemoteData = dynamic(() => import('../component/manual-retry-mutate'), { ssr: false }) export default function HomePage() { return ( loading component}> ) } ================================================ FILE: e2e/site/tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", "incremental": true, "plugins": [ { "name": "next" } ], "baseUrl": ".", "paths": { "~/*": [ "./*" ] } }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts" ], "exclude": [ "node_modules" ] } ================================================ FILE: e2e/test/concurrent-transition.test.ts ================================================ import { test, expect } from '@playwright/test' test.describe('concurrent rendering transitions', () => { test('should pause when changing the key inside a transition', async ({ page }) => { // Navigate to the test page await page.goto('./concurrent-transition', { waitUntil: 'networkidle' }) // Wait for page to be fully loaded and interactive await expect(page.getByTestId('pending-state')).toContainText('isPending:0') // Wait for initial data to load await expect(page.getByTestId('data-content')).toContainText( 'data:initial-key' ) // Ensure the component is in a stable state before triggering transition await page.waitForTimeout(100) // Click to trigger transition await page.getByTestId('transition-trigger').click() // Verify transition starts - isPending becomes true await expect(page.getByTestId('pending-state')).toContainText('isPending:1') // During transition: data should still show old value (this is the key behavior) // In React 19, this behavior should be more consistent await expect(page.getByTestId('data-content')).toContainText( 'data:initial-key' ) // Wait for transition to complete await expect(page.getByTestId('pending-state')).toContainText('isPending:0') await expect(page.getByTestId('data-content')).toContainText('data:new-key') }) }) ================================================ FILE: e2e/test/initial-render.test.ts ================================================ import { test, expect } from '@playwright/test' test.describe('rendering', () => { test('suspense with preload', async ({ page }) => { await page.goto('./suspense-after-preload', { waitUntil: 'commit' }) await page.getByRole('button', { name: 'preload' }).click() await expect(page.getByText('suspense-after-preload')).toBeVisible() }) test('should be able to retry in suspense with react 19 (app router)', async ({ page }) => { await page.goto('./suspense-retry', { waitUntil: 'commit' }) await expect(page.getByText('Something went wrong')).toBeVisible() await page.getByRole('button', { name: 'retry' }).click() await expect(page.getByText('data: SWR suspense retry works')).toBeVisible() }) test('should be able to retry in suspense with react 19 (pages router)', async ({ page }) => { await page.goto('./suspense-retry-19', { waitUntil: 'commit' }) await expect(page.getByText('Something went wrong')).toBeVisible() await page.getByRole('button', { name: 'retry' }).click() await expect(page.getByText('data: SWR suspense retry works')).toBeVisible() }) test('should be able to retry in suspense with mutate', async ({ page }) => { await page.goto('./suspense-retry-mutate', { waitUntil: 'commit' }) await expect(page.getByText('Something went wrong')).toBeVisible() await page.getByRole('button', { name: 'retry' }).click() await expect(page.getByText('data: SWR suspense retry works')).toBeVisible() }) test('should be able to use `unstable_serialize` in server component', async ({ page }) => { await page.goto('./react-server-entry', { waitUntil: 'commit' }) await expect(page.getByText('unstable_serialize: useSWR')).toBeVisible() await expect( page.getByText('infinite_unstable_serialize: $inf$useSWRInfinite') ).toBeVisible() }) test('swr should not cause extra rerenders', async ({ page }) => { const renderLogs: string[] = [] await page.exposeFunction('consoleCount', (msg: string) => { renderLogs.push(msg) }) await page.addInitScript(() => { const originalConsoleCount = console.count console.count = (label?: string) => { // @ts-ignore window.consoleCount(label) originalConsoleCount.call(console, label) } }) await page.goto('./render-count', { waitUntil: 'commit' }) // wait a bit to ensure no extra renders happen await page.waitForTimeout(500) const renderCount = renderLogs.filter(log => log === 'render').length expect(renderCount).toBe(1) }) }) ================================================ FILE: e2e/test/issue-2702-too-many-hooks.ts ================================================ import { test, expect } from '@playwright/test' test.describe('issue 2702', () => { test('should not crash with too many hooks', async ({ page }) => { // Navigate to the test page await page.goto('./issue-2702', { waitUntil: 'networkidle' }) // Wait for the page to be fully loaded and interactive await expect(page.getByText('fetching')).toBeVisible() // Verify that the component renders correctly await expect(page.getByText('a,b')).toBeVisible() }) }) ================================================ FILE: e2e/test/mutate-server-action.test.ts ================================================ import { test, expect } from '@playwright/test' test('mutate-server-action', async ({ page }) => { await page.goto('./mutate-server-action') await page.getByRole('button', { name: 'mutate' }).click() await expect(page.getByText('isMutating: true')).toBeVisible() await expect(page.getByText('data: ')).toBeVisible() await page.waitForTimeout(500) await expect(page.getByText('isMutating: false')).toBeVisible() await expect(page.getByText('data: 10086')).toBeVisible() }) ================================================ FILE: e2e/test/perf.test.ts ================================================ import { test, expect } from '@playwright/test' test.describe('performance', () => { test('should render expensive component within 1 second after checkbox click', async ({ page }) => { // Navigate to the perf page await page.goto('./perf', { waitUntil: 'load' }) // Inject performance measurement into the page await page.evaluate(() => { const checkboxInput = document.querySelector( 'input[type="checkbox"]' ) as HTMLInputElement let expensiveComponentContainer: HTMLElement | null = null const targetChildCount = 10_000 let startTime = 0 // Track when React starts and completes rendering const observer = new MutationObserver(mutations => { for (const mutation of mutations) { const addedNodes = Array.from(mutation.addedNodes) for (const node of addedNodes) { if (node instanceof HTMLElement) { const h2 = node.querySelector?.('h2') if (h2?.textContent === 'Expensive Component') { expensiveComponentContainer = node console.log('Found Expensive Component container') } } } if (expensiveComponentContainer) { const renderedComponents = expensiveComponentContainer.querySelectorAll('div > div').length if (renderedComponents % 1000 === 0 && renderedComponents > 0) { console.log(`Rendered ${renderedComponents} components...`) } if (renderedComponents >= targetChildCount) { console.log(`All ${renderedComponents} components rendered!`) // Use requestAnimationFrame to ensure the browser has painted requestAnimationFrame(() => { requestAnimationFrame(() => { // Double RAF to ensure we're after the paint window.performance.mark('expensive-component-painted') const paintTime = performance.now() - startTime console.log( `Total time including paint: ${paintTime.toFixed(2)}ms` ) }) }) observer.disconnect() } } } }) observer.observe(document.body, { childList: true, subtree: true }) // Capture more precise timing checkboxInput.addEventListener( 'click', () => { startTime = performance.now() window.performance.mark('state-change-start') console.log('Checkbox clicked, state change started') }, { once: true } ) }) // Find and click the checkbox const checkbox = page.locator('input[type="checkbox"]') await checkbox.click() // Wait for the expensive component to be fully rendered const expensiveComponentHeading = page.locator( 'h2:has-text("Expensive Component")' ) await expect(expensiveComponentHeading).toBeVisible({ timeout: 60_000 }) // Wait for all components and paint to complete await page.waitForFunction( () => { return ( window.performance.getEntriesByName('expensive-component-painted') .length > 0 ) }, { timeout: 5000 } ) // Get the render time from state change to paint const renderTime = await page.evaluate(() => { const startMark = window.performance.getEntriesByName('state-change-start')[0] const paintMark = window.performance.getEntriesByName( 'expensive-component-painted' )[0] if (!startMark || !paintMark) { throw new Error('Performance marks not found') } return paintMark.startTime - startMark.startTime }) // Assert that the rendering took less than 1 second (1000ms) expect(renderTime).toBeLessThan(1000) }) }) ================================================ FILE: e2e/test/preload-scenarios.test.ts ================================================ import { expect, test } from '@playwright/test' test.describe('preload scenarios', () => { test('preloads fetcher before mount', async ({ page }) => { await page.goto('./render-preload-basic', { waitUntil: 'commit' }) await expect(page.getByTestId('data')).toHaveText('data:foo') await expect(page.getByTestId('fetch-count')).toHaveText('fetches: 1') }) test('avoids suspense waterfall when preloading multiple resources', async ({ page }) => { await page.goto('./render-preload-avoid-waterfall', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toBeVisible() await page.waitForTimeout(200) await expect(page.getByTestId('fallback')).not.toBeVisible() await expect(page.getByTestId('data')).toHaveText('data:foo:bar') }) }) ================================================ FILE: e2e/test/promise-scenarios.test.ts ================================================ import { expect, test } from '@playwright/test' test.describe('promise scenarios', () => { test('suspends while resolving fallback promise', async ({ page }) => { await page.goto('./render-promise-suspense-resolve', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toBeVisible() const history = page.getByTestId('history') await expect(history).toContainText('"initial data"') await expect(page.getByTestId('data')).toHaveText('data:new data') await expect(history).toHaveText('history:["initial data","new data"]') await expect(page.getByTestId('fallback')).toHaveCount(0) }) test('surfaces error boundary when fallback promise rejects', async ({ page }) => { await page.goto('./render-promise-suspense-error', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toBeVisible() await expect(page.getByTestId('error')).toHaveText('error') await expect(page.getByTestId('fallback')).toHaveCount(0) await expect(page.getByTestId('data')).toHaveCount(0) }) test('resolves shared fallback promise once for multiple consumers', async ({ page }) => { await page.goto('./render-promise-suspense-shared', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toBeVisible() await expect(page.getByTestId('data-first')).toHaveText('data:value') await expect(page.getByTestId('data-second')).toHaveText('data:value') await expect(page.getByTestId('fallback')).toHaveCount(0) }) }) ================================================ FILE: e2e/test/server-prefetch-warning.test.ts ================================================ import { test, expect } from '@playwright/test' const warningForKey = (key: string) => `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.` test.describe('strictServerPrefetchWarning', () => { test('warns on hydration when data is missing', async ({ page }) => { const warnings: string[] = [] page.on('console', msg => { if (msg.type() !== 'warning') return const text = msg.text() if (text.includes('Missing pre-initiated data')) { warnings.push(text) } }) await page.goto('./server-prefetch-warning', { waitUntil: 'commit' }) await expect(page.getByTestId('hydration-state')).toHaveText('hydrated') await expect.poll(() => warnings.length).toBe(2) expect(warnings).toEqual( expect.arrayContaining([warningForKey('ssr:1'), warningForKey('ssr:2')]) ) expect(warnings).toHaveLength(2) }) }) ================================================ FILE: e2e/test/stream-ssr.test.ts ================================================ import { test, expect } from '@playwright/test' test.describe('Stream SSR', () => { test('Basic SSR', async ({ page }) => { const log: any[] = [] await page.exposeFunction('consoleError', (msg: any) => log.push(msg)) await page.addInitScript(` const onError = window.onerror window.onerror = (...args) => { consoleError(...args) onError(...args) } `) await page.goto('./basic-ssr', { waitUntil: 'commit' }) await expect(page.getByText('result:undefined')).toBeVisible() await expect(page.getByText('result:SSR Works')).toBeVisible() await expect(page.getByText('history:[null,"SSR Works"]')).toBeVisible() expect(log).toHaveLength(0) }) test('Partially Hydrate', async ({ page }) => { const log: any[] = [] await page.exposeFunction('consoleError', (msg: any) => log.push(msg)) await page.addInitScript(` const onError = window.onerror window.onerror = (...args) => { consoleError(...args) onError(...args) } `) await page.goto('./partially-hydrate', { waitUntil: 'commit' }) await expect(page.getByText('first data:undefined')).toBeVisible() await expect( page.getByText('second data (delayed hydration):undefined') ).toBeVisible() await expect(page.getByText('first data:SSR Works')).toBeVisible() await expect( page.getByText('second data (delayed hydration):SSR Works') ).toBeVisible() await expect( page.getByText('first history:[null,"SSR Works"]') ).toBeVisible() await expect( page.getByText('second history:[null,"SSR Works"]') ).toBeVisible() expect(log).toHaveLength(0) }) }) ================================================ FILE: e2e/test/suspense-fallback.test.ts ================================================ import { test, expect } from '@playwright/test' test.describe('suspense fallback', () => { test('should wait for promise fallback value to be resolved', async ({ page }) => { await page.goto('./suspense-fallback/promise', { waitUntil: 'commit' }) await expect(page.getByText('async promise')).toBeVisible() }) }) ================================================ FILE: e2e/test/suspense-scenarios.test.ts ================================================ import { expect, test } from '@playwright/test' // Group all suspense-related scenarios so they run together. test.describe('suspense scenarios', () => { test('waits for promise fallback value to resolve', async ({ page }) => { await page.goto('./suspense-fallback/promise', { waitUntil: 'commit' }) await expect(page.getByText('async promise')).toBeVisible() }) test('updates data when suspense key changes', async ({ page }) => { await page.goto('./suspense-infinite-get-key', { waitUntil: 'commit' }) await expect(page.getByTestId('data')).toHaveText('data: A1,A2,A3') await page.getByRole('button', { name: 'mutate' }).click() await expect(page.getByTestId('data')).toHaveText('data: B1,B2,B3') }) test('shows fallback before resolved data renders', async ({ page }) => { await page.goto('./render-suspense-fallback', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toBeVisible() await expect(page.getByTestId('data')).toHaveText('SWR') }) test('keeps fallback visible until multiple resources resolve', async ({ page }) => { await page.goto('./render-suspense-multiple-fallbacks', { waitUntil: 'commit' }) const fallback = page.getByTestId('fallback') await expect(fallback).toBeVisible() await page.waitForTimeout(80) await expect(fallback).toBeVisible() await page.waitForTimeout(120) await expect(page.getByTestId('data')).toHaveText('3') }) test('renders synchronously resolved data without fallback', async ({ page }) => { await page.goto('./render-suspense-non-promise', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toHaveCount(0) await expect(page.getByTestId('data')).toHaveText('hello') }) test('surfaces error boundary after suspense fallback', async ({ page }) => { await page.goto('./render-suspense-error', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toBeVisible() await expect(page.getByTestId('error')).toBeVisible() }) test.skip('retains cached data while surfacing errors', async ({ page }) => { await page.goto('./render-suspense-cached-error', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toHaveCount(0) await expect(page.getByTestId('result')).toHaveText('data: hello, error: ') await expect(page.getByTestId('result')).toHaveText( 'data: hello, error: error' ) }) test('skips revalidation when data is cached and revalidateIfStale is false', async ({ page }) => { await page.goto('./render-suspense-no-revalidate', { waitUntil: 'commit' }) const data = page.getByTestId('data') await expect(data).toHaveText('data: cached') await page.waitForTimeout(200) await expect(data).toHaveText('data: cached') }) test('pauses while key changes and resumes with new data', async ({ page }) => { await page.goto('./render-suspense-key-change', { waitUntil: 'commit' }) const fallback = page.getByTestId('fallback') const data = page.getByTestId('data') await expect(fallback).toBeVisible() await expect(data).toHaveText('data: render-suspense-key-change-initial') await page.getByTestId('toggle').click() await expect(fallback).toBeVisible() await expect(data).toHaveText('data: render-suspense-key-change-updated') }) test('renders correctly when key changes with identical data', async ({ page }) => { await page.goto('./render-suspense-same-data', { waitUntil: 'commit' }) const fallback = page.getByTestId('fallback') const data = page.getByTestId('data') await expect(fallback).toBeVisible() await expect(data).toHaveText('data: 123,1') await page.getByTestId('increment').click() await expect(fallback).toBeVisible() await expect(data).toHaveText('data: 123,2') }) test('renders initial data when provided', async ({ page }) => { await page.goto('./render-suspense-initial-data', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toHaveCount(0) await expect(page.getByTestId('data')).toHaveText('hello, Initial') await page.waitForTimeout(200) await expect(page.getByTestId('data')).toHaveText('hello, SWR') }) test('avoids unnecessary re-renders', async ({ page }) => { await page.goto('./render-suspense-avoid-rerender', { waitUntil: 'commit' }) await expect(page.getByTestId('fallback')).toBeVisible() await expect(page.getByTestId('start-count')).toHaveText('start renders: 1') await page.waitForTimeout(200) await expect(page.getByTestId('fallback')).toHaveCount(0) await expect(page.getByTestId('data-count')).toHaveText('data renders: 1') await expect(page.getByTestId('start-count')).toHaveText('start renders: 1') }) test('renders fallback only once when keepPreviousData is true', async ({ page }) => { await page.goto('./render-suspense-keep-previous', { waitUntil: 'commit' }) const fallback = page.getByTestId('fallback') const data = page.getByTestId('data') await expect(fallback).toBeVisible() await expect(data).toHaveText('data:origin') await expect(fallback).toHaveCount(0) await page.getByTestId('set-next').click() await expect(fallback).toHaveCount(0) await expect(data).toHaveText('data:origin') await expect(data).toHaveText('data:next') await expect(fallback).toHaveCount(0) }) test('updates fetcher reference with suspense', async ({ page }) => { await page.goto('./render-suspense-fetcher', { waitUntil: 'commit' }) const fallback = page.getByTestId('fallback') await expect(fallback).toBeVisible() await page.waitForTimeout(100) await expect(page.getByTestId('data')).toHaveText('data:foo') await page.getByTestId('set-bar').click() await expect(fallback).toBeVisible() await expect(page.getByTestId('data')).toHaveText('data:bar') }) test('preloads infinite data for suspense', async ({ page }) => { await page.goto('./render-suspense-infinite-preload', { waitUntil: 'commit' }) await expect(page.getByTestId('data')).toHaveText( 'render-suspense-infinite-preload-0-value' ) await expect(page.getByTestId('fetch-count')).toHaveText('fetches: 1') await expect(page.getByTestId('fallback-count')).toHaveText( 'fallback renders: 1' ) await expect(page.getByTestId('fallback')).toHaveCount(0) }) test('renders correctly when key changes from null to valid', async ({ page }) => { await page.goto('./render-suspense-null-key', { waitUntil: 'commit' }) const data = page.getByTestId('data') await expect(data).toHaveText('render-suspense-null-key-123') await page.getByTestId('set-empty').click() await expect(data).toHaveText('render-suspense-null-key-nodata') await page.getByTestId('set-456').click() await expect(data).toHaveText('render-suspense-null-key-456') }) test('handles undefined key toggling', async ({ page }) => { await page.goto('./suspense-undefined-key', { waitUntil: 'commit' }) await expect(page.getByText('empty')).toBeVisible() await page.getByRole('button', { name: 'toggle' }).click() await expect(page.getByText('fallback')).toBeVisible() await expect(page.getByText('SWR')).toBeVisible() }) }) ================================================ FILE: e2e/test/suspense-undefined-key.test.ts ================================================ import { test, expect } from '@playwright/test' test.describe('suspense with undefined key', () => { test('should render correctly when key is undefined', async ({ page }) => { await page.goto('./suspense-undefined-key', { waitUntil: 'commit' }) // Should show content for undefined key (not suspense) await expect(page.getByText('empty')).toBeVisible() // Click toggle to enable key await page.getByRole('button', { name: 'toggle' }).click() // Should show loading fallback when key becomes defined await expect(page.getByText('fallback')).toBeVisible() // Should eventually show the fetched data await expect(page.getByText('SWR')).toBeVisible() }) }) ================================================ FILE: e2e/test/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "include": [ ".", ], } ================================================ FILE: eslint.config.mjs ================================================ import { defineConfig, globalIgnores } from 'eslint/config' import typescriptEslint from '@typescript-eslint/eslint-plugin' import reactHooks from 'eslint-plugin-react-hooks' import globals from 'globals' import tsParser from '@typescript-eslint/parser' import path from 'node:path' import { fileURLToPath } from 'node:url' import js from '@eslint/js' import { FlatCompat } from '@eslint/eslintrc' const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) const compat = new FlatCompat({ baseDirectory: __dirname, recommendedConfig: js.configs.recommended, allConfig: js.configs.all }) export default defineConfig([ globalIgnores([ '**/dist/', '**/node_modules', '**/scripts', '**/examples', '**/.next', '**/next.config.js', 'eslint.config.mjs', 'playwright.config.js', 'jest.config.js', 'jest.config.build.js', 'test-result/**', 'playwright-report/**' ]), { extends: compat.extends( 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:jest-dom/recommended', 'plugin:testing-library/react', 'plugin:react/jsx-runtime' ), plugins: { '@typescript-eslint': typescriptEslint, 'react-hooks': reactHooks }, languageOptions: { globals: { ...globals.browser, ...globals.node, ...globals.jest }, parser: tsParser, ecmaVersion: 8, sourceType: 'module', parserOptions: { ecmaFeatures: { impliedStrict: true, experimentalObjectRestSpread: true }, allowImportExportEverywhere: true, project: ['**/tsconfig.json'] } }, settings: { react: { version: 'detect' } }, rules: { 'func-names': [2, 'as-needed'], 'no-shadow': 0, '@typescript-eslint/no-shadow': 2, '@typescript-eslint/explicit-function-return-type': 0, '@typescript-eslint/no-unused-vars': [ 0, { argsIgnorePattern: '^_' } ], '@typescript-eslint/no-use-before-define': 0, '@typescript-eslint/ban-ts-ignore': 0, '@typescript-eslint/no-empty-function': 0, '@typescript-eslint/ban-ts-comment': 0, '@typescript-eslint/no-var-requires': 0, '@typescript-eslint/no-explicit-any': 0, '@typescript-eslint/explicit-module-boundary-types': 0, '@typescript-eslint/consistent-type-imports': [ 2, { prefer: 'type-imports' } ], '@typescript-eslint/ban-types': 0, 'react-hooks/rules-of-hooks': 2, 'react-hooks/exhaustive-deps': 1, 'react/prop-types': 0, 'testing-library/no-unnecessary-act': 0 } }, { files: ['e2e/**/*.ts'], rules: { 'testing-library/prefer-screen-queries': 'off' } } ]) ================================================ FILE: examples/.eslintrc ================================================ // next is loading eslintrc from the root directory, adding this to avoid eslint rules being overridden {} ================================================ FILE: examples/api-hooks/README.md ================================================ # API Hooks ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/api-hooks) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/api-hooks cd api-hooks ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how you could create custom hooks, using SWR internally, for your different data requirements and use them in your application. ================================================ FILE: examples/api-hooks/hooks/use-projects.js ================================================ import useSWR from 'swr' import fetch from '../libs/fetch' export default function useProjects() { return useSWR('/api/data', fetch) } ================================================ FILE: examples/api-hooks/hooks/use-repository.js ================================================ import useSWR from 'swr' import fetch from '../libs/fetch' export default function useRepository(id) { return useSWR('/api/data?id=' + id, fetch) } ================================================ FILE: examples/api-hooks/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/api-hooks/package.json ================================================ { "name": "api-hooks", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/api-hooks/pages/[user]/[repo].js ================================================ import Link from 'next/link' import useRepository from '../../hooks/use-repository' export default function Repo() { const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : '' const { data } = useRepository(id) return (

{id}

{ data ?

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

: 'loading...' }

Back
) } ================================================ FILE: examples/api-hooks/pages/api/data.js ================================================ const projects = [ 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js' ] export default (req, res) => { if (req.query.id) { // a slow endpoint for getting repo data fetch(`https://api.github.com/repos/${req.query.id}`) .then(resp => resp.json()) .then(data => { setTimeout(() => { res.json(data) }, 2000) }) return } setTimeout(() => { res.json(projects) }, 2000) } ================================================ FILE: examples/api-hooks/pages/index.js ================================================ import Link from 'next/link' import useProjects from '../hooks/use-projects' export default function Index() { const { data } = useProjects() return (

Trending Projects

{ data ? data.map(project =>

{project}

) : 'loading...' }
) } ================================================ FILE: examples/autocomplete-suggestions/README.md ================================================ # Autocomplete Suggestions ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/autocomplete-suggestions) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/autocomplete-suggestions cd autocomplete-suggestions ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how to use SWR to fetch the suggestion for an autocomplete. ================================================ FILE: examples/autocomplete-suggestions/libs/fetcher.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/autocomplete-suggestions/package.json ================================================ { "name": "autocomplete-suggestions", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "@reach/combobox": "0.16.1", "lodash.debounce": "4.0.8", "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/autocomplete-suggestions/pages/api/suggestions.js ================================================ const countries = [ "United States", "Canada", "United Kingdom", "Argentina", "Australia", "Austria", "Belgium", "Brazil", "Chile", "China", "Colombia", "Croatia", "Denmark", "Dominican Republic", "Egypt", "Finland", "France", "Germany", "Greece", "Hong Kong", "India", "Indonesia", "Ireland", "Israel", "Italy", "Japan", "Jordan", "Kuwait", "Lebanon", "Malaysia", "Mexico", "Netherlands", "New Zealand", "Nigeria", "Norway", "Pakistan", "Panama", "Peru", "Philippines", "Poland", "Russia", "Saudi Arabia", "Serbia", "Singapore", "South Africa", "South Korea", "Spain", "Sweden", "Switzerland", "Taiwan", "Thailand", "Turkey", "United Arab Emirates", "Venezuela", "Portugal", "Luxembourg", "Bulgaria", "Czech Republic", "Slovenia", "Iceland", "Slovakia", "Lithuania", "Trinidad and Tobago", "Bangladesh", "Sri Lanka", "Kenya", "Hungary", "Morocco", "Cyprus", "Jamaica", "Ecuador", "Romania", "Bolivia", "Guatemala", "Costa Rica", "Qatar", "El Salvador", "Honduras", "Nicaragua", "Paraguay", "Uruguay", "Puerto Rico", "Bosnia and Herzegovina", "Palestinian Authority", "Tunisia", "Bahrain", "Vietnam", "Ghana", "Mauritius", "Ukraine", "Malta", "Bahamas", "Maldives", "Oman", "Macedonia", "Latvia", "Estonia", "Iraq", "Algeria", "Albania", "Nepal", "Macau", "Montenegro", "Senegal", "Georgia", "Brunei", "Uganda", "Guadeloupe", "Barbados", "Azerbaijan", "Tanzania", "Libya", "Martinique", "Cameroon", "Botswana", "Ethiopia", "Kazakhstan", "Namibia", "Netherlands Antilles", "Madagascar", "New Caledonia", "Moldova", "Fiji", "Belarus", "Jersey", "Guam", "Yemen", "Zambia", "Isle Of Man", "Haiti", "Cambodia", "Aruba", "French Polynesia", "Afghanistan", "Bermuda", "Guyana", "Armenia", "Malawi", "Antigua and Barbuda", "Rwanda", "Guernsey", "Gambia", "Faroe Islands", "St. Lucia", "Cayman Islands", "Benin", "Andorra", "Grenada", "US Virgin Islands", "Belize", "Saint Vincent and the Grenadines", "Mongolia", "Mozambique", "Mali", "Angola", "French Guiana", "Uzbekistan", "Djibouti", "Burkina Faso", "Monaco", "Togo", "Greenland", "Gabon", "Gibraltar", "Republic of the Congo", "Kyrgyzstan", "Papua New Guinea", "Bhutan", "Saint Kitts and Nevis", "Swaziland", "Lesotho", "Laos", "Liechtenstein", "Northern Mariana Islands", "Suriname", "Seychelles", "British Virgin Islands", "Turks and Caicos Islands", "Dominica", "Mauritania", "Aland Islands", "San Marino", "Sierra Leone", "Niger", "Democratic Republic of the Congo", "Anguilla", "Mayotte", "Cape Verde", "Guinea", "Turkmenistan", "Burundi", "Tajikistan", "Vanuatu", "Solomon Islands", "Eritrea", "Samoa", "American Samoa", "Falkland Islands", "Equatorial Guinea", "Tonga", "Comoros", "Palau", "Federated States of Micronesia", "Central African Republic", "Somalia", "Marshall Islands", "Vatican City", "Chad", "Kiribati", "Sao Tome and Principe", "Tuvalu", "Nauru", "Réunion", "Cuba", "Cote d'Ivoire", "Timor Leste", "North Korea", "Iran", "Liberia", "Myanmar", "Oman", "Saint Lucia", "Syria", "Sudan" ] export default function suggestions(req, res) { const results = countries .filter(country => country.toLowerCase().startsWith(req.query.value)) res.json(results); } ================================================ FILE: examples/autocomplete-suggestions/pages/index.js ================================================ import { useMemo, useState } from "react" import fetcher from '../libs/fetcher' import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from '@reach/combobox' import debounce from 'lodash.debounce' import useSWR from 'swr' export default function Index() { const [searchTerm, setSearchTerm] = useState(null) const { data: countries = [], isValidating } = useSWR( () => (searchTerm ? `/api/suggestions?value=${searchTerm}` : null), fetcher ) function handleChange(event) { setSearchTerm(event.target.value) } const debouncedHandleChange = useMemo( () => debounce(handleChange, 500) , []); return (

Country Search

{countries && countries.length > 0 && ( {countries.map(country => ( ))} )}
) } ================================================ FILE: examples/axios/README.md ================================================ # Axios ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/axios) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/axios cd axios ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show a basic usage of SWR fetching using axios and a request object. ================================================ FILE: examples/axios/libs/useRequest.js ================================================ import useSWR from 'swr' import axios from 'axios' export default function useRequest(request, { fallbackData, ...config } = {}) { return useSWR( request, () => axios(request || {}).then(response => response.data), { ...config, fallbackData: fallbackData && { status: 200, statusText: 'InitialData', headers: {}, data: fallbackData } } ) } ================================================ FILE: examples/axios/package.json ================================================ { "name": "basic", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "axios": "0.27.2", "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/axios/pages/[user]/[repo].js ================================================ import Link from 'next/link' import useRequest from '../../libs/useRequest' export default function Repo() { const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : '' const { data } = useRequest( id ? { url: '/api/data', params: { id } } : null ) return (

{id}

{data ? (

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

) : ( 'loading...' )}

Back
) } ================================================ FILE: examples/axios/pages/api/data.js ================================================ import axios from 'axios' const projects = [ 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js' ] export default function api(req, res) { if (req.query.id) { // a slow endpoint for getting repo data axios(`https://api.github.com/repos/${req.query.id}`) .then(resp => resp.data) .then(data => { setTimeout(() => { res.json(data) }, 2000) }) return } setTimeout(() => { res.json(projects) }, 2000) } ================================================ FILE: examples/axios/pages/index.js ================================================ import Link from 'next/link' import useRequest from '../libs/useRequest' export default function Index() { const { data } = useRequest({ url: '/api/data' }) return (

Trending Projects

{data ? data.map(project => (

{project}

)) : 'loading...'}
) } ================================================ FILE: examples/axios-typescript/README.md ================================================ # Axios TypeScript ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/axios-typescript) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/axios-typescript cd axios-typescript ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how to use the basic axios along with TypeScript to type both the request object and the data received from SWR. ================================================ FILE: examples/axios-typescript/libs/useRequest.ts ================================================ import useSWR, { SWRConfiguration, SWRResponse } from 'swr' import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios' export type GetRequest = AxiosRequestConfig | null interface Return extends Pick< SWRResponse, AxiosError>, 'isValidating' | 'error' | 'mutate' > { data: Data | undefined response: AxiosResponse | undefined } export interface Config extends Omit< SWRConfiguration, AxiosError>, 'fallbackData' > { fallbackData?: Data } export default function useRequest( request: GetRequest, { fallbackData, ...config }: Config = {} ): Return { const { data: response, error, isValidating, mutate } = useSWR, AxiosError>( request, /** * NOTE: Typescript thinks `request` can be `null` here, but the fetcher * function is actually only called by `useSWR` when it isn't. */ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion () => axios.request(request!), { ...config, fallbackData: fallbackData && { status: 200, statusText: 'InitialData', // eslint-disable-next-line @typescript-eslint/no-non-null-assertion config: request!, headers: {}, data: fallbackData } as AxiosResponse } ) return { data: response && response.data, response, error, isValidating, mutate } } ================================================ FILE: examples/axios-typescript/next-env.d.ts ================================================ /// /// /// // NOTE: This file should not be edited // see https://nextjs.org/docs/basic-features/typescript for more information. ================================================ FILE: examples/axios-typescript/package.json ================================================ { "name": "basic-typescript", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "axios": "0.23.0", "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" }, "devDependencies": { "@types/node": "16.7.2", "@types/react": "17.0.19", "typescript": "4.3.5" } } ================================================ FILE: examples/axios-typescript/pages/[user]/[repo].tsx ================================================ import Link from 'next/link' import useRequest from '../../libs/useRequest' export default function Repo() { const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : '' const { data } = useRequest<{ forks_count: number stargazers_count: number watchers: number }>({ url: '/api/data', params: { id } }) return (

{id}

{data ? (

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

) : ( 'loading...' )}

Back
) } ================================================ FILE: examples/axios-typescript/pages/api/data.ts ================================================ import { NextApiRequest, NextApiResponse } from 'next' import axios from 'axios' const projects = [ 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js' ] export default function api(req: NextApiRequest, res: NextApiResponse) { if (req.query.id) { // a slow endpoint for getting repo data axios(`https://api.github.com/repos/${req.query.id}`) .then(response => response.data) .then(data => { setTimeout(() => { res.json(data) }, 2000) }) return } setTimeout(() => { res.json(projects) }, 2000) } ================================================ FILE: examples/axios-typescript/pages/index.tsx ================================================ import Link from 'next/link' import useRequest from '../libs/useRequest' export default function Index() { const { data } = useRequest({ url: '/api/data' }) return (

Trending Projects

{data ? data.map(project => (

{project}

)) : 'loading...'}
) } ================================================ FILE: examples/axios-typescript/tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "exclude": [ "node_modules" ], "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ] } ================================================ FILE: examples/basic/README.md ================================================ # Basic ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/basic) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/basic cd basic ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show a basic usage of SWR fetching data from an API in two different pages. ================================================ FILE: examples/basic/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/basic/package.json ================================================ { "name": "basic", "private": true, "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/basic/pages/[user]/[repo].js ================================================ import Link from 'next/link' import fetch from '../../libs/fetch' import useSWR from 'swr' export default function Repo() { const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : '' const { data } = useSWR('/api/data?id=' + id, fetch) return (

{id}

{ data ?

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

: 'loading...' }

Back
) } ================================================ FILE: examples/basic/pages/api/data.js ================================================ const projects = [ 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js' ] export default function api(req, res) { if (req.query.id) { // a slow endpoint for getting repo data fetch(`https://api.github.com/repos/${req.query.id}`) .then(resp => resp.json()) .then(data => { setTimeout(() => { res.json(data) }, 2000) }) return } setTimeout(() => { res.json(projects) }, 2000) } ================================================ FILE: examples/basic/pages/index.js ================================================ import Link from 'next/link' import fetch from '../libs/fetch' import useSWR from 'swr' export default function Index() { const { data } = useSWR('/api/data', fetch) return (

Trending Projects

{ data ? data.map(project =>

{project}

) : 'loading...' }
) } ================================================ FILE: examples/basic-typescript/README.md ================================================ # Basic TypeScript ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/basic-typescript) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/basic-typescript cd basic-typescript ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how to use the basic example along with TypeScript to type the data received from SWR. ================================================ FILE: examples/basic-typescript/libs/fetch.ts ================================================ export default async function fetcher( input: RequestInfo, init?: RequestInit ): Promise { const res = await fetch(input, init) return res.json() } ================================================ FILE: examples/basic-typescript/next-env.d.ts ================================================ /// /// /// // NOTE: This file should not be edited // see https://nextjs.org/docs/basic-features/typescript for more information. ================================================ FILE: examples/basic-typescript/package.json ================================================ { "name": "basic-typescript", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" }, "devDependencies": { "@types/node": "16.7.2", "@types/react": "17.0.19", "typescript": "4.3.5" } } ================================================ FILE: examples/basic-typescript/pages/[user]/[repo].tsx ================================================ import Link from 'next/link' import fetch from '../../libs/fetch' import useSWR from 'swr' export default function Repo() { const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : '' const { data } = useSWR<{ forks_count: number stargazers_count: number watchers: number }>('/api/data?id=' + id, fetch) return (

{id}

{data ? (

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

) : ( 'loading...' )}

Back
) } ================================================ FILE: examples/basic-typescript/pages/api/data.ts ================================================ import { NextApiRequest, NextApiResponse } from 'next' const projects = [ 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js' ] export default function api(req: NextApiRequest, res: NextApiResponse) { if (req.query.id) { // a slow endpoint for getting repo data fetch(`https://api.github.com/repos/${req.query.id}`) .then(resp => resp.json()) .then(data => { setTimeout(() => { res.json(data) }, 2000) }) return } setTimeout(() => { res.json(projects) }, 2000) } ================================================ FILE: examples/basic-typescript/pages/index.tsx ================================================ import Link from 'next/link' import fetch from '../libs/fetch' import useSWR from 'swr' export default function HomePage() { const { data } = useSWR('/api/data', fetch) const { data: data2 } = useSWR(null, fetch) return (

Trending Projects

{data2}
{data ? data.map(project => (

{project}

)) : 'loading...'}
) } ================================================ FILE: examples/basic-typescript/tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "exclude": [ "node_modules" ], "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ] } ================================================ FILE: examples/focus-revalidate/README.md ================================================ # Focus Revalidate ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/focus-revalidate) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/focus-revalidate cd focus-revalidate ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Basic authentication example showing how the revalidate on focus feature works and to trigger a revalidation on a per-hook call basis. ================================================ FILE: examples/focus-revalidate/components/button.js ================================================ export default function Button({ children, ...props }) { return
} ================================================ FILE: examples/focus-revalidate/libs/auth.js ================================================ // mock login and logout export function login() { document.cookie = 'swr-test-token=swr;' } export function logout() { document.cookie = 'swr-test-token=; expires=Thu, 01 Jan 1970 00:00:01 GMT;' } ================================================ FILE: examples/focus-revalidate/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/focus-revalidate/package.json ================================================ { "name": "focus-revalidate", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/focus-revalidate/pages/api/user.js ================================================ // an endpoint for getting user info export default function user(req, res) { if (req.cookies['swr-test-token'] === 'swr') { // authorized res.json({ loggedIn: true, name: 'Shu', avatar: 'https://github.com/shuding.png' }) return } res.json({ loggedIn: false }) } ================================================ FILE: examples/focus-revalidate/pages/index.js ================================================ import Button from '../components/button' import fetch from '../libs/fetch' import { login, logout } from '../libs/auth' import useSWR from 'swr' export default function Index() { const { data, mutate } = useSWR('/api/user', fetch) if (!data) return

loading...

if (data.loggedIn) { return

Welcome, {data.name}

} else { return

Please login

} } ================================================ FILE: examples/global-fetcher/README.md ================================================ # Global Fetcher ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/global-fetcher) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/global-fetcher cd global-fetcher ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Use the `SWRConfig` provider to set up the fetcher globally instead of a per-hook call. ================================================ FILE: examples/global-fetcher/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/global-fetcher/package.json ================================================ { "name": "global-fetcher", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/global-fetcher/pages/[user]/[repo].js ================================================ import Link from 'next/link' import useSWR from 'swr' export default function Repo() { const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : '' const { data } = useSWR('/api/data?id=' + id) return (

{id}

{ data ?

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

: 'loading...' }

Back
) } ================================================ FILE: examples/global-fetcher/pages/_app.js ================================================ import React from 'react' import App from 'next/app' import { SWRConfig } from 'swr' import fetch from '../libs/fetch.js'; export default class MyApp extends App { render() { const { Component, pageProps } = this.props return } } ================================================ FILE: examples/global-fetcher/pages/api/data.js ================================================ const projects = [ 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js' ] export default function api(req, res) { if (req.query.id) { // a slow endpoint for getting repo data fetch(`https://api.github.com/repos/${req.query.id}`) .then(resp => resp.json()) .then(data => { setTimeout(() => { res.json(data) }, 2000) }) return } setTimeout(() => { res.json(projects) }, 2000) } ================================================ FILE: examples/global-fetcher/pages/index.js ================================================ import Link from 'next/link' import useSWR from 'swr' export default function Index() { const { data } = useSWR('/api/data') return (

Trending Projects

{data ? data.map(project => (

{project}

)) : 'loading...'}
) } ================================================ FILE: examples/infinite/README.md ================================================ # useSWRInfinite ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/infinite) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/infinite cd basic ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show usage of useSWRInfinite with load more data button ================================================ FILE: examples/infinite/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/infinite/package.json ================================================ { "name": "infinite", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/infinite/pages/index.js ================================================ import { useState } from 'react' import useSWRInfinite from 'swr/infinite' import fetch from '../libs/fetch' const PAGE_SIZE = 6 export default function App() { const [repo, setRepo] = useState('reactjs/react-a11y') const [val, setVal] = useState(repo) const { data, error, mutate, size, setSize, isValidating } = useSWRInfinite( (index) => `https://api.github.com/repos/${repo}/issues?per_page=${PAGE_SIZE}&page=${ index + 1 }`, fetch ) const issues = data ? [].concat(...data) : [] const isLoadingInitialData = !data && !error const isLoadingMore = isLoadingInitialData || (size > 0 && data && typeof data[size - 1] === 'undefined') const isEmpty = data?.[0]?.length === 0 const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < PAGE_SIZE) const isRefreshing = isValidating && data && data.length === size return (
setVal(e.target.value)} placeholder="reactjs/react-a11y" />

showing {size} page(s) of {isLoadingMore ? '...' : issues.length}{' '} issue(s){' '}

{isEmpty ?

Yay, no issues found.

: null} {issues.map((issue) => { return (

- {issue.title}

) })}
) } ================================================ FILE: examples/infinite-scroll/README.md ================================================ # useSWRInfinite with scroll based on IntersectionObserver ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/infinite-scroll) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/infinite-scroll cd infinite-scroll ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show usage of useSWRInfinite with infinite scroll based on IntersectionObserver ================================================ FILE: examples/infinite-scroll/hooks/useOnScreen.js ================================================ import { useState, useEffect } from 'react' export default function useOnScreen(ref) { const [isIntersecting, setIntersecting] = useState(false) useEffect(() => { if (!ref.current) return const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting) ) observer.observe(ref.current) // Remove the observer as soon as the component is unmounted return () => { observer.disconnect() } }, []) return isIntersecting } ================================================ FILE: examples/infinite-scroll/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/infinite-scroll/package.json ================================================ { "name": "infinite-scroll", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/infinite-scroll/pages/index.js ================================================ import useSWRInfinite from 'swr/infinite' import { useState, useRef, useEffect } from 'react' import fetcher from '../libs/fetch' import useOnScreen from '../hooks/useOnScreen' const PAGE_SIZE = 6 const getKey = (pageIndex, previousPageData, repo, pageSize) => { if (previousPageData && !previousPageData.length) return null // reached the end return `https://api.github.com/repos/${repo}/issues?per_page=${pageSize}&page=${ pageIndex + 1 }` } export default function App() { const ref = useRef() const [repo, setRepo] = useState('facebook/react') const [val, setVal] = useState(repo) const isVisible = useOnScreen(ref) const { data, error, mutate, size, setSize, isValidating } = useSWRInfinite( (...args) => getKey(...args, repo, PAGE_SIZE), fetcher ) const issues = data ? [].concat(...data) : [] const isLoadingInitialData = !data && !error const isLoadingMore = isLoadingInitialData || (size > 0 && data && typeof data[size - 1] === 'undefined') const isEmpty = data?.[0]?.length === 0 const isReachingEnd = size === PAGE_SIZE const isRefreshing = isValidating && data && data.length === size useEffect(() => { if (isVisible && !isReachingEnd && !isRefreshing) { setSize(size + 1) } }, [isVisible, isRefreshing]) return (
setVal(e.target.value)} placeholder="facebook/react" />

showing {size} page(s) of {isLoadingMore ? '...' : issues.length}{' '} issue(s){' '}

{isEmpty ?

Yay, no issues found.

: null} {issues.map((issue) => { return (

- {issue.title}

) })}
{isLoadingMore ? 'loading...' : isReachingEnd ? 'no more issues' : ''}
) } ================================================ FILE: examples/local-state-sharing/README.md ================================================ # Basic ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/local-state-sharing) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/local-state-sharing cd local-state-sharing ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how to share local state between React components using SWR. ================================================ FILE: examples/local-state-sharing/libs/store.js ================================================ const initialStore = { name: "john" }; export default initialStore; ================================================ FILE: examples/local-state-sharing/package.json ================================================ { "name": "local-state-sharing", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "react": "latest", "react-dom": "latest", "next": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/local-state-sharing/pages/index.js ================================================ import { useState } from "react" import initialStore from "../libs/store" import useSWR, { mutate } from "swr" function Profile() { const { data } = useSWR("globalState", { fallbackData: initialStore }) const [value, updateValue] = useState((data || {}).name) if (!data) { return null } return (

My name is {data.name}.

updateValue(e.target.value)} style={{ width: 200, marginRight: 8 }} />
) } function Other() { const { data } = useSWR("globalState", { fallbackData: initialStore }) if (!data) { return null } return (

Another Component:
My name is {data.name}.

) } export default function Index() { return (
useSWR can share state between components:
) } ================================================ FILE: examples/optimistic-ui/README.md ================================================ # Optimistic UI ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/optimistic-ui) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/optimistic-ui cd optimistic-ui ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Example 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. ================================================ FILE: examples/optimistic-ui/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) if (!res.ok) throw new Error('Failed to fetch') return res.json() } ================================================ FILE: examples/optimistic-ui/package.json ================================================ { "name": "optimistic-ui", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/optimistic-ui/pages/_app.js ================================================ import '../styles.css' export default function App({ Component, pageProps }) { return } ================================================ FILE: examples/optimistic-ui/pages/api/todos.js ================================================ let todos = [] const delay = () => new Promise(res => setTimeout(() => res(), 1000)) async function getTodos() { await delay() return todos.sort((a, b) => (a.text < b.text ? -1 : 1)) } async function addTodo(todo) { await delay() // Sometimes it will fail, this will cause a regression on the UI if (Math.random() < 0.2 || !todo.text) throw new Error('Failed to add new item!') todo.text = todo.text.charAt(0).toUpperCase() + todo.text.slice(1) todos = [...todos, todo] return todo } export default async function api(req, res) { try { if (req.method === 'POST') { const body = JSON.parse(req.body) return res.json(await addTodo(body)) } return res.json(await getTodos()) } catch (err) { return res.status(500).json({ error: err.message }) } } ================================================ FILE: examples/optimistic-ui/pages/index.js ================================================ import useSWR from 'swr' import React, { useState } from 'react' import fetch from '../libs/fetch' export default function App() { const [text, setText] = useState('') const { data, mutate } = useSWR('/api/todos', fetch) const [state, setState] = useState( ) return (
{/* */}

Optimistic UI with SWR

This application optimistically updates the data, while revalidating in the background. The POST API auto capitializes the data, and only returns the new added one instead of the full list. And the{' '} GET API returns the full list in order.

ev.preventDefault()}> setText(e.target.value)} placeholder="Add your to-do here..." autoFocus />
{state}
    {data ? ( data.length ? ( data.map(todo => { return
  • {todo.text}
    • }) ) : ( No todos yet. Try adding lowercased "banana" and "apple" to the list. ) ) : ( Loading... )}
) } ================================================ FILE: examples/optimistic-ui/styles.css ================================================ html { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; text-align: center; } body { max-width: 600px; margin: auto; } h1 { margin-top: 1em; } .note { text-align: left; font-size: 0.9em; line-height: 1.5; color: #666; } .note svg { margin-right: 0.5em; vertical-align: -2px; width: 14px; height: 14px; margin-right: 5px; } form { display: flex; margin: 8px 0; gap: 8px; } input { flex: 1; } input, button { font-size: 16px; padding: 6px 5px; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1; background-color: #eee; padding: 1px 3px; border-radius: 2px; } ul { text-align: left; list-style: none; padding: 0; } li { margin: 8px 0; padding: 10px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 1px #ededed; } i { color: #999; } .info, .success, .error { display: block; text-align: left; padding: 6px 0; font-size: 0.9em; opacity: 0.9; } .info { color: #666; } .success { color: #4caf50; } .error { color: #f44336; } ================================================ FILE: examples/optimistic-ui-immer/README.md ================================================ # Optimistic UI with Immer ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/optimistic-ui-immer) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/optimistic-ui-immer cd optimistic-ui-immer ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Example 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. ================================================ FILE: examples/optimistic-ui-immer/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/optimistic-ui-immer/package.json ================================================ { "name": "optimistic-ui-immer", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "immer": "9.0.5", "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/optimistic-ui-immer/pages/api/data.js ================================================ const data = [] function shouldFail() { return Math.random() > 0.8 } export default function api(req, res) { if (req.method === 'POST') { const body = JSON.parse(req.body) // sometimes it will fail, and this will cause a regression in the UI if (!shouldFail()) { data.push(body.text); } res.json(data) return } setTimeout(() => { res.json(data) }, 2000) } ================================================ FILE: examples/optimistic-ui-immer/pages/index.js ================================================ import React from 'react' import fetch from '../libs/fetch' import useSWR, { mutate } from 'swr' import produce from "immer" export default function Index() { const [text, setText] = React.useState(''); const { data } = useSWR('/api/data', fetch) async function handleSubmit(event) { event.preventDefault() // Call mutate to optimistically update the UI. // We use Immer produce to allow us to perform an immutable change // while coding it as a normal mutation of the same object. mutate("/api/data", produce(draftData => { draftData.push(text) }), false) // Then we send the request to the API and let mutate // update the data with the API response. // Our action may fail in the API function, and the response differ // from what was optimistically updated, in that case, the UI will be // changed to match the API response. // The fetch could also fail, in that case, the UI will // be in an incorrect state until the next successful fetch. mutate('/api/data', await fetch('/api/data', { method: 'POST', body: JSON.stringify({ text }) })) setText('') } return
setText(event.target.value)} value={text} />
    {data ? data.map(datum =>
  • {datum}
    • ) : 'loading...'}
} ================================================ FILE: examples/prefetch-preload/README.md ================================================ # Prefetch & Preload ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/prefetch-preload) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/prefetch-preload cd prefetch-preload ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example This example shows multiple ways to prefetch data to be used by SWR later. - Use a `` to get the browser to load the data while rendering the HTML - If in a browser, run the fetch + mutate outside the component - After rendering use an effect in React to prefetch the next page's data - When the user moves the mouse over a link trigger a fetch + mutate for the next page In 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. ================================================ FILE: examples/prefetch-preload/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/prefetch-preload/package.json ================================================ { "name": "prefetch-preload", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/prefetch-preload/pages/[user]/[repo].js ================================================ import Head from "next/head" import Link from 'next/link' import React from 'react' import fetch from '../../libs/fetch' import useSWR, { mutate } from 'swr' function prefetchParent() { return fetch('/api/data') .then(projects => mutate('/api/data', projects, false)) } // if we are on the browser trigger a prefetch as soon as possible if (typeof window !== 'undefined') prefetchParent() export default function Repo() { const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : '' const { data } = useSWR('/api/data?id=' + id, fetch) React.useEffect(() => { prefetchParent() }, []) function handleMouseEnter() { prefetchParent() } return ( <> {/* This will tell the browser to preload the data for our page */} {id && }

{id}

{ data ?

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

: 'loading...' }

Back
) } ================================================ FILE: examples/prefetch-preload/pages/api/data.js ================================================ const projects = [ 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js' ] export default function api(req, res) { if (req.query.id) { // a slow endpoint for getting repo data fetch(`https://api.github.com/repos/${req.query.id}`) .then(resp => resp.json()) .then(data => { setTimeout(() => { res.json(data) }, 2000) }) return } setTimeout(() => { res.json(projects) }, 2000) } ================================================ FILE: examples/prefetch-preload/pages/index.js ================================================ import React from 'react' import Head from "next/head"; import Link from 'next/link' import fetch from '../libs/fetch' import useSWR, { mutate } from 'swr' function prefetchData() { return fetch('/api/data') .then(data => { mutate('/api/data', data, false) return data }) } function prefetchItem(project) { return fetch(`https://api.github.com/repos/${project}`).then(data => { mutate(`/api/data?id=${project}`, data, false) return data }) } function prefetchWithProjects() { return prefetchData() .then(projects => Promise.all(projects.map(prefetchItem))) } // if we are on the browser trigger a prefetch as soon as possible if (typeof window !== 'undefined') prefetchWithProjects() export default function Index() { const { data } = useSWR('/api/data', fetch) // This effect will fetch all projects after mounting React.useEffect(() => { if (!data) return if (data.length === 0) return data.forEach(prefetchItem) }, [data]); // With this handler, you could prefetch the data for a specific // project the moment the user moves the mouse over the link function handleMouseEnter(event) { // In our case, we could get the ID from the href so we use that prefetchItem(event.target.getAttribute("href").slice(1)) } return ( <> {/* This will tell the browser to preload the data for our page */}

Trending Projects

{ data ? data.map(project =>

{project}

) : 'loading...' }
) } ================================================ FILE: examples/refetch-interval/README.md ================================================ # Refetch Interval ## One-Click Deploy Deploy your own SWR project with Vercel Now. [![Deploy with Vercel Now](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/refetch-interval) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/refetch-interval cd refetch-interval ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how to make SWR fetch the API again in an interval automatically to ensure the data is up-to-date. ================================================ FILE: examples/refetch-interval/components/button.js ================================================ export default function Button({ children, ...props }) { return
} ================================================ FILE: examples/refetch-interval/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/refetch-interval/package.json ================================================ { "name": "refetch-interval", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/refetch-interval/pages/api/data.js ================================================ // an simple endpoint for getting current list let list = [] export default function api(req, res) { if (req.query.add) { list.push(req.query.add) } else if (req.query.clear) { list = [] } res.json(list) } ================================================ FILE: examples/refetch-interval/pages/index.js ================================================ import { useState } from 'react' import Button from '../components/button' import fetch from '../libs/fetch' import useSWR from 'swr' export default function Index() { const { data, mutate } = useSWR('/api/data', fetch, { // revalidate the data per second refreshInterval: 1000 }) const [value, setValue] = useState('') if (!data) return

loading...

return (

Refetch Interval (1s)

Todo List

{ ev.preventDefault() setValue('') await fetch(`/api/data?add=${value}`) mutate() }}> setValue(ev.target.value)} />
    {data.map(item =>
  • {item}
    • )}
) } ================================================ FILE: examples/server-render/README.md ================================================ # Server Render ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/server-render) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/server-render cd server-render ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example This example shows how to combine Next.js getServerSideProps with the SWR `fallbackData` option to support Server-Side Rendering. The 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. ================================================ FILE: examples/server-render/libs/fetcher.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/server-render/package.json ================================================ { "name": "server-render", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/server-render/pages/[pokemon].js ================================================ import Link from 'next/link' import fetcher from '../libs/fetcher' import useSWR from 'swr' const getURL = pokemon => `https://pokeapi.co/api/v2/pokemon/${pokemon}` export default function Pokemon({ pokemon, fallbackData }) { const { data } = useSWR(getURL(pokemon), fetcher, { fallbackData }) return (

{pokemon}

{data ? (

height: {data.height}

weight: {data.weight}

    {data.types.map(({ type }) => (
  • {type.name}
    • ))}
) : ( 'loading...' )}

Back
) } export async function getServerSideProps({ query }) { const data = await fetcher(getURL(query.pokemon)) return { props: { fallbackData: data, pokemon: query.pokemon } } } ================================================ FILE: examples/server-render/pages/index.js ================================================ import Link from 'next/link' import fetcher from '../libs/fetcher' import useSWR from 'swr' const URL = 'https://pokeapi.co/api/v2/pokemon/' export default function Home({ fallbackData }) { const { data } = useSWR(URL, fetcher, { fallbackData }) return (

Trending Projects

{data && data.results ? data.results.map(pokemon => (

{pokemon.name}

)) : 'loading...'}
) } export async function getServerSideProps() { const data = await fetcher(URL) return { props: { fallbackData: data } } } ================================================ FILE: examples/storage-tab-sync/README.md ================================================ # Storage Tab Sync ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/storage-tab-sync) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/storage-tab-sync cd storage-tab-sync ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how you could use SWR to synchronize localStorage values between tabs. ================================================ FILE: examples/storage-tab-sync/libs/storage.js ================================================ export default async function storage(key) { const value = localStorage.getItem(key) if (!value) return undefined return JSON.parse(value) } ================================================ FILE: examples/storage-tab-sync/package.json ================================================ { "name": "storage-tab-sync", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/storage-tab-sync/pages/index.js ================================================ import storage from '../libs/storage' import useSWR, { mutate } from 'swr' export default function Index() { const { data = { name: "" } } = useSWR('user-name', storage) function handleChange(event) { localStorage.setItem( 'user-name', JSON.stringify({ name: event.target.value }) ) mutate('user-name', { name: event.target.value }) } return
} ================================================ FILE: examples/subscription/README.md ================================================ # Subscription ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/subscription) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/subscription cd subscription ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how you could use SWR to subscribe async observable data into your app. ================================================ FILE: examples/subscription/package.json ================================================ { "name": "subscription", "private": true, "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/subscription/pages/index.js ================================================ import React from "react" import useSWRSubscription from "swr/subscription" import EventEmitter from "events" const event = new EventEmitter() // Simulating an external data source. let stopped = false async function start () { for (let i = 0; i < 100; i++) { await new Promise(res => setTimeout(res, 1000)) if (stopped) return if (i % 3 === 0 && i !== 0) { event.emit("error", new Error("error: " + i)); } else { event.emit("data", "state: " + i); } } } export default function page() { const { data, error } = useSWRSubscription('my-sub', (key, { next }) => { event.on("data", (value) => next(undefined, value)); event.on("error", (err) => next(err)); start(); return () => { stopped = true; }; }) return (

SWR Subscription

Received every second, error when data is times of 3

{data}
{error ? error.message : ""}
) } ================================================ FILE: examples/suspense/README.md ================================================ # Basic ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/suspense) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/suspense cd suspense ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how to use the SWR suspense option with React suspense. ================================================ FILE: examples/suspense/app/layout.jsx ================================================ export default function RootLayout({ children }) { return ( {children} ) } ================================================ FILE: examples/suspense/app/rsc/[user]/[repo]/error.jsx ================================================ 'use client' export default function ErrorPage() { return
Error happen
; } ================================================ FILE: examples/suspense/app/rsc/[user]/[repo]/loading.jsx ================================================ export default function Loading() { return
Loading...
; } ================================================ FILE: examples/suspense/app/rsc/[user]/[repo]/page.jsx ================================================ import Repo from './repo' import fetcher from '../../../../libs/fetch' import Link from 'next/link' import { Suspense } from 'react' const Page = ({ params }) => { const { user, repo } = params const id = `${user}/${repo}` const serverData = fetcher('http://localhost:3000/api/data?id=' + id) return (
Repo: {id}
Loading stats
}>

Back ) } export default Page ================================================ FILE: examples/suspense/app/rsc/[user]/[repo]/repo.jsx ================================================ 'use client' import fetcher from '../../../../libs/fetch' import useSWR from 'swr' const Repo = ({ id, serverData }) => { const { data } = useSWR('/api/data?id=' + id, fetcher, { suspense: true, fallbackData: serverData }) return ( <> {data ? (

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

) : null} ) } export default Repo ================================================ FILE: examples/suspense/app/rsc/loading.jsx ================================================ export default function Loading() { return
Loading...
; } ================================================ FILE: examples/suspense/app/rsc/page.jsx ================================================ import fetcher from '../../libs/fetch' import Repos from './repos' const Page = () => { const serverData = fetcher('http://localhost:3000/api/data') return } export default Page ================================================ FILE: examples/suspense/app/rsc/repos.jsx ================================================ 'use client' import useSWR from 'swr' import fetcher from '../../libs/fetch' import Link from 'next/link' const Repos = ({ serverData }) => { const { data } = useSWR('/api/data', fetcher, { suspense: true, fallbackData: serverData }) return ( <> {data.map(project => (

{project}

))} ) } export default Repos ================================================ FILE: examples/suspense/components/error-handling.js ================================================ import React from 'react' export default class ErrorBoundary extends React.Component { state = { hasError: false, error: null } static getDerivedStateFromError(error) { return { hasError: true, error } } render() { if (this.state.hasError) { return this.props.fallback } return this.props.children } } ================================================ FILE: examples/suspense/libs/fetch.js ================================================ export default async function fetcher(...args) { const res = await fetch(...args) return res.json() } ================================================ FILE: examples/suspense/next-env.d.ts ================================================ /// /// /// // NOTE: This file should not be edited // see https://nextjs.org/docs/basic-features/typescript for more information. ================================================ FILE: examples/suspense/package.json ================================================ { "name": "suspense", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/suspense/pages/[user]/[repo].js ================================================ import { Suspense } from 'react' import Link from 'next/link' import fetcher from '../../libs/fetch' import ErrorHandling from '../../components/error-handling' import useSWR from 'swr' const Detail = ({ id, serverData }) => { const { data } = useSWR('/api/data?id=' + id, fetcher, { suspense: true, fallbackData: serverData }) return ( <> {data ? (

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

) : null} ) } export default function Repo({ id, serverData }) { return (

{id}

loading...
}> oooops!}>

Back ) } export const getServerSideProps = async ({ params }) => { const { user, repo } = params const id = `${user}/${repo}` const data = await fetcher('http://localhost:3000/api/data?id=' + id).catch(() => {}) return { props: { serverData: data, id } } } ================================================ FILE: examples/suspense/pages/api/data.js ================================================ const projects = [ 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js', 'emperor/clothes' ] export default function api(req, res) { if (req.query.id) { if (req.query.id === projects[4]) { setTimeout(() => { res.json({ msg: 'not found' }) }) } else { // a slow endpoint for getting repo data fetch(`https://api.github.com/repos/${req.query.id}`) .then(res => res.json()) .then(data => { setTimeout(() => { res.json(data) }, 2000) }) } } else { setTimeout(() => { res.json(projects) }, 2000) } } ================================================ FILE: examples/suspense/pages/index.js ================================================ import { Suspense } from 'react' import Link from 'next/link' import fetcher from '../libs/fetch' import useSWR from 'swr' const Repos = ({ serverData }) => { const { data } = useSWR('/api/data', fetcher, { suspense: true, fallbackData: serverData }) return ( <> {data.map(project => (

{project}

))} ) } export default function Index({ serverData }) { return (

Trending Projects

loading...
}> ) } export const getServerSideProps = async () => { const data = await fetcher('http://localhost:3000/api/data') return { props: { serverData: data } } } ================================================ FILE: examples/suspense-global/README.md ================================================ # Basic ## One-Click Deploy Deploy your own SWR project with Vercel. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/suspense) ## How to Use Download the example: ```bash curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/suspense cd suspense ``` Install it and run: ```bash yarn yarn dev # or npm install npm run dev ``` ## The Idea behind the Example Show how to use the SWR suspense option with React suspense. ================================================ FILE: examples/suspense-global/components/error-handling.ts ================================================ import React from 'react' export default class ErrorBoundary extends React.Component { state = { hasError: false, error: null } static getDerivedStateFromError(error: any) { return { hasError: true, error } } render() { if (this.state.hasError) { return this.props.fallback } return this.props.children } } ================================================ FILE: examples/suspense-global/global-swr-config.tsx ================================================ 'use client' import { SWRConfig } from 'swr' import fetcher from './libs/fetch' declare module 'swr' { interface SWRGlobalConfig { suspense: true } } export function GlobalSWRConfig({ children }: { children: React.ReactNode }) { return ( {children} ) } ================================================ FILE: examples/suspense-global/libs/fetch.ts ================================================ export default async function fetcher(...args: [any]) { const res = await fetch(...args) if (!res.ok) { throw new Error('An error occurred while fetching the data.') } else { return res.json() } } ================================================ FILE: examples/suspense-global/next-env.d.ts ================================================ /// /// // NOTE: This file should not be edited // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. ================================================ FILE: examples/suspense-global/package.json ================================================ { "name": "suspense-global", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "swr": "latest" }, "scripts": { "dev": "next", "start": "next start", "build": "next build" } } ================================================ FILE: examples/suspense-global/pages/[user]/[repo].tsx ================================================ import dynamic from 'next/dynamic' import Link from 'next/link' import { Suspense } from 'react' import ErrorHandling from '../../components/error-handling' import { useRouter } from 'next/router' const Detail = dynamic(() => import('./detail'), { ssr: false }) export default function Repo() { const router = useRouter() if (!router.isReady) return null const { user, repo } = router.query const id = `${user}/${repo}` return (

{id}

loading...
}> oooops!}>

Back ) } ================================================ FILE: examples/suspense-global/pages/[user]/detail.tsx ================================================ import useSWR from 'swr' import { RepoData } from '../api/data' const Detail = ({ id }: { id: string }) => { const { data } = useSWR('/api/data?id=' + id) return ( <> {data ? (

forks: {data.forks_count}

stars: {data.stargazers_count}

watchers: {data.watchers}

) : null} ) } export default Detail ================================================ FILE: examples/suspense-global/pages/_app.tsx ================================================ import type { AppProps } from 'next/app' import { GlobalSWRConfig } from 'global-swr-config' export default function MyApp({ Component, pageProps }: AppProps) { return ( ) } ================================================ FILE: examples/suspense-global/pages/api/data.ts ================================================ import { NextApiRequest, NextApiResponse } from 'next' const projects = [ 'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'vercel/next.js', 'emperor/clothes' ] as const export type ProjectsData = typeof projects export interface RepoData { forks_count: number stargazers_count: number watchers: number } export default function api(req: NextApiRequest, res: NextApiResponse) { if (req.query.id) { if (req.query.id === projects[4]) { setTimeout(() => { res.status(404).json({ msg: 'not found' }) }) } else { // a slow endpoint for getting repo data fetch(`https://api.github.com/repos/${req.query.id}`) .then(res => res.json()) .then(data => { setTimeout(() => { res.json(data) }, 2000) }) } } else { setTimeout(() => { res.json(projects) }, 2000) } } ================================================ FILE: examples/suspense-global/pages/index.tsx ================================================ import { Suspense } from 'react' import dynamic from 'next/dynamic' const Repos = dynamic(() => import('./repos'), { ssr: false }) export default function Index() { return (

Trending Projects

loading...
}> ) } ================================================ FILE: examples/suspense-global/pages/repos.tsx ================================================ import Link from 'next/link' import { ProjectsData } from './api/data' import useSWR from 'swr' const Repos = () => { const { data } = useSWR('/api/data') return ( <> {data.map(project => (

{project}

))} ) } export default Repos ================================================ FILE: examples/suspense-global/tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "noImplicitAny": true, "plugins": [ { "name": "next" } ], "baseUrl": ".", "paths": { "~/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } ================================================ FILE: examples/suspense-retry/app/api/route.ts ================================================ import { NextResponse } from 'next/server' export const GET = () => { return Math.random() < 0.5 ? NextResponse.json({ data: 'success' }) : new Response('Bad', { status: 500 }) } ================================================ FILE: examples/suspense-retry/app/layout.tsx ================================================ export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } ================================================ FILE: examples/suspense-retry/app/manual-retry.tsx ================================================ 'use client' import { Suspense } from 'react' import { ErrorBoundary } from 'react-error-boundary' import { useRemoteData, preloadRemote } from './use-remote-data' const Demo = () => { const { data } = useRemoteData() return
{data}
} preloadRemote() function Fallback({ resetErrorBoundary }: any) { return (

Something went wrong:

) } function RemoteData() { return (
{ preloadRemote() }} > loading
}> ) } export default RemoteData ================================================ FILE: examples/suspense-retry/app/page.tsx ================================================ import { Suspense } from 'react' import dynamic from 'next/dynamic' const RemoteData = dynamic(() => import('./manual-retry'), { ssr: false }) export default function HomePage() { return ( loading component}> ) } ================================================ FILE: examples/suspense-retry/app/use-remote-data.ts ================================================ 'use client' import useSWR from 'swr' import { preload } from 'swr' let count = 0 const fetcher = () => { count++ if (count === 1) return Promise.reject('wrong') return fetch('/api') .then(r => r.json()) .then(r => r.data) } const key = 'manual-retry' export const useRemoteData = () => useSWR(key, fetcher, { suspense: true }) export const preloadRemote = () => preload(key, fetcher) ================================================ FILE: examples/suspense-retry/next-env.d.ts ================================================ /// /// /// // NOTE: This file should not be edited // see https://nextjs.org/docs/basic-features/typescript for more information. ================================================ FILE: examples/suspense-retry/next.config.js ================================================ /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { serverActions: true, }, } module.exports = nextConfig ================================================ FILE: examples/suspense-retry/package.json ================================================ { "name": "site", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@types/node": "^20.2.5", "@types/react": "^18.2.8", "@types/react-dom": "18.2.4", "next": "^latest", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "5.1.3", "swr": "*" } } ================================================ FILE: examples/suspense-retry/pages/retry.tsx ================================================ import { Suspense } from 'react' import dynamic from 'next/dynamic' const RemoteData = dynamic(() => import('../app/manual-retry'), { ssr: false }) export default function HomePage() { return ( loading component}> ) } ================================================ FILE: examples/suspense-retry/tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "baseUrl": ".", "paths": { "~/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } ================================================ FILE: immutable/package.json ================================================ { "main": "../dist/immutable/index.js", "module": "../dist/immutable/index.mjs", "types": "../dist/immutable/index.d.ts", "private": true } ================================================ FILE: infinite/package.json ================================================ { "main": "../dist/infinite/index.js", "module": "../dist/infinite/index.mjs", "types": "../dist/infinite/index.d.ts", "private": true } ================================================ FILE: jest.config.build.js ================================================ import config from './jest.config.js' const useBuildConfig = { ...config, // override to use build files moduleNameMapper: {} } export default useBuildConfig ================================================ FILE: jest.config.js ================================================ const config = { testEnvironment: 'jsdom', testRegex: '/test/.*\\.test\\.tsx?$', testPathIgnorePatterns: ['/node_modules/', '/e2e/'], modulePathIgnorePatterns: ['/examples/'], setupFilesAfterEnv: ['/test/jest-setup.ts'], moduleNameMapper: { '^swr$': '/src/index/index.ts', '^swr/infinite$': '/src/infinite/index.ts', '^swr/immutable$': '/src/immutable/index.ts', '^swr/subscription$': '/src/subscription/index.ts', '^swr/mutation$': '/src/mutation/index.ts', '^swr/_internal$': '/src/_internal/index.ts' }, transform: { '^.+\\.(t|j)sx?$': '@swc/jest' }, coveragePathIgnorePatterns: [ '/node_modules/', '/dist/', '/test/', '/src/_internal/utils/env.ts' ], coverageReporters: ['text', 'html'], reporters: [['github-actions', { silent: false }], 'summary'] } export default config ================================================ FILE: mutation/package.json ================================================ { "main": "../dist/mutation/index.js", "module": "../dist/mutation/index.mjs", "types": "../dist/mutation/index.d.ts", "private": true } ================================================ FILE: package.json ================================================ { "name": "swr", "version": "2.4.1", "description": "React Hooks library for remote data fetching", "keywords": [ "swr", "react", "hooks", "request", "cache", "fetch" ], "packageManager": "pnpm@10.24.0", "main": "./dist/index/index.js", "module": "./dist/index/index.mjs", "types": "./dist/index/index.d.ts", "sideEffects": false, "exports": { "./package.json": "./package.json", ".": { "react-server": "./dist/index/react-server.mjs", "import": { "types": "./dist/index/index.d.mts", "default": "./dist/index/index.mjs" }, "require": { "types": "./dist/index/index.d.ts", "default": "./dist/index/index.js" } }, "./infinite": { "react-server": "./dist/infinite/react-server.mjs", "import": { "types": "./dist/infinite/index.d.mts", "default": "./dist/infinite/index.mjs" }, "require": { "types": "./dist/infinite/index.d.ts", "default": "./dist/infinite/index.js" } }, "./immutable": { "import": { "types": "./dist/immutable/index.d.mts", "default": "./dist/immutable/index.mjs" }, "require": { "types": "./dist/immutable/index.d.ts", "default": "./dist/immutable/index.js" } }, "./subscription": { "import": { "types": "./dist/subscription/index.d.mts", "default": "./dist/subscription/index.mjs" }, "require": { "types": "./dist/subscription/index.d.ts", "default": "./dist/subscription/index.js" } }, "./mutation": { "import": { "types": "./dist/mutation/index.d.mts", "default": "./dist/mutation/index.mjs" }, "require": { "types": "./dist/mutation/index.d.ts", "default": "./dist/mutation/index.js" } }, "./_internal": { "react-server": "./dist/_internal/react-server.mjs", "import": { "types": "./dist/_internal/index.d.mts", "default": "./dist/_internal/index.mjs" }, "require": { "types": "./dist/_internal/index.d.ts", "default": "./dist/_internal/index.js" } } }, "files": [ "dist", "infinite", "immutable", "subscription", "mutation", "_internal" ], "repository": "github:vercel/swr", "homepage": "https://swr.vercel.app", "license": "MIT", "scripts": { "prepare": "husky install", "csb:install": "corepack enable && corepack pnpm i", "csb:build": "pnpm build", "clean": "rimraf ./dist && rimraf playwright-report test-result", "watch": "bunchee -w", "build": "bunchee", "build:e2e": "pnpm next build e2e/site", "attw": "attw --pack .", "types:check": "tsc --noEmit", "prepublishOnly": "pnpm clean && pnpm build", "publish-beta": "pnpm publish --tag beta", "format": "prettier --write ./**/*.{ts,tsx}", "lint": "eslint . --ext .ts,.tsx --cache", "lint:fix": "pnpm lint --fix", "coverage": "jest --coverage", "test-typing": "tsc -p test/tsconfig.json && tsc -p test/type/tsconfig.json && tsc -p test/type/suspense/tsconfig.json", "test": "jest", "test:build": "jest --config jest.config.build.js", "test:e2e": "playwright test", "run-all-checks": "pnpm types:check && pnpm lint && pnpm test-typing" }, "lint-staged": { "*.{ts,tsx}": [ "eslint --fix --cache", "prettier --write" ] }, "devDependencies": { "@arethetypeswrong/cli": "^0.18.2", "@edge-runtime/jest-environment": "^4.0.0", "@eslint/compat": "^2.0.0", "@eslint/eslintrc": "^3.3.1", "@eslint/js": "^9.39.1", "@playwright/test": "1.57.0", "@swc/core": "^1.15.3", "@swc/jest": "0.2.39", "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.0", "@type-challenges/utils": "0.1.1", "@types/jest": "^30.0.0", "@types/node": "^22.19.1", "@types/react": "^19.2.7", "@types/use-sync-external-store": "^1.5.0", "@typescript-eslint/eslint-plugin": "8.48.0", "@typescript-eslint/parser": "8.48.0", "bunchee": "^6.6.2", "eslint": "9.39.1", "eslint-config-prettier": "10.1.8", "eslint-plugin-jest-dom": "5.5.0", "eslint-plugin-react": "7.37.5", "eslint-plugin-react-hooks": "7.0.1", "eslint-plugin-testing-library": "7.13.5", "globals": "^16.5.0", "husky": "9.1.7", "jest": "30.2.0", "jest-environment-jsdom": "29.7.0", "lint-staged": "16.2.7", "next": "16.1.1", "prettier": "2.8.8", "react": "^18.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^5.0.0", "rimraf": "6.1.2", "semver": "^7.5.1", "swr": "workspace:*", "typescript": "5.9.3", "typescript-eslint": "^8.48.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "prettier": { "tabWidth": 2, "semi": false, "useTabs": false, "singleQuote": true, "arrowParens": "avoid", "trailingComma": "none" }, "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.6.0" } } ================================================ FILE: playwright.config.js ================================================ import { defineConfig, devices } from '@playwright/test' export default defineConfig({ webServer: { command: 'pnpm next start e2e/site --port 4000', reuseExistingServer: !process.env.CI, port: 4000 }, testDir: './e2e', /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */ snapshotDir: './e2e/__snapshots__', /* Maximum time one test can run for. */ timeout: 10 * 1000, /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ forbidOnly: !!process.env.CI, /* Retry on CI only */ retries: process.env.CI ? 2 : 0, /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: process.env.CI ? [['github'], ['html', { open: 'on-failure' }]] : [['html', { open: 'on-failure' }]], /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { baseURL: 'http://localhost:4000', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: process.env.CI ? 'on-first-retry' : 'on', ...devices['Desktop Chrome'] } }) ================================================ FILE: pnpm-workspace.yaml ================================================ packages: - '_internal' - 'core' - 'immutable' - 'infinite' - 'mutation' ================================================ FILE: scripts/bump-next-version.js ================================================ const fs = require('fs') const path = require('path') const { execSync } = require('child_process') const semver = require('semver') const packageJsonPath = path.join(__dirname, '../package.json') const packageJsonData = fs.readFileSync(packageJsonPath, 'utf8') const packageJson = JSON.parse(packageJsonData) let version = packageJson.version const releaseType = process.env.RELEASE_TYPE || 'beta' const semverType = process.env.SEMVER_TYPE function bumpVersion(version) { if (process.env.DRY_RUN) { console.log(`npm version ${version}`) } else { try { execSync(`npm version ${version}`, { stdio: 'inherit' }) } catch (error) { console.error('Failed to execute npm version:', error) process.exit(1) } } } if (releaseType === 'beta') { if (semver.prerelease(version)) { version = semver.inc(version, 'prerelease') } else { version = semver.inc(version, 'pre' + semverType, 'beta') } } else if (releaseType === 'stable') { if (!semverType) { console.error('Missing semver type. Expected "patch", "minor" or "major".') process.exit(1) } version = semver.inc(version, semverType) } else { console.error('Invalid release type. Expected "beta" or "stable".') process.exit(1) } bumpVersion(version) ================================================ FILE: src/_internal/constants.ts ================================================ export const INFINITE_PREFIX = '$inf$' ================================================ FILE: src/_internal/events.ts ================================================ export const FOCUS_EVENT = 0 export const RECONNECT_EVENT = 1 export const MUTATE_EVENT = 2 export const ERROR_REVALIDATE_EVENT = 3 ================================================ FILE: src/_internal/index.react-server.ts ================================================ export { serialize } from './utils/serialize' export { SWRConfig } from './index' export { INFINITE_PREFIX } from './constants' ================================================ FILE: src/_internal/index.ts ================================================ import SWRConfig from './utils/config-context' import * as revalidateEvents from './events' import { INFINITE_PREFIX } from './constants' export { SWRConfig, revalidateEvents, INFINITE_PREFIX } export { initCache } from './utils/cache' export { defaultConfig, cache, mutate, compare } from './utils/config' import { setupDevTools } from './utils/devtools' export * from './utils/env' export { SWRGlobalState } from './utils/global-state' export { stableHash } from './utils/hash' export * from './utils/helper' export * from './utils/shared' export { mergeConfigs } from './utils/merge-config' export { internalMutate } from './utils/mutate' export { normalize } from './utils/normalize-args' export { withArgs } from './utils/resolve-args' export { serialize } from './utils/serialize' export { subscribeCallback } from './utils/subscribe-key' export { getTimestamp } from './utils/timestamp' export { useSWRConfig } from './utils/use-swr-config' export { preset, defaultConfigOptions } from './utils/web-preset' export { withMiddleware } from './utils/with-middleware' export { preload } from './utils/preload' export * from './types' setupDevTools() ================================================ FILE: src/_internal/types.ts ================================================ import type { SWRGlobalConfig } from '../index' import type * as revalidateEvents from './events' /** * Global state tuple containing SWR's internal state management structures. * * This is the core state structure that manages all SWR operations internally. * Each element serves a specific purpose in the SWR ecosystem. * * @internal */ export type GlobalState = [ /** Event revalidators: Maps cache keys to arrays of revalidation callbacks */ Record, /** Mutation timestamps: Maps cache keys to [start_timestamp, end_timestamp] tuples */ Record, /** Fetch cache: Maps cache keys to [data, timestamp] tuples */ Record, /** Preload cache: Maps cache keys to fetcher responses */ Record>, /** Scoped mutator function for cache updates */ ScopedMutator, /** Cache setter function with prev/current value comparison */ (key: string, value: any, prev: any) => void, /** Cache subscriber function that returns an unsubscribe function */ (key: string, callback: (current: any, prev: any) => void) => () => void ] /** * Response type that can be returned by fetcher functions. * * @template Data - The type of data returned by the fetcher * @public */ export type FetcherResponse = Data | Promise /** * Basic fetcher function that accepts any arguments and returns data or a promise. * * This is the most permissive fetcher type, allowing any number of arguments * of any type. Used when type safety is not required or when dealing with * dynamic fetcher signatures. * * @template Data - The type of data returned by the fetcher * @param args - Variable arguments passed to the fetcher * @returns Data or a Promise that resolves to data * @public */ export type BareFetcher = ( ...args: any[] ) => FetcherResponse /** * Typed fetcher function that is constrained by the SWR key type. * * Provides type safety by ensuring the fetcher argument matches the key type. * The conditional type logic ensures that: * - If the key is a function returning a value, the fetcher receives that value * - If the key is falsy (null, undefined, false), the fetcher is never called * - Otherwise, the fetcher receives the key directly as its argument * * @template Data - The type of data returned by the fetcher * @template SWRKey - The type of the SWR key, used to infer fetcher arguments * @public */ export type Fetcher< Data = unknown, SWRKey extends Key = Key > = SWRKey extends () => infer Arg | null | undefined | false ? (arg: Arg) => FetcherResponse : SWRKey extends null | undefined | false ? never : SWRKey extends infer Arg ? (arg: Arg) => FetcherResponse : never /** * Determines if data should block rendering based on suspense configuration. * * This conditional type is used internally to determine the return type of `data` * in SWRResponse. When suspense is enabled or fallbackData is provided, data * will never be undefined, allowing for non-nullable return types. * * The type resolution follows this logic: * 1. If global suspense is enabled → `true` (data never undefined) * 2. If no options provided → `false` (data can be undefined) * 3. If suspense is enabled in options → `true` (data never undefined) * 4. If fallbackData is provided → `true` (data never undefined) * 5. Otherwise → `false` (data can be undefined) * * @template Data - The data type * @template Options - The SWR configuration options * @returns `true` if data is guaranteed to be defined, `false` if it can be undefined * @internal */ export type BlockingData< Data = any, Options = SWRDefaultOptions > = SWRGlobalConfig extends { suspense: true } ? true : Options extends undefined ? false : Options extends { suspense: true } ? true : Options extends { fallbackData: Data | Promise } ? true : false /** * Configuration types that are only used internally, not exposed to the user. * * These options are managed internally by SWR and passed between internal * functions. They are not part of the public API and should not be used * directly by consumers. * * @internal */ export interface InternalConfiguration { /** The cache instance used to store SWR data and state */ cache: Cache /** Scoped mutator function for updating cache entries */ mutate: ScopedMutator } /** * Public configuration options for SWR. * * This interface defines all the configuration options that users can pass * to customize SWR's behavior. These options can be provided globally via * SWRConfig or per-hook via the config parameter. * * @template Data - The type of data returned by the fetcher * @template Error - The type of error that can be thrown * @template Fn - The fetcher function type * * @public * @see {@link https://swr.vercel.app/docs/options | SWR Options Documentation} */ export interface PublicConfiguration< Data = any, Error = any, Fn extends Fetcher = BareFetcher > { /** * error retry interval in milliseconds * @defaultValue 5000 */ errorRetryInterval: number /** max error retry count */ errorRetryCount?: number /** * timeout to trigger the onLoadingSlow event in milliseconds * @defaultValue 3000 */ loadingTimeout: number /** * only revalidate once during a time span in milliseconds * @defaultValue 5000 */ focusThrottleInterval: number /** * dedupe requests with the same key in this time span in milliseconds * @defaultValue 2000 */ dedupingInterval: number /** * * Disabled by default: `refreshInterval = 0` * * If set to a number, polling interval in milliseconds * * If set to a function, the function will receive the latest data and should return the interval in milliseconds * @see {@link https://swr.vercel.app/docs/revalidation} */ refreshInterval?: number | ((latestData: Data | undefined) => number) /** * polling when the window is invisible (if `refreshInterval` is enabled) * @defaultValue false */ refreshWhenHidden?: boolean /** * polling when the browser is offline (determined by `navigator.onLine`) * * When enabled, SWR will continue polling even when the browser is offline. * This can be useful for applications that need to check for connectivity * or cache updates while offline. * * @defaultValue false */ refreshWhenOffline?: boolean /** * automatically revalidate when window gets focused * * When enabled, SWR will automatically revalidate data when the user * returns focus to the window/tab. This ensures data freshness when * users switch between applications. * * @defaultValue true * @see {@link https://swr.vercel.app/docs/revalidation | Revalidation Documentation} */ revalidateOnFocus: boolean /** * automatically revalidate when the browser regains a network connection (via `navigator.onLine`) * * When enabled, SWR will automatically revalidate data when the browser * goes from offline to online state, ensuring data is up-to-date when * connectivity is restored. * * @defaultValue true * @see {@link https://swr.vercel.app/docs/revalidation | Revalidation Documentation} */ revalidateOnReconnect: boolean /** * enable or disable automatic revalidation when component is mounted * * Controls whether SWR should automatically fetch data when the component * mounts. When `undefined`, the behavior depends on `revalidateIfStale`. * * @defaultValue undefined (inherits from revalidateIfStale) */ revalidateOnMount?: boolean /** * automatically revalidate even if there is stale data * @defaultValue true * @see {@link https://swr.vercel.app/docs/revalidation#disable-automatic-revalidations} */ revalidateIfStale: boolean /** * retry when fetcher has an error * @defaultValue true */ shouldRetryOnError: boolean | ((err: Error) => boolean) /** * keep the previous result when key is changed but data is not ready * @defaultValue false */ keepPreviousData?: boolean /** * @experimental enable React Suspense mode * @defaultValue false * @see {@link https://swr.vercel.app/docs/suspense} */ suspense?: boolean /** * initial data to be returned (note: ***This is per-hook***) * @see {@link https://swr.vercel.app/docs/with-nextjs} */ fallbackData?: Data | Promise /** * warns when preload data is missing for a given key, this includes fallback * data, preload calls, or initial data from the cache provider * @defaultValue false */ strictServerPrefetchWarning?: boolean /** * the fetcher function */ fetcher?: Fn /** * array of middleware functions * @see {@link https://swr.vercel.app/docs/middleware} */ use?: Middleware[] /** * a key-value object of multiple fallback data * @see {@link https://swr.vercel.app/docs/with-nextjs#pre-rendering-with-default-data} */ fallback: { [key: string]: any } /** * Function to detect whether pause revalidations, will ignore fetched data and errors when it returns true. Returns false by default. */ isPaused: () => boolean /** * callback function when a request takes too long to load (see `loadingTimeout`) */ onLoadingSlow: ( key: string, config: Readonly> ) => void /** * callback function when a request finishes successfully */ onSuccess: ( data: Data, key: string, config: Readonly> ) => void /** * callback function when a request returns an error */ onError: ( err: Error, key: string, config: Readonly> ) => void /** * handler for error retry */ onErrorRetry: ( err: Error, key: string, config: Readonly>, revalidate: Revalidator, revalidateOpts: Required ) => void /** * callback function when a request is ignored due to race conditions */ onDiscarded: (key: string) => void /** * Comparison function used to detect when returned data has changed, to avoid spurious rerenders. By default, [dequal](https://github.com/lukeed/dequal) is used. */ compare: (a: Data | undefined, b: Data | undefined) => boolean /** * 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. * @see {@link https://swr.vercel.app/docs/advanced/react-native#customize-focus-and-reconnect-events} */ isOnline: () => boolean /** * 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. * @see {@link https://swr.vercel.app/docs/advanced/react-native#customize-focus-and-reconnect-events} */ isVisible: () => boolean } export type FullConfiguration< Data = any, Error = any, Fn extends Fetcher = BareFetcher > = InternalConfiguration & PublicConfiguration /** * Provider configuration for custom focus and reconnect event handling. * * This configuration allows custom implementations for detecting window focus * and network reconnection events. Useful for React Native or other environments * where the default browser APIs are not available. * * @public * @see {@link https://swr.vercel.app/docs/advanced/react-native | React Native Documentation} */ export type ProviderConfiguration = { /** * Initialize focus event listener. * * @param callback - Function to call when window gains focus * @returns Optional cleanup function to remove the listener */ initFocus: (callback: () => void) => (() => void) | void /** * Initialize reconnect event listener. * * @param callback - Function to call when network reconnects * @returns Optional cleanup function to remove the listener */ initReconnect: (callback: () => void) => (() => void) | void } /** * The main useSWR hook interface with multiple overloads for different usage patterns. * * This interface provides type-safe overloads for various ways to call useSWR, * from simple key-only calls to complex configurations with custom fetchers. * The overloads ensure proper type inference for data, error, and configuration. * * @public * * @example Basic usage * ```ts * const { data, error } = useSWR('/api/data', fetcher) * ``` * * @example With configuration * ```ts * const { data, error } = useSWR('/api/data', fetcher, { * refreshInterval: 1000, * revalidateOnFocus: false * }) * ``` * * @example Conditional fetching * ```ts * const { data, error } = useSWR( * user.id ? `/api/user/${user.id}` : null, * fetcher * ) * ``` * * @example Dynamic key with function * ```ts * const { data, error } = useSWR( * () => user.id ? [`/api/user/${user.id}`, user.token] : null, * ([url, token]) => fetcher(url, { headers: { Authorization: token } }) * ) * ``` */ export interface SWRHook { /** * Basic usage with just a key. Requires a global fetcher to be configured, * or can be used for client-side state management without fetching. * * @example * ```ts * // With global fetcher * const { data } = useSWR('/api/user') * * // Client state management * const { data, mutate } = useSWR('user-settings') * mutate({ theme: 'dark' }) * ``` */ ( key: SWRKey ): SWRResponse /** * Most common usage pattern with key and explicit fetcher function. * The fetcher receives the key as its argument and returns the data. * * @example * ```ts * const { data, error } = useSWR('/api/user/123', * (url) => fetch(url).then(res => res.json()) * ) * ``` */ ( key: SWRKey, fetcher: Fetcher | null ): SWRResponse /** * Key with fetcher using relaxed key constraints for dynamic or complex keys. * Allows more flexible key types including functions and objects. * * @example * ```ts * const { data } = useSWR( * () => user ? ['/api/posts', user.id] : null, * ([url, userId]) => fetchUserPosts(url, userId) * ) * ``` */ ( key: SWRKey, fetcher: Fetcher | null ): SWRResponse /** * Key-only with advanced configuration options and strict typing. * Useful when you need specific SWR options but rely on a global fetcher. * * @example * ```ts * const { data } = useSWR('/api/user', { * refreshInterval: 5000, * revalidateOnFocus: false * }) * ``` */ < Data = any, Error = any, SWRKey extends Key = StrictKey, SWROptions extends | SWRConfiguration> | undefined = | SWRConfiguration> | undefined >( key: SWRKey ): SWRResponse /** * Key with fetcher and advanced configuration options with strict typing. * Provides full control over fetching behavior and SWR options. * * @example * ```ts * const { data } = useSWR('/api/data', fetcher, { * suspense: true, * fallbackData: initialData * }) * ``` */ < Data = any, Error = any, SWRKey extends Key = StrictKey, SWROptions extends | SWRConfiguration> | undefined = | SWRConfiguration> | undefined >( key: SWRKey, fetcher: Fetcher | null ): SWRResponse /** * Key with configuration object but no explicit fetcher. Uses global fetcher * or can be used for pure client state management with configuration. * * @example * ```ts * // With global fetcher and config * const { data } = useSWR('/api/user', { * refreshInterval: 1000 * }) * * // Client state with config * const { data } = useSWR('local-state', { * fallbackData: defaultValue * }) * ``` */ < Data = any, Error = any, SWRKey extends Key = StrictKey, SWROptions extends | SWRConfiguration> | undefined = | SWRConfiguration> | undefined >( key: SWRKey, config: SWRConfigurationWithOptionalFallback ): SWRResponse /** * Complete signature with key, fetcher, and configuration options. * Provides maximum flexibility and control over all SWR behavior. * * @example * ```ts * const { data, error, isLoading } = useSWR( * '/api/user', * async (url) => { * const res = await fetch(url) * if (!res.ok) throw new Error('Failed to fetch') * return res.json() * }, * { * refreshInterval: 5000, * onError: (error) => console.error('SWR Error:', error), * fallbackData: { name: 'Loading...' } * } * ) * ``` */ < Data = any, Error = any, SWRKey extends Key = StrictKey, SWROptions extends | SWRConfiguration> | undefined = | SWRConfiguration> | undefined >( key: SWRKey, fetcher: Fetcher | null, config: SWRConfigurationWithOptionalFallback ): SWRResponse /** * Simple key-only usage with flexible key types. Most permissive overload * that accepts any valid key format. * * @example * ```ts * const { data } = useSWR('/api/data') * const { data: userData } = useSWR(['user', userId]) * const { data: settings } = useSWR({ endpoint: '/settings', version: 'v1' }) * ``` */ (key: Key): SWRResponse /** * Key-only with configuration options using bare fetcher constraints. * Suitable for cases where fetcher type safety is less important. * * @example * ```ts * const { data } = useSWR('/api/data', { * dedupingInterval: 5000 * }) * ``` */ < Data = any, Error = any, SWROptions extends | SWRConfiguration> | undefined = SWRConfiguration> | undefined >( key: Key ): SWRResponse /** * Key with bare fetcher function that accepts any arguments. * Provides less type safety but maximum flexibility for fetcher signatures. * * @example * ```ts * const { data } = useSWR('/api/user', * (...args) => customFetcher(...args) * ) * ``` */ < Data = any, Error = any, SWROptions extends | SWRConfiguration> | undefined = SWRConfiguration> | undefined >( key: Key, fetcher: BareFetcher | null ): SWRResponse /** * Key with configuration using relaxed fetcher typing constraints. * Useful when working with dynamic or loosely-typed fetcher functions. * * @example * ```ts * const { data } = useSWR(dynamicKey, { * fetcher: customFetcher, * refreshInterval: 2000 * }) * ``` */ < Data = any, Error = any, SWROptions extends | SWRConfiguration> | undefined = SWRConfiguration> | undefined >( key: Key, config: SWRConfigurationWithOptionalFallback ): SWRResponse /** * Complete signature with key, bare fetcher, and configuration. * Most flexible overload with minimal type constraints, suitable for * complex scenarios where strict typing isn't feasible. * * @example * ```ts * const { data } = useSWR( * complexKey, * (...args) => legacyFetcher(...args), * { * refreshInterval: 10000, * errorRetryCount: 3 * } * ) * ``` */ < Data = any, Error = any, SWROptions extends | SWRConfiguration> | undefined = SWRConfiguration> | undefined >( key: Key, fetcher: BareFetcher | null, config: SWRConfigurationWithOptionalFallback ): SWRResponse } /** * Middleware function type for extending SWR functionality. * * Middleware functions receive the next SWR hook in the chain and return * a modified hook function. This allows for composition of multiple * middleware functions to add features like logging, caching, or * request/response transformation. * * The middleware guarantees that a SWRHook receives a key, fetcher, * and config as arguments, providing a consistent interface for * middleware authors. * * @param useSWRNext - The next SWR hook function in the middleware chain * @returns A new SWR hook function with middleware functionality applied * * @template Data - The type of data returned by the fetcher * @template Error - The type of error that can be thrown * * @public * @see {@link https://swr.vercel.app/docs/middleware | Middleware Documentation} * * @example * ```ts * const logger: Middleware = (useSWRNext) => (key, fetcher, config) => { * console.log('SWR Request:', key) * return useSWRNext(key, fetcher, config) * } * ``` */ export type Middleware = ( useSWRNext: SWRHook ) => ( key: Key, fetcher: BareFetcher | null, config: SWRConfiguration> ) => SWRResponse /** * Represents a tuple of arguments that can be passed to a fetcher. * * The first element is typically the primary key (like a URL), followed * by additional parameters that affect the request (like query parameters, * headers, or request options). * */ type ArgumentsTuple = readonly [any, ...unknown[]] /** * Valid types for SWR keys. * * SWR keys identify unique requests and can be: * - `string`: Simple URL or identifier * - `ArgumentsTuple`: Array with URL and additional parameters * - `Record`: Object that will be serialized * - `null | undefined | false`: Falsy values disable the request * * When a key is falsy, SWR will not make the request, allowing for * conditional fetching based on application state. * * @public * * @example * ```ts * // String key * useSWR('/api/users', fetcher) * * // Array key with parameters * useSWR(['/api/user', userId], ([url, id]) => fetcher(`${url}/${id}`)) * * // Object key * useSWR({ url: '/api/data', params: { page: 1 } }, fetcher) * * // Conditional key * useSWR(userId ? `/api/user/${userId}` : null, fetcher) * ``` */ export type Arguments = | string | ArgumentsTuple | Record | null | undefined | false /** * SWR key that can be static or a function that returns arguments. * * When a function is provided, it's called on each render to determine * the current key. This allows for dynamic keys based on component state * or props. * * @public * * @example * ```ts * // Static key * useSWR('/api/data', fetcher) * * // Dynamic key function * useSWR(() => user ? `/api/user/${user.id}` : null, fetcher) * ``` */ export type Key = Arguments | (() => Arguments) /** * Strict tuple key type that only allows tuples or falsy values. * * @internal */ export type StrictTupleKey = ArgumentsTuple | null | undefined | false /** * Strict key type for internal use. * * @internal */ type StrictKey = StrictTupleKey | (() => StrictTupleKey) /** * Callback function type for mutator operations. * * This function receives the current cached data and can return new data * to update the cache. It can be synchronous or asynchronous, and can * return undefined to indicate no change should be made. * * @template Data - The type of the cached data * @param currentData - The current data in the cache (may be undefined) * @returns New data to set, undefined for no change, or a Promise resolving to either * * @public * * @example * ```ts * // Increment a counter * mutate(key, (current: number = 0) => current + 1) * * // Async update * mutate(key, async (current) => { * const updated = await updateData(current) * return updated * }) * ``` */ export type MutatorCallback = ( currentData?: Data ) => Promise | undefined | Data /** * Options for configuring mutator behavior. * * These options control how the mutation affects the cache, revalidation, * and error handling behavior. * * @template Data - The type of the data related to the key * @template MutationData - The type of the data returned by the mutator * * @public */ export type MutatorOptions = { /** * Whether to revalidate the cache after mutation. * * Can be a boolean or a function that receives the new data and key * to determine whether revalidation should occur. * * @defaultValue true */ revalidate?: boolean | ((data: Data, key: Arguments) => boolean) /** * Whether and how to populate the cache with mutation results. * * - `false`: Don't update the cache * - `true`: Update cache with mutation result directly * - Function: Transform mutation result before caching * * @defaultValue true */ populateCache?: | boolean | ((result: MutationData, currentData: Data | undefined) => Data) /** * Optimistic data to show immediately while mutation is pending. * * Can be the data directly or a function that computes it based on * current and displayed data. Useful for immediate UI feedback. * * @defaultValue undefined */ optimisticData?: | Data | ((currentData: Data | undefined, displayedData: Data | undefined) => Data) /** * Whether to rollback optimistic updates on error. * * Can be a boolean or a function that receives the error to determine * whether rollback should occur. * * @defaultValue true */ rollbackOnError?: boolean | ((error: unknown) => boolean) /** * Whether to throw errors instead of returning them in the error field. * * When true, errors will be thrown and can be caught with try/catch. * When false, errors are returned in the response object. * * @defaultValue false */ throwOnError?: boolean } export type MutatorConfig = { revalidate?: boolean populateCache?: boolean } export type Broadcaster = ( cache: Cache, key: string, data: Data, error?: Error, isValidating?: boolean, revalidate?: boolean, populateCache?: boolean ) => Promise /** * Internal state structure stored in the cache. * * This represents the complete state for a cache entry, including * data, error, and loading states. All fields are optional as they * may not be present depending on the request lifecycle. * * @template Data - The type of data stored * @template Error - The type of error that can occur * * @internal */ export type State = { /** The cached data, if available */ data?: Data /** The error object, if an error occurred */ error?: Error /** Whether a revalidation is currently in progress */ isValidating?: boolean /** Whether this is the initial load with no cached data */ isLoading?: boolean } export type MutatorFn = ( cache: Cache, key: Key, data?: Data | Promise | MutatorCallback, opts?: boolean | MutatorOptions ) => Promise export type MutatorWrapper = Fn extends ( ...args: [...infer Parameters] ) => infer Result ? Parameters[3] extends boolean ? Result : Parameters[3] extends Required> ? Parameters[3]['populateCache'] extends false ? never : Result : Result : never export type Mutator = MutatorWrapper> export interface ScopedMutator { /** * @typeParam Data - The type of the data related to the key * @typeParam MutationData - The type of the data returned by the mutator */ ( matcher: (key?: Arguments) => boolean, data?: MutationData | Promise | MutatorCallback, opts?: boolean | MutatorOptions ): Promise> /** * @typeParam Data - The type of the data related to the key * @typeParam MutationData - The type of the data returned by the mutator */ ( key: Arguments, data?: T | Promise | MutatorCallback, opts?: boolean | MutatorOptions ): Promise } /** * @typeParam Data - The type of the data related to the key * @typeParam MutationData - The type of the data returned by the mutator */ export type KeyedMutator = ( data?: Data | Promise | MutatorCallback, opts?: boolean | MutatorOptions ) => Promise export type SWRConfiguration< Data = any, Error = any, Fn extends BareFetcher = BareFetcher > = Partial> & Partial & { provider?: (cache: Readonly) => Cache } export type IsLoadingResponse< Data = any, Options = SWRDefaultOptions > = SWRGlobalConfig extends { suspense: true } ? Options extends { suspense: true } ? false : false : boolean type SWRDefaultOptions = SWRConfiguration> type SWRConfigurationWithOptionalFallback = // If `Options` has `fallbackData`, this turns it to optional instead. Options extends SWRConfiguration & Required> ? Omit & Pick, 'fallbackData'> : Options /** * The response object returned by SWR hooks. * * This interface represents the return value of useSWR and related hooks, * providing access to data, error state, and control functions. * * @template Data - The type of data returned by the fetcher * @template Error - The type of error that can be thrown * @template Config - The configuration type used to determine blocking behavior * * @public */ export interface SWRResponse { /** * The data returned by the fetcher function. * * - When suspense is enabled or fallbackData is provided: always defined * - Otherwise: `undefined` during initial load or when key is falsy */ data: BlockingData extends true ? Data : Data | undefined /** * The error object thrown by the fetcher function. * * `undefined` when there's no error or when a request is in progress. */ error: Error | undefined /** * Function to mutate the cached data for this specific key. * * This is a bound version of the global mutate function that automatically * uses the current key, providing type safety and convenience. */ mutate: KeyedMutator /** * Whether the request is currently being validated (loading fresh data). * * `true` during initial load, revalidation, or when mutate is called * with a promise or async function. */ isValidating: boolean /** * Whether the request is in initial loading state. * * `true` only during the initial load when there's no cached data. * Unlike `isValidating`, this becomes `false` once data is available. */ isLoading: IsLoadingResponse } export type KeyLoader = | ((index: number, previousPageData: any | null) => Args) | null export interface RevalidatorOptions { retryCount?: number dedupe?: boolean } export type Revalidator = ( revalidateOpts?: RevalidatorOptions ) => Promise | void export type RevalidateEvent = | typeof revalidateEvents.FOCUS_EVENT | typeof revalidateEvents.RECONNECT_EVENT | typeof revalidateEvents.MUTATE_EVENT | typeof revalidateEvents.ERROR_REVALIDATE_EVENT type RevalidateCallbackReturnType = { [revalidateEvents.FOCUS_EVENT]: void [revalidateEvents.RECONNECT_EVENT]: void [revalidateEvents.MUTATE_EVENT]: Promise [revalidateEvents.ERROR_REVALIDATE_EVENT]: void } export type RevalidateCallback = ( type: K, opts?: any ) => RevalidateCallbackReturnType[K] /** * Cache interface for storing SWR state. * * This interface defines the contract for cache providers used by SWR. * The default implementation uses a Map, but custom cache providers * can implement this interface to provide different storage mechanisms. * * @template Data - The type of data stored in the cache * * @public * @see {@link https://swr.vercel.app/docs/advanced/cache | Cache Documentation} */ export interface Cache { /** * Get an iterator of all cache keys. * * @returns Iterator that yields all cache keys as strings */ keys(): IterableIterator /** * Get the cached state for a key. * * @param key - The cache key to look up * @returns The cached state or undefined if not found */ get(key: string): State | undefined /** * Set the cached state for a key. * * @param key - The cache key to set * @param value - The state to cache */ set(key: string, value: State): void /** * Delete a cached entry. * * @param key - The cache key to delete */ delete(key: string): void } export interface StateDependencies { data?: boolean error?: boolean isValidating?: boolean isLoading?: boolean } ================================================ FILE: src/_internal/utils/cache.ts ================================================ import { defaultConfigOptions } from './web-preset' import { IS_SERVER } from './env' import { UNDEFINED, mergeObjects, noop } from './shared' import { internalMutate } from './mutate' import { SWRGlobalState } from './global-state' import * as revalidateEvents from '../events' import type { Cache, ScopedMutator, RevalidateEvent, RevalidateCallback, ProviderConfiguration, GlobalState } from '../types' const revalidateAllKeys = ( revalidators: Record, type: RevalidateEvent ) => { for (const key in revalidators) { if (revalidators[key][0]) revalidators[key][0](type) } } export const initCache = ( provider: Cache, options?: Partial ): | [Cache, ScopedMutator, () => void, () => void] | [Cache, ScopedMutator] | undefined => { // The global state for a specific provider will be used to deduplicate // requests and store listeners. As well as a mutate function that is bound to // the cache. // The provider's global state might be already initialized. Let's try to get the // global state associated with the provider first. if (!SWRGlobalState.has(provider)) { const opts = mergeObjects(defaultConfigOptions, options) // If there's no global state bound to the provider, create a new one with the // new mutate function. const EVENT_REVALIDATORS = Object.create(null) const mutate = internalMutate.bind(UNDEFINED, provider) as ScopedMutator let unmount = noop const subscriptions: Record void)[]> = Object.create(null) const subscribe = ( key: string, callback: (current: any, prev: any) => void ) => { const subs = subscriptions[key] || [] subscriptions[key] = subs subs.push(callback) return () => subs.splice(subs.indexOf(callback), 1) } const setter = (key: string, value: any, prev: any) => { provider.set(key, value) const subs = subscriptions[key] if (subs) { for (const fn of subs) { fn(value, prev) } } } const initProvider = () => { if (!SWRGlobalState.has(provider)) { // Update the state if it's new, or if the provider has been extended. SWRGlobalState.set(provider, [ EVENT_REVALIDATORS, Object.create(null), Object.create(null), Object.create(null), mutate, setter, subscribe ]) if (!IS_SERVER) { // When listening to the native events for auto revalidations, // we intentionally put a delay (setTimeout) here to make sure they are // fired after immediate JavaScript executions, which can be // React's state updates. // This avoids some unnecessary revalidations such as // https://github.com/vercel/swr/issues/1680. const releaseFocus = opts.initFocus( setTimeout.bind( UNDEFINED, revalidateAllKeys.bind( UNDEFINED, EVENT_REVALIDATORS, revalidateEvents.FOCUS_EVENT ) ) ) const releaseReconnect = opts.initReconnect( setTimeout.bind( UNDEFINED, revalidateAllKeys.bind( UNDEFINED, EVENT_REVALIDATORS, revalidateEvents.RECONNECT_EVENT ) ) ) unmount = () => { // eslint-disable-next-line @typescript-eslint/no-unused-expressions releaseFocus && releaseFocus() // eslint-disable-next-line @typescript-eslint/no-unused-expressions releaseReconnect && releaseReconnect() // When un-mounting, we need to remove the cache provider from the state // storage too because it's a side-effect. Otherwise, when re-mounting we // will not re-register those event listeners. SWRGlobalState.delete(provider) } } } } initProvider() // This is a new provider, we need to initialize it and setup DOM events // listeners for `focus` and `reconnect` actions. // We might want to inject an extra layer on top of `provider` in the future, // such as key serialization, auto GC, etc. // For now, it's just a `Map` interface without any modifications. return [provider, mutate, initProvider, unmount] } return [provider, (SWRGlobalState.get(provider) as GlobalState)[4]] } ================================================ FILE: src/_internal/utils/config-context.ts ================================================ 'use client' import type { FC, PropsWithChildren } from 'react' import { createContext, createElement, useContext, useMemo, useRef } from 'react' import { cache as defaultCache } from './config' import { initCache } from './cache' import { mergeConfigs } from './merge-config' import { UNDEFINED, mergeObjects, isFunction } from './shared' import { useIsomorphicLayoutEffect } from './env' import type { SWRConfiguration, FullConfiguration } from '../types' export const SWRConfigContext = createContext>({}) const SWRConfig: FC< PropsWithChildren<{ value?: | SWRConfiguration | ((parentConfig?: SWRConfiguration) => SWRConfiguration) }> > = props => { const { value } = props const parentConfig = useContext(SWRConfigContext) const isFunctionalConfig = isFunction(value) const config = useMemo( () => (isFunctionalConfig ? value(parentConfig) : value), [isFunctionalConfig, parentConfig, value] ) // Extend parent context values and middleware. const extendedConfig = useMemo( () => (isFunctionalConfig ? config : mergeConfigs(parentConfig, config)), [isFunctionalConfig, parentConfig, config] ) // Should not use the inherited provider. const provider = config && config.provider // initialize the cache only on first access. const cacheContextRef = useRef>(UNDEFINED) if (provider && !cacheContextRef.current) { cacheContextRef.current = initCache( provider((extendedConfig as any).cache || defaultCache), config ) } const cacheContext = cacheContextRef.current // Override the cache if a new provider is given. if (cacheContext) { ;(extendedConfig as any).cache = cacheContext[0] ;(extendedConfig as any).mutate = cacheContext[1] } // Unsubscribe events. useIsomorphicLayoutEffect(() => { if (cacheContext) { // eslint-disable-next-line @typescript-eslint/no-unused-expressions cacheContext[2] && cacheContext[2]() return cacheContext[3] } }, []) return createElement( SWRConfigContext.Provider, mergeObjects(props, { value: extendedConfig }) ) } export default SWRConfig ================================================ FILE: src/_internal/utils/config.ts ================================================ import type { PublicConfiguration, FullConfiguration, RevalidatorOptions, Revalidator, ScopedMutator, Cache } from '../types' import { initCache } from './cache' import { preset } from './web-preset' import { slowConnection } from './env' import { isUndefined, noop, mergeObjects } from './shared' import { dequal } from 'dequal/lite' // error retry const onErrorRetry = ( _: unknown, __: string, config: Readonly, revalidate: Revalidator, opts: Required ): void => { const maxRetryCount = config.errorRetryCount const currentRetryCount = opts.retryCount // Exponential backoff const timeout = ~~( (Math.random() + 0.5) * (1 << (currentRetryCount < 8 ? currentRetryCount : 8)) ) * config.errorRetryInterval if (!isUndefined(maxRetryCount) && currentRetryCount > maxRetryCount) { return } setTimeout(revalidate, timeout, opts) } const compare = dequal // Default cache provider const [cache, mutate] = initCache(new Map()) as [Cache, ScopedMutator] export { cache, mutate, compare } // Default config export const defaultConfig: FullConfiguration = mergeObjects( { // events onLoadingSlow: noop, onSuccess: noop, onError: noop, onErrorRetry, onDiscarded: noop, // switches revalidateOnFocus: true, revalidateOnReconnect: true, revalidateIfStale: true, shouldRetryOnError: true, // timeouts errorRetryInterval: slowConnection ? 10000 : 5000, focusThrottleInterval: 5 * 1000, dedupingInterval: 2 * 1000, loadingTimeout: slowConnection ? 5000 : 3000, // providers compare, isPaused: () => false, cache, mutate, fallback: {} }, // use web preset by default preset ) ================================================ FILE: src/_internal/utils/devtools.ts ================================================ import React from 'react' import { isWindowDefined } from './helper' // @ts-expect-error const enableDevtools = isWindowDefined && window.__SWR_DEVTOOLS_USE__ export const use = enableDevtools ? // @ts-expect-error window.__SWR_DEVTOOLS_USE__ : [] export const setupDevTools = () => { if (enableDevtools) { // @ts-expect-error window.__SWR_DEVTOOLS_REACT__ = React } } ================================================ FILE: src/_internal/utils/env.ts ================================================ import React, { useEffect, useLayoutEffect } from 'react' import { hasRequestAnimationFrame, isLegacyDeno, isWindowDefined } from './helper' export const IS_REACT_LEGACY = !React.useId export const IS_SERVER = !isWindowDefined || isLegacyDeno // Polyfill requestAnimationFrame export const rAF = ( f: (...args: any[]) => void ): number | ReturnType => hasRequestAnimationFrame() ? window['requestAnimationFrame'](f) : setTimeout(f, 1) // React currently throws a warning when using useLayoutEffect on the server. // To get around it, we can conditionally useEffect on the server (no-op) and // useLayoutEffect in the browser. export const useIsomorphicLayoutEffect = IS_SERVER ? useEffect : useLayoutEffect // This assignment is to extend the Navigator type to use effectiveType. const navigatorConnection = typeof navigator !== 'undefined' && ( navigator as Navigator & { connection?: { effectiveType: string saveData: boolean } } ).connection // Adjust the config based on slow connection status (<= 70Kbps). export const slowConnection = !IS_SERVER && navigatorConnection && (['slow-2g', '2g'].includes(navigatorConnection.effectiveType) || navigatorConnection.saveData) ================================================ FILE: src/_internal/utils/global-state.ts ================================================ import type { Cache, GlobalState } from '../types' // Global state used to deduplicate requests and store listeners export const SWRGlobalState = new WeakMap() ================================================ FILE: src/_internal/utils/hash.ts ================================================ import { OBJECT, isUndefined } from './shared' // use WeakMap to store the object->key mapping // so the objects can be garbage collected. // WeakMap uses a hashtable under the hood, so the lookup // complexity is almost O(1). const table = new WeakMap() const getTypeName = (value: any) => OBJECT.prototype.toString.call(value) const isObjectTypeName = (typeName: string, type: string) => typeName === `[object ${type}]` // counter of the key let counter = 0 // A stable hash implementation that supports: // - Fast and ensures unique hash properties // - Handles unserializable values // - Handles object key ordering // - Generates short results // // This is not a serialization function, and the result is not guaranteed to be // parsable. export const stableHash = (arg: any): string => { const type = typeof arg const typeName = getTypeName(arg) const isDate = isObjectTypeName(typeName, 'Date') const isRegex = isObjectTypeName(typeName, 'RegExp') const isPlainObject = isObjectTypeName(typeName, 'Object') let result: any let index: any if (OBJECT(arg) === arg && !isDate && !isRegex) { // Object/function, not null/date/regexp. Use WeakMap to store the id first. // If it's already hashed, directly return the result. result = table.get(arg) if (result) return result // Store the hash first for circular reference detection before entering the // recursive `stableHash` calls. // For other objects like set and map, we use this id directly as the hash. result = ++counter + '~' table.set(arg, result) if (Array.isArray(arg)) { // Array. result = '@' for (index = 0; index < arg.length; index++) { result += stableHash(arg[index]) + ',' } table.set(arg, result) } if (isPlainObject) { // Object, sort keys. result = '#' const keys = OBJECT.keys(arg).sort() while (!isUndefined((index = keys.pop() as string))) { if (!isUndefined(arg[index])) { result += index + ':' + stableHash(arg[index]) + ',' } } table.set(arg, result) } } else { result = isDate ? arg.toJSON() : type == 'symbol' ? arg.toString() : type == 'string' ? JSON.stringify(arg) : '' + arg } return result } ================================================ FILE: src/_internal/utils/helper.ts ================================================ import type { Cache, State, GlobalState } from '../types' import { SWRGlobalState } from './global-state' import { isUndefined, mergeObjects } from './shared' const EMPTY_CACHE = {} const INITIAL_CACHE: Record = {} const STR_UNDEFINED = 'undefined' // NOTE: Use the function to guarantee it's re-evaluated between jsdom and node runtime for tests. export const isWindowDefined = typeof window != STR_UNDEFINED export const isDocumentDefined = typeof document != STR_UNDEFINED export const isLegacyDeno = isWindowDefined && 'Deno' in window export const hasRequestAnimationFrame = () => isWindowDefined && typeof window['requestAnimationFrame'] != STR_UNDEFINED export const createCacheHelper = >( cache: Cache, key: string | undefined ) => { const state = SWRGlobalState.get(cache) as GlobalState return [ // Getter () => ((!isUndefined(key) && cache.get(key)) || EMPTY_CACHE) as T, // Setter (info: T) => { if (!isUndefined(key)) { const prev = cache.get(key) // Before writing to the store, we keep the value in the initial cache // if it's not there yet. if (!(key in INITIAL_CACHE)) { INITIAL_CACHE[key] = prev } state[5](key, mergeObjects(prev, info), prev || EMPTY_CACHE) } }, // Subscriber state[6], // Get server cache snapshot () => { if (!isUndefined(key)) { // If the cache was updated on the client, we return the stored initial value. if (key in INITIAL_CACHE) return INITIAL_CACHE[key] } // If we haven't done any client-side updates, we return the current value. return ((!isUndefined(key) && cache.get(key)) || EMPTY_CACHE) as T } ] as const } // export { UNDEFINED, OBJECT, isUndefined, isFunction, mergeObjects, isPromiseLike } ================================================ FILE: src/_internal/utils/merge-config.ts ================================================ import { mergeObjects } from './shared' import type { FullConfiguration } from '../types' export const mergeConfigs = ( a: Partial, b?: Partial ) => { // Need to create a new object to avoid mutating the original here. const v: Partial = mergeObjects(a, b) // If two configs are provided, merge their `use` and `fallback` options. if (b) { const { use: u1, fallback: f1 } = a const { use: u2, fallback: f2 } = b if (u1 && u2) { v.use = u1.concat(u2) } if (f1 && f2) { v.fallback = mergeObjects(f1, f2) } } return v } ================================================ FILE: src/_internal/utils/middleware-preset.ts ================================================ import { use as devtoolsUse } from './devtools' import { middleware as preload } from './preload' export const BUILT_IN_MIDDLEWARE = devtoolsUse.concat(preload) ================================================ FILE: src/_internal/utils/mutate.ts ================================================ import { serialize } from './serialize' import { createCacheHelper } from './helper' import { isFunction, isUndefined, UNDEFINED, mergeObjects, isPromiseLike } from './shared' import { SWRGlobalState } from './global-state' import { getTimestamp } from './timestamp' import * as revalidateEvents from '../events' import type { Cache, MutatorCallback, MutatorOptions, GlobalState, State, Arguments, Key } from '../types' type KeyFilter = (key?: Arguments) => boolean type MutateState = State & { // The previously committed data. _c?: Data } export async function internalMutate( cache: Cache, _key: KeyFilter, _data?: Data | Promise | MutatorCallback, _opts?: boolean | MutatorOptions ): Promise> export async function internalMutate( cache: Cache, _key: Arguments, _data?: Data | Promise | MutatorCallback, _opts?: boolean | MutatorOptions ): Promise export async function internalMutate( ...args: [ cache: Cache, _key: KeyFilter | Arguments, _data?: Data | Promise | MutatorCallback, _opts?: boolean | MutatorOptions ] ): Promise { const [cache, _key, _data, _opts] = args // When passing as a boolean, it's explicitly used to disable/enable // revalidation. const options = mergeObjects( { populateCache: true, throwOnError: true }, typeof _opts === 'boolean' ? { revalidate: _opts } : _opts || {} ) let populateCache = options.populateCache const rollbackOnErrorOption = options.rollbackOnError let optimisticData = options.optimisticData const rollbackOnError = (error: unknown): boolean => { return typeof rollbackOnErrorOption === 'function' ? rollbackOnErrorOption(error) : rollbackOnErrorOption !== false } const throwOnError = options.throwOnError // If the second argument is a key filter, return the mutation results for all // filtered keys. if (isFunction(_key)) { const keyFilter = _key const matchedKeys: Key[] = [] const it = cache.keys() for (const key of it) { if ( // Skip the special useSWRInfinite and useSWRSubscription keys. !/^\$(inf|sub)\$/.test(key) && keyFilter((cache.get(key) as { _k: Arguments })._k) ) { matchedKeys.push(key) } } return Promise.all(matchedKeys.map(mutateByKey)) } return mutateByKey(_key) async function mutateByKey(_k: Key): Promise { // Serialize key const [key] = serialize(_k) if (!key) return const [get, set] = createCacheHelper>(cache, key) const [EVENT_REVALIDATORS, MUTATION, FETCH, PRELOAD] = SWRGlobalState.get( cache ) as GlobalState const startRevalidate = () => { const revalidators = EVENT_REVALIDATORS[key] const revalidate = isFunction(options.revalidate) ? options.revalidate(get().data, _k) : options.revalidate !== false if (revalidate) { // Invalidate the key by deleting the concurrent request markers so new // requests will not be deduped. delete FETCH[key] delete PRELOAD[key] if (revalidators && revalidators[0]) { return revalidators[0](revalidateEvents.MUTATE_EVENT).then( () => get().data ) } } return get().data } // If there is no new data provided, revalidate the key with current state. if (args.length < 3) { // Revalidate and broadcast state. return startRevalidate() } let data: any = _data let error: unknown let isError = false // Update global timestamps. const beforeMutationTs = getTimestamp() MUTATION[key] = [beforeMutationTs, 0] const hasOptimisticData = !isUndefined(optimisticData) const state = get() // `displayedData` is the current value on screen. It could be the optimistic value // that is going to be overridden by a `committedData`, or get reverted back. // `committedData` is the validated value that comes from a fetch or mutation. const displayedData = state.data const currentData = state._c const committedData = isUndefined(currentData) ? displayedData : currentData // Do optimistic data update. if (hasOptimisticData) { optimisticData = isFunction(optimisticData) ? optimisticData(committedData, displayedData) : optimisticData // When we set optimistic data, backup the current committedData data in `_c`. set({ data: optimisticData, _c: committedData }) } if (isFunction(data)) { // `data` is a function, call it passing current cache value. try { data = (data as MutatorCallback)(committedData) } catch (err) { // If it throws an error synchronously, we shouldn't update the cache. error = err isError = true } } // `data` is a promise/thenable, resolve the final data first. if (data && isPromiseLike(data)) { // This means that the mutation is async, we need to check timestamps to // avoid race conditions. data = await (data as Promise).catch(err => { error = err isError = true }) // Check if other mutations have occurred since we've started this mutation. // If there's a race we don't update cache or broadcast the change, // just return the data. if (beforeMutationTs !== MUTATION[key][0]) { if (isError) throw error return data } else if (isError && hasOptimisticData && rollbackOnError(error)) { // Rollback. Always populate the cache in this case but without // transforming the data. populateCache = true // Reset data to be the latest committed data, and clear the `_c` value. set({ data: committedData, _c: UNDEFINED }) } } // If we should write back the cache after request. if (populateCache) { if (!isError) { // Transform the result into data. if (isFunction(populateCache)) { const populateCachedData = populateCache(data, committedData) set({ data: populateCachedData, error: UNDEFINED, _c: UNDEFINED }) } else { // Only update cached data and reset the error if there's no error. Data can be `undefined` here. set({ data, error: UNDEFINED, _c: UNDEFINED }) } } } // Reset the timestamp to mark the mutation has ended. MUTATION[key][1] = getTimestamp() // Update existing SWR Hooks' internal states: Promise.resolve(startRevalidate()).then(() => { // The mutation and revalidation are ended, we can clear it since the data is // not an optimistic value anymore. set({ _c: UNDEFINED }) }) // Throw error or return data if (isError) { if (throwOnError) throw error return } return data } } ================================================ FILE: src/_internal/utils/normalize-args.ts ================================================ import { isFunction } from './shared' import type { Key, Fetcher, SWRConfiguration } from '../types' export const normalize = ( args: | [KeyType] | [KeyType, Fetcher | null] | [KeyType, SWRConfiguration | undefined] | [KeyType, Fetcher | null, SWRConfiguration | undefined] ): [KeyType, Fetcher | null, Partial>] => { return isFunction(args[1]) ? [args[0], args[1], args[2] || {}] : [args[0], null, (args[1] === null ? args[2] : args[1]) || {}] } ================================================ FILE: src/_internal/utils/preload.ts ================================================ import type { Middleware, Key, BareFetcher, GlobalState, FetcherResponse } from '../types' import { serialize } from './serialize' import { cache } from './config' import { SWRGlobalState } from './global-state' import { isUndefined } from './shared' import { INFINITE_PREFIX } from '../constants' import { IS_SERVER } from './env' // Basically same as Fetcher but without Conditional Fetching type PreloadFetcher< Data = unknown, SWRKey extends Key = Key > = SWRKey extends () => infer Arg ? (arg: Arg) => FetcherResponse : SWRKey extends infer Arg ? (arg: Arg) => FetcherResponse : never export const preload = < Data = any, SWRKey extends Key = Key, Fetcher extends BareFetcher = PreloadFetcher >( key_: SWRKey, fetcher: Fetcher ): ReturnType => { // preload should be a no-op on the server if (IS_SERVER) { return undefined as ReturnType } const [key, fnArg] = serialize(key_) const [, , , PRELOAD] = SWRGlobalState.get(cache) as GlobalState // Prevent preload to be called multiple times before used. if (PRELOAD[key]) return PRELOAD[key] const req = fetcher(fnArg) as ReturnType PRELOAD[key] = req return req } export const middleware: Middleware = useSWRNext => (key_, fetcher_, config) => { // fetcher might be a sync function, so this should not be an async function const fetcher = fetcher_ && ((...args: any[]) => { const [key] = serialize(key_) const [, , , PRELOAD] = SWRGlobalState.get(cache) as GlobalState if (key.startsWith(INFINITE_PREFIX)) { // we want the infinite fetcher to be called. // handling of the PRELOAD cache happens there. return fetcher_(...args) } const req = PRELOAD[key] if (isUndefined(req)) return fetcher_(...args) delete PRELOAD[key] return req }) return useSWRNext(key_, fetcher, config) } ================================================ FILE: src/_internal/utils/resolve-args.ts ================================================ import { mergeConfigs } from './merge-config' import { normalize } from './normalize-args' import { useSWRConfig } from './use-swr-config' import { BUILT_IN_MIDDLEWARE } from './middleware-preset' // It's tricky to pass generic types as parameters, so we just directly override // the types here. export const withArgs = (hook: any) => { return function useSWRArgs(...args: any) { // Get the default and inherited configuration. const fallbackConfig = useSWRConfig() // Normalize arguments. const [key, fn, _config] = normalize(args) // Merge configurations. const config = mergeConfigs(fallbackConfig, _config) // Apply middleware let next = hook const { use } = config const middleware = (use || []).concat(BUILT_IN_MIDDLEWARE) for (let i = middleware.length; i--; ) { next = middleware[i](next) } return next(key, fn || config.fetcher || null, config) } as unknown as SWRType } ================================================ FILE: src/_internal/utils/serialize.ts ================================================ import { stableHash } from './hash' import { isFunction } from './shared' import type { Key, Arguments } from '../types' export const serialize = (key: Key): [string, Arguments] => { if (isFunction(key)) { try { key = key() } catch (err) { // dependencies not ready key = '' } } // Use the original key as the argument of fetcher. This can be a string or an // array of values. const args = key // If key is not falsy, or not an empty array, hash it. key = typeof key == 'string' ? key : (Array.isArray(key) ? key.length : key) ? stableHash(key) : '' return [key, args] } ================================================ FILE: src/_internal/utils/shared.ts ================================================ // Shared state between server components and client components export const noop = () => {} // Using noop() as the undefined value as undefined can be replaced // by something else. Prettier ignore and extra parentheses are necessary here // to ensure that tsc doesn't remove the __NOINLINE__ comment. // prettier-ignore export const UNDEFINED = (/*#__NOINLINE__*/ noop()) as undefined export const OBJECT = Object export const isUndefined = (v: any): v is undefined => v === UNDEFINED export const isFunction = < T extends (...args: any[]) => any = (...args: any[]) => any >( v: unknown ): v is T => typeof v == 'function' export const mergeObjects = (a: any, b?: any) => ({ ...a, ...b }) export const isPromiseLike = (x: unknown): x is PromiseLike => isFunction((x as any).then) ================================================ FILE: src/_internal/utils/subscribe-key.ts ================================================ type Callback = (...args: any[]) => any // Add a callback function to a list of keyed callback functions and return // the unsubscribe function. export const subscribeCallback = ( key: string, callbacks: Record, callback: Callback ) => { const keyedRevalidators = callbacks[key] || (callbacks[key] = []) keyedRevalidators.push(callback) return () => { const index = keyedRevalidators.indexOf(callback) if (index >= 0) { // O(1): faster than splice keyedRevalidators[index] = keyedRevalidators[keyedRevalidators.length - 1] keyedRevalidators.pop() } } } ================================================ FILE: src/_internal/utils/timestamp.ts ================================================ // Global timestamp. let __timestamp = 0 export const getTimestamp = () => ++__timestamp ================================================ FILE: src/_internal/utils/use-swr-config.ts ================================================ import { useContext, useMemo } from 'react' import { defaultConfig } from './config' import { SWRConfigContext } from './config-context' import { mergeObjects } from './shared' import type { FullConfiguration } from '../types' export const useSWRConfig = (): FullConfiguration => { const parentConfig = useContext(SWRConfigContext) const mergedConfig = useMemo( () => mergeObjects(defaultConfig, parentConfig), [parentConfig] ) return mergedConfig } ================================================ FILE: src/_internal/utils/web-preset.ts ================================================ import type { ProviderConfiguration } from '../types' import { isWindowDefined, isDocumentDefined } from './helper' import { isUndefined, noop } from './shared' /** * Due to the bug https://bugs.chromium.org/p/chromium/issues/detail?id=678075, * it's not reliable to detect if the browser is currently online or offline * based on `navigator.onLine`. * As a workaround, we always assume it's online on the first load, and change * the status upon `online` or `offline` events. */ let online = true const isOnline = () => online // For node and React Native, `add/removeEventListener` doesn't exist on window. const [onWindowEvent, offWindowEvent] = isWindowDefined && window.addEventListener ? [ window.addEventListener.bind(window), window.removeEventListener.bind(window) ] : [noop, noop] const isVisible = () => { const visibilityState = isDocumentDefined && document.visibilityState return isUndefined(visibilityState) || visibilityState !== 'hidden' } const initFocus = (callback: () => void) => { // focus revalidate if (isDocumentDefined) { document.addEventListener('visibilitychange', callback) } onWindowEvent('focus', callback) return () => { if (isDocumentDefined) { document.removeEventListener('visibilitychange', callback) } offWindowEvent('focus', callback) } } const initReconnect = (callback: () => void) => { // revalidate on reconnected const onOnline = () => { online = true callback() } // nothing to revalidate, just update the status const onOffline = () => { online = false } onWindowEvent('online', onOnline) onWindowEvent('offline', onOffline) return () => { offWindowEvent('online', onOnline) offWindowEvent('offline', onOffline) } } export const preset = { isOnline, isVisible } as const export const defaultConfigOptions: ProviderConfiguration = { initFocus, initReconnect } ================================================ FILE: src/_internal/utils/with-middleware.ts ================================================ import { normalize } from './normalize-args' import type { Key, Fetcher, Middleware, SWRConfiguration, SWRHook } from '../types' // Create a custom hook with a middleware export const withMiddleware = ( useSWR: SWRHook, middleware: Middleware ): SWRHook => { return ( ...args: | [Key] | [Key, Fetcher | null] | [Key, SWRConfiguration | undefined] | [Key, Fetcher | null, SWRConfiguration | undefined] ) => { const [key, fn, config] = normalize(args) const uses = (config.use || []).concat(middleware) return useSWR(key, fn, { ...config, use: uses }) } } ================================================ FILE: src/immutable/index.ts ================================================ import type { Middleware } from '../index' import useSWR from '../index' import { withMiddleware } from '../_internal' export const immutable: Middleware = useSWRNext => (key, fetcher, config) => { // Always override all revalidate options. config.revalidateOnFocus = false config.revalidateIfStale = false config.revalidateOnReconnect = false config.refreshInterval = 0 return useSWRNext(key, fetcher, config) } const useSWRImmutable = withMiddleware(useSWR, immutable) export default useSWRImmutable ================================================ FILE: src/index/config.ts ================================================ 'use client' // TODO: fix SWRConfig re-use issue with bundler import { SWRConfig as S } from '../_internal' export const SWRConfig = S ================================================ FILE: src/index/index.react-server.ts ================================================ export { unstable_serialize } from './serialize' export { SWRConfig } from './config' ================================================ FILE: src/index/index.ts ================================================ // useSWR import useSWR from './use-swr' export default useSWR // Core APIs export { SWRConfig } from './use-swr' export { unstable_serialize } from './serialize' export { useSWRConfig } from '../_internal' export { mutate } from '../_internal' export { preload } from '../_internal' // Config // eslint-disable-next-line @typescript-eslint/no-empty-object-type export interface SWRGlobalConfig { // suspense: true } // Types export type { SWRConfiguration, Revalidator, RevalidatorOptions, Key, KeyLoader, KeyedMutator, SWRHook, SWRResponse, Cache, BareFetcher, Fetcher, MutatorCallback, MutatorOptions, Middleware, Arguments, State, ScopedMutator } from '../_internal' ================================================ FILE: src/index/serialize.ts ================================================ import type { Key } from '../_internal' import { serialize } from '../_internal/utils/serialize' export const unstable_serialize = (key: Key) => serialize(key)[0] ================================================ FILE: src/index/use-swr.ts ================================================ /// import React, { useCallback, useRef, useDebugValue, useMemo } from 'react' import { useSyncExternalStore } from 'use-sync-external-store/shim' import { defaultConfig, IS_REACT_LEGACY, IS_SERVER, rAF, useIsomorphicLayoutEffect, SWRGlobalState, serialize, isUndefined, UNDEFINED, OBJECT, isFunction, createCacheHelper, SWRConfig as ConfigProvider, withArgs, subscribeCallback, getTimestamp, internalMutate, revalidateEvents, mergeObjects, isPromiseLike, noop } from '../_internal' import type { State, Fetcher, Key, SWRResponse, RevalidatorOptions, FullConfiguration, SWRConfiguration, SWRHook, RevalidateEvent, StateDependencies, GlobalState } from '../_internal' const use = React.use || // This extra generic is to avoid TypeScript mixing up the generic and JSX sytax // and emitting an error. // We assume that this is only for the `use(thenable)` case, not `use(context)`. // https://github.com/facebook/react/blob/aed00dacfb79d17c53218404c52b1c7aa59c4a89/packages/react-server/src/ReactFizzThenable.js#L45 (( thenable: Promise & { status?: 'pending' | 'fulfilled' | 'rejected' value?: T reason?: unknown } ): T => { switch (thenable.status) { case 'pending': throw thenable case 'fulfilled': return thenable.value as T case 'rejected': throw thenable.reason default: thenable.status = 'pending' thenable.then( v => { thenable.status = 'fulfilled' thenable.value = v }, e => { thenable.status = 'rejected' thenable.reason = e } ) throw thenable } }) const WITH_DEDUPE = { dedupe: true } type DefinitelyTruthy = false extends T ? never : 0 extends T ? never : '' extends T ? never : null extends T ? never : undefined extends T ? never : T const resolvedUndef = Promise.resolve(UNDEFINED) const sub = () => noop /** * The core implementation of the useSWR hook. * * This is the main handler function that implements all SWR functionality including * data fetching, caching, revalidation, error handling, and state management. * It manages the complete lifecycle of SWR requests from initialization through * cleanup. * * Key responsibilities: * - Key serialization and normalization * - Cache state management and synchronization * - Automatic and manual revalidation * - Error handling and retry logic * - Suspense integration * - Loading state management * - Effect cleanup and memory management * * @template Data - The type of data returned by the fetcher * @template Error - The type of error that can be thrown * * @param _key - The SWR key (string, array, object, function, or falsy) * @param fetcher - The fetcher function to retrieve data, or null to disable fetching * @param config - Complete SWR configuration object with both public and internal options * * @returns SWRResponse object containing data, error, mutate function, and loading states * * @internal This is the internal implementation. Use `useSWR` instead. */ export const useSWRHandler = ( _key: Key, fetcher: Fetcher | null, config: FullConfiguration & SWRConfiguration ) => { const { cache, compare, suspense, fallbackData, revalidateOnMount, revalidateIfStale, refreshInterval, refreshWhenHidden, refreshWhenOffline, keepPreviousData, strictServerPrefetchWarning } = config const [EVENT_REVALIDATORS, MUTATION, FETCH, PRELOAD] = SWRGlobalState.get( cache ) as GlobalState // `key` is the identifier of the SWR internal state, // `fnArg` is the argument/arguments parsed from the key, which will be passed // to the fetcher. // All of them are derived from `_key`. const [key, fnArg] = serialize(_key) // If it's the initial render of this hook. const initialMountedRef = useRef(false) // If the hook is unmounted already. This will be used to prevent some effects // to be called after unmounting. const unmountedRef = useRef(false) // Refs to keep the key and config. const keyRef = useRef(key) const fetcherRef = useRef(fetcher) const configRef = useRef(config) const getConfig = () => configRef.current const isActive = () => getConfig().isVisible() && getConfig().isOnline() const [getCache, setCache, subscribeCache, getInitialCache] = createCacheHelper< Data, State & { // The original key arguments. _k?: Key } >(cache, key) const stateDependencies = useRef({}).current // Resolve the fallback data from either the inline option, or the global provider. // If it's a promise, we simply let React suspend and resolve it for us. const fallback = isUndefined(fallbackData) ? isUndefined(config.fallback) ? UNDEFINED : config.fallback[key] : fallbackData const isEqual = (prev: State, current: State) => { for (const _ in stateDependencies) { const t = _ as keyof StateDependencies if (t === 'data') { if (!compare(prev[t], current[t])) { if (!isUndefined(prev[t])) { return false } if (!compare(returnedData, current[t])) { return false } } } else { if (current[t] !== prev[t]) { return false } } } return true } const isInitialMount = !initialMountedRef.current const getSnapshot = useMemo(() => { const cachedData = getCache() const initialData = getInitialCache() const getSelectedCache = (state: ReturnType) => { // We only select the needed fields from the state. const snapshot = mergeObjects(state) delete snapshot._k const shouldStartRequest = (() => { if (!key) return false if (!fetcher) return false // If it's paused, we skip revalidation. if (getConfig().isPaused()) return false // If `revalidateOnMount` is set, we take the value directly. if (isInitialMount && !isUndefined(revalidateOnMount)) return revalidateOnMount const data = !isUndefined(fallback) ? fallback : snapshot.data if (suspense) return isUndefined(data) || revalidateIfStale return isUndefined(data) || revalidateIfStale })() if (!shouldStartRequest) { return snapshot } return { isValidating: true, isLoading: true, ...snapshot } } const clientSnapshot = getSelectedCache(cachedData) const serverSnapshot = cachedData === initialData ? clientSnapshot : getSelectedCache(initialData) // To make sure that we are returning the same object reference to avoid // unnecessary re-renders, we keep the previous snapshot and use deep // comparison to check if we need to return a new one. let memorizedSnapshot = clientSnapshot return [ () => { const newSnapshot = getSelectedCache(getCache()) const compareResult = isEqual(newSnapshot, memorizedSnapshot) if (compareResult) { // Mentally, we should always return the `memorizedSnapshot` here // as there's no change between the new and old snapshots. // However, since the `isEqual` function only compares selected fields, // the values of the unselected fields might be changed. That's // simply because we didn't track them. // To support the case in https://github.com/vercel/swr/pull/2576, // we need to update these fields in the `memorizedSnapshot` too // with direct mutations to ensure the snapshot is always up-to-date // even for the unselected fields, but only trigger re-renders when // the selected fields are changed. memorizedSnapshot.data = newSnapshot.data memorizedSnapshot.isLoading = newSnapshot.isLoading memorizedSnapshot.isValidating = newSnapshot.isValidating memorizedSnapshot.error = newSnapshot.error return memorizedSnapshot } else { memorizedSnapshot = newSnapshot return newSnapshot } }, () => serverSnapshot ] // eslint-disable-next-line react-hooks/exhaustive-deps }, [cache, key]) // Get the current state that SWR should return. const cached = useSyncExternalStore( useCallback( (callback: () => void) => subscribeCache( key, (current: State, prev: State) => { if (!isEqual(prev, current)) callback() } ), // eslint-disable-next-line react-hooks/exhaustive-deps [cache, key] ), getSnapshot[0], getSnapshot[1] ) const hasRevalidator = EVENT_REVALIDATORS[key] && EVENT_REVALIDATORS[key].length > 0 const cachedData = cached.data const data = isUndefined(cachedData) ? fallback && isPromiseLike(fallback) ? use(fallback) : fallback : cachedData const error = cached.error // Use a ref to store previously returned data. Use the initial data as its initial value. const laggyDataRef = useRef(data) const returnedData = keepPreviousData ? isUndefined(cachedData) ? // checking undefined to avoid null being fallback as well isUndefined(laggyDataRef.current) ? data : laggyDataRef.current : cachedData : data const hasKeyButNoData = key && isUndefined(data) const hydrationRef = useRef(null) // Note: the conditionally hook call is fine because the environment // `IS_SERVER` never changes. // @ts-expect-error -- use hydrationRef directly const _ = !IS_SERVER && // getServerSnapshot is only called during hydration // eslint-disable-next-line react-hooks/rules-of-hooks useSyncExternalStore( sub, () => { hydrationRef.current = false return hydrationRef }, () => { hydrationRef.current = true return hydrationRef } ) const isHydration = hydrationRef.current // During the initial SSR render, warn if the key has no data pre-fetched via: // - fallback data // - preload calls // - initial data from the cache provider // We only warn once for each key during Hydration. if ( strictServerPrefetchWarning && isHydration && !suspense && hasKeyButNoData ) { console.warn( `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.` ) } // Resolve the default validating state: // If it's able to validate, and it should revalidate when mount, this will be true. // - Suspense mode and there's stale data for the initial render. // - Not suspense mode and there is no fallback data and `revalidateIfStale` is enabled. // - `revalidateIfStale` is enabled but `data` is not defined. const shouldDoInitialRevalidation = (() => { if (!key || !fetcher) return false // If it's paused, we skip revalidation. if (getConfig().isPaused()) return false // if a key already has revalidators and also has error, we should not trigger revalidation if (hasRevalidator && !isUndefined(error)) return false // If `revalidateOnMount` is set, we take the value directly. if (isInitialMount && !isUndefined(revalidateOnMount)) return revalidateOnMount // Under suspense mode, it will always fetch on render if there is no // stale data so no need to revalidate immediately mount it again. // If data exists, only revalidate if `revalidateIfStale` is true. if (suspense) return isUndefined(data) ? false : revalidateIfStale // If there is no stale data, we need to revalidate when mount; // If `revalidateIfStale` is set to true, we will always revalidate. return isUndefined(data) || revalidateIfStale })() const defaultValidatingState = isInitialMount && shouldDoInitialRevalidation const isValidating = isUndefined(cached.isValidating) ? defaultValidatingState : cached.isValidating const isLoading = isUndefined(cached.isLoading) ? defaultValidatingState : cached.isLoading // The revalidation function is a carefully crafted wrapper of the original // `fetcher`, to correctly handle the many edge cases. const revalidate = useCallback( async (revalidateOpts?: RevalidatorOptions): Promise => { const currentFetcher = fetcherRef.current if ( !key || !currentFetcher || unmountedRef.current || getConfig().isPaused() ) { return false } let newData: Data let startAt: number let loading = true const opts = revalidateOpts || {} // If there is no ongoing concurrent request, or `dedupe` is not set, a // new request should be initiated. const shouldStartNewRequest = !FETCH[key] || !opts.dedupe /* For React 17 Do unmount check for calls: If key has changed during the revalidation, or the component has been unmounted, old dispatch and old event callbacks should not take any effect For React 18 only check if key has changed https://github.com/reactwg/react-18/discussions/82 */ const callbackSafeguard = () => { if (IS_REACT_LEGACY) { return ( !unmountedRef.current && key === keyRef.current && initialMountedRef.current ) } return key === keyRef.current } // The final state object when the request finishes. const finalState: State = { isValidating: false, isLoading: false } const finishRequestAndUpdateState = () => { setCache(finalState) } const cleanupState = () => { // Check if it's still the same request before deleting it. const requestInfo = FETCH[key] if (requestInfo && requestInfo[1] === startAt) { delete FETCH[key] } } // Start fetching. Change the `isValidating` state, update the cache. const initialState: State = { isValidating: true } // It is in the `isLoading` state, if and only if there is no cached data. // This bypasses fallback data and laggy data. if (isUndefined(getCache().data)) { initialState.isLoading = true } try { if (shouldStartNewRequest) { setCache(initialState) // If no cache is being rendered currently (it shows a blank page), // we trigger the loading slow event. if (config.loadingTimeout && isUndefined(getCache().data)) { setTimeout(() => { if (loading && callbackSafeguard()) { getConfig().onLoadingSlow(key, config) } }, config.loadingTimeout) } // Start the request and save the timestamp. // Key must be truthy if entering here. FETCH[key] = [ currentFetcher(fnArg as DefinitelyTruthy), getTimestamp() ] } // Wait until the ongoing request is done. Deduplication is also // considered here. ;[newData, startAt] = FETCH[key] newData = await newData if (shouldStartNewRequest) { // If the request isn't interrupted, clean it up after the // deduplication interval. setTimeout(cleanupState, config.dedupingInterval) } // If there're other ongoing request(s), started after the current one, // we need to ignore the current one to avoid possible race conditions: // req1------------------>res1 (current one) // req2---------------->res2 // the request that fired later will always be kept. // The timestamp maybe be `undefined` or a number if (!FETCH[key] || FETCH[key][1] !== startAt) { if (shouldStartNewRequest) { if (callbackSafeguard()) { getConfig().onDiscarded(key) } } return false } // Clear error. finalState.error = UNDEFINED // If there're other mutations(s), that overlapped with the current revalidation: // case 1: // req------------------>res // mutate------>end // case 2: // req------------>res // mutate------>end // case 3: // req------------------>res // mutate-------...----------> // we have to ignore the revalidation result (res) because it's no longer fresh. // meanwhile, a new revalidation should be triggered when the mutation ends. const mutationInfo = MUTATION[key] if ( !isUndefined(mutationInfo) && // case 1 (startAt <= mutationInfo[0] || // case 2 startAt <= mutationInfo[1] || // case 3 mutationInfo[1] === 0) ) { finishRequestAndUpdateState() if (shouldStartNewRequest) { if (callbackSafeguard()) { getConfig().onDiscarded(key) } } return false } // Deep compare with the latest state to avoid extra re-renders. // For local state, compare and assign. const cacheData = getCache().data // Since the compare fn could be custom fn // cacheData might be different from newData even when compare fn returns True finalState.data = compare(cacheData, newData) ? cacheData : newData // Trigger the successful callback if it's the original request. if (shouldStartNewRequest) { if (callbackSafeguard()) { getConfig().onSuccess(newData, key, config) } } } catch (err: any) { cleanupState() const currentConfig = getConfig() const { shouldRetryOnError } = currentConfig // Not paused, we continue handling the error. Otherwise, discard it. if (!currentConfig.isPaused()) { // Get a new error, don't use deep comparison for errors. finalState.error = err as Error // Error event and retry logic. Only for the actual request, not // deduped ones. if (shouldStartNewRequest && callbackSafeguard()) { currentConfig.onError(err, key, currentConfig) if ( shouldRetryOnError === true || (isFunction(shouldRetryOnError) && shouldRetryOnError(err as Error)) ) { if ( !getConfig().revalidateOnFocus || !getConfig().revalidateOnReconnect || isActive() ) { // If it's inactive, stop. It will auto-revalidate when // refocusing or reconnecting. // When retrying, deduplication is always enabled. currentConfig.onErrorRetry( err, key, currentConfig, _opts => { const revalidators = EVENT_REVALIDATORS[key] if (revalidators && revalidators[0]) { revalidators[0]( revalidateEvents.ERROR_REVALIDATE_EVENT, _opts ) } }, { retryCount: (opts.retryCount || 0) + 1, dedupe: true } ) } } } } } // Mark loading as stopped. loading = false // Update the current hook's state. finishRequestAndUpdateState() return true }, // `setState` is immutable, and `eventsCallback`, `fnArg`, and // `keyValidating` are depending on `key`, so we can exclude them from // the deps array. // // FIXME: // `fn` and `config` might be changed during the lifecycle, // but they might be changed every render like this. // `useSWR('key', () => fetch('/api/'), { suspense: true })` // So we omit the values from the deps array // even though it might cause unexpected behaviors. // eslint-disable-next-line react-hooks/exhaustive-deps [key, cache] ) // Similar to the global mutate but bound to the current cache and key. // `cache` isn't allowed to change during the lifecycle. const boundMutate: SWRResponse['mutate'] = useCallback( // Use callback to make sure `keyRef.current` returns latest result every time (...args: any[]) => { return internalMutate(cache, keyRef.current, ...args) }, // eslint-disable-next-line react-hooks/exhaustive-deps [] ) // The logic for updating refs. useIsomorphicLayoutEffect(() => { fetcherRef.current = fetcher configRef.current = config // Handle laggy data updates. If there's cached data of the current key, // it'll be the correct reference. if (!isUndefined(cachedData)) { laggyDataRef.current = cachedData } }) // After mounted or key changed. useIsomorphicLayoutEffect(() => { if (!key) return const softRevalidate = revalidate.bind(UNDEFINED, WITH_DEDUPE) let nextFocusRevalidatedAt = 0 if (getConfig().revalidateOnFocus) { const initNow = Date.now() nextFocusRevalidatedAt = initNow + getConfig().focusThrottleInterval } // Expose revalidators to global event listeners. So we can trigger // revalidation from the outside. const onRevalidate = ( type: RevalidateEvent, opts: { retryCount?: number dedupe?: boolean } = {} ) => { if (type == revalidateEvents.FOCUS_EVENT) { const now = Date.now() if ( getConfig().revalidateOnFocus && now > nextFocusRevalidatedAt && isActive() ) { nextFocusRevalidatedAt = now + getConfig().focusThrottleInterval softRevalidate() } } else if (type == revalidateEvents.RECONNECT_EVENT) { if (getConfig().revalidateOnReconnect && isActive()) { softRevalidate() } } else if (type == revalidateEvents.MUTATE_EVENT) { return revalidate() } else if (type == revalidateEvents.ERROR_REVALIDATE_EVENT) { return revalidate(opts) } return } const unsubEvents = subscribeCallback(key, EVENT_REVALIDATORS, onRevalidate) // Mark the component as mounted and update corresponding refs. unmountedRef.current = false keyRef.current = key initialMountedRef.current = true // Keep the original key in the cache. setCache({ _k: fnArg }) // Trigger a revalidation if (shouldDoInitialRevalidation) { // Performance optimization: if a request is already in progress for this key, // skip the revalidation to avoid redundant work if (!FETCH[key]) { if (isUndefined(data) || IS_SERVER) { // Revalidate immediately. softRevalidate() } else { // Delay the revalidate if we have data to return so we won't block // rendering. rAF(softRevalidate) } } } return () => { // Mark it as unmounted. unmountedRef.current = true unsubEvents() } }, [key]) // Polling useIsomorphicLayoutEffect(() => { let timer: any function next() { // Use the passed interval // ...or invoke the function with the updated data to get the interval const interval = isFunction(refreshInterval) ? refreshInterval(getCache().data) : refreshInterval // We only start the next interval if `refreshInterval` is not 0, and: // - `force` is true, which is the start of polling // - or `timer` is not 0, which means the effect wasn't canceled if (interval && timer !== -1) { timer = setTimeout(execute, interval) } } function execute() { // Check if it's OK to execute: // Only revalidate when the page is visible, online, and not errored. if ( !getCache().error && (refreshWhenHidden || getConfig().isVisible()) && (refreshWhenOffline || getConfig().isOnline()) ) { revalidate(WITH_DEDUPE).then(next) } else { // Schedule the next interval to check again. next() } } next() return () => { if (timer) { clearTimeout(timer) timer = -1 } } }, [refreshInterval, refreshWhenHidden, refreshWhenOffline, key]) // Display debug info in React DevTools. useDebugValue(returnedData) // In Suspense mode, we can't return the empty `data` state. // If there is an `error`, the `error` needs to be thrown to the error boundary. // If there is no `error`, the `revalidation` promise needs to be thrown to // the suspense boundary. if (suspense) { // SWR should throw when trying to use Suspense on the server with React 18, // without providing any fallback data. This causes hydration errors. See: // https://github.com/vercel/swr/issues/1832 if (!IS_REACT_LEGACY && IS_SERVER && hasKeyButNoData) { throw new Error('Fallback data is required when using Suspense in SSR.') } // Always update fetcher and config refs even with the Suspense mode. if (hasKeyButNoData) { fetcherRef.current = fetcher configRef.current = config unmountedRef.current = false } const req = PRELOAD[key] const mutateReq = !isUndefined(req) && hasKeyButNoData ? boundMutate(req) : resolvedUndef use(mutateReq) if (!isUndefined(error) && hasKeyButNoData) { throw error } const revalidation = hasKeyButNoData ? revalidate(WITH_DEDUPE) : resolvedUndef if (!isUndefined(returnedData) && hasKeyButNoData) { // @ts-ignore modify react promise status revalidation.status = 'fulfilled' // @ts-ignore modify react promise value revalidation.value = true } use(revalidation) } const swrResponse: SWRResponse = { mutate: boundMutate, get data() { stateDependencies.data = true return returnedData }, get error() { stateDependencies.error = true return error }, get isValidating() { stateDependencies.isValidating = true return isValidating }, get isLoading() { stateDependencies.isLoading = true return isLoading } } return swrResponse } export const SWRConfig = OBJECT.defineProperty(ConfigProvider, 'defaultValue', { value: defaultConfig }) as typeof ConfigProvider & { defaultValue: FullConfiguration } export { unstable_serialize } from './serialize' /** * A hook to fetch data. * * @see {@link https://swr.vercel.app} * * @example * ```jsx * import useSWR from 'swr' * function Profile() { * const { data, error, isLoading } = useSWR('/api/user', fetcher) * if (error) return
failed to load
* if (isLoading) return
loading...
* return
hello {data.name}!
* } * ``` */ const useSWR = withArgs(useSWRHandler) export default useSWR ================================================ FILE: src/infinite/index.react-server.ts ================================================ export { unstable_serialize } from './serialize' ================================================ FILE: src/infinite/index.ts ================================================ // We have to several type castings here because `useSWRInfinite` is a special // hook where `key` and return type are not like the normal `useSWR` types. import { useRef, useCallback } from 'react' import type { SWRConfig } from '../index' import useSWR from '../index' import { isUndefined, isFunction, UNDEFINED, createCacheHelper, useIsomorphicLayoutEffect, serialize, withMiddleware, INFINITE_PREFIX, SWRGlobalState, cache as defaultCache } from '../_internal' import type { BareFetcher, SWRHook, MutatorCallback, Middleware, GlobalState } from '../_internal' import type { SWRInfiniteConfiguration, SWRInfiniteResponse, SWRInfiniteHook, SWRInfiniteKeyLoader, SWRInfiniteFetcher, SWRInfiniteCacheValue, SWRInfiniteCompareFn, SWRInfiniteKeyedMutator, SWRInfiniteMutatorOptions } from './types' import { useSyncExternalStore } from 'use-sync-external-store/shim' import { getFirstPageKey } from './serialize' const EMPTY_PROMISE = Promise.resolve() as Promise export { unstable_serialize } from './serialize' export const infinite = ((useSWRNext: SWRHook) => ( getKey: SWRInfiniteKeyLoader, fn: BareFetcher | null, config: Omit & Omit, 'fetcher'> ) => { const didMountRef = useRef(false) const { cache, initialSize = 1, revalidateAll = false, persistSize = false, revalidateFirstPage = true, revalidateOnMount = false, parallel = false } = config const [, , , PRELOAD] = SWRGlobalState.get(defaultCache) as GlobalState // The serialized key of the first page. This key will be used to store // metadata of this SWR infinite hook. let infiniteKey: string | undefined try { infiniteKey = getFirstPageKey(getKey) if (infiniteKey) infiniteKey = INFINITE_PREFIX + infiniteKey } catch (err) { // Not ready yet. } const [get, set, subscribeCache] = createCacheHelper< Data, SWRInfiniteCacheValue >(cache, infiniteKey) const getSnapshot = useCallback(() => { const size = isUndefined(get()._l) ? initialSize : get()._l return size // eslint-disable-next-line react-hooks/exhaustive-deps }, [cache, infiniteKey, initialSize]) useSyncExternalStore( useCallback( (callback: () => void) => { if (infiniteKey) return subscribeCache(infiniteKey, () => { callback() }) return () => {} }, // eslint-disable-next-line react-hooks/exhaustive-deps [cache, infiniteKey] ), getSnapshot, getSnapshot ) const resolvePageSize = useCallback((): number => { const cachedPageSize = get()._l return isUndefined(cachedPageSize) ? initialSize : cachedPageSize // `cache` isn't allowed to change during the lifecycle // eslint-disable-next-line react-hooks/exhaustive-deps }, [infiniteKey, initialSize]) // keep the last page size to restore it with the persistSize option const lastPageSizeRef = useRef(resolvePageSize()) // When the page key changes, we reset the page size if it's not persisted useIsomorphicLayoutEffect(() => { if (!didMountRef.current) { didMountRef.current = true return } if (infiniteKey) { // If the key has been changed, we keep the current page size if persistSize is enabled // Otherwise, we reset the page size to cached pageSize set({ _l: persistSize ? lastPageSizeRef.current : resolvePageSize() }) } // `initialSize` isn't allowed to change during the lifecycle }, [infiniteKey, cache]) // Needs to check didMountRef during mounting, not in the fetcher const shouldRevalidateOnMount = revalidateOnMount && !didMountRef.current // Actual SWR hook to load all pages in one fetcher. const swr = useSWRNext( infiniteKey, async key => { // get the revalidate context const forceRevalidateAll = get()._i const shouldRevalidatePage = get()._r set({ _r: UNDEFINED }) // return an array of page data const data: Data[] = [] const pageSize = resolvePageSize() const [getCache] = createCacheHelper< Data, SWRInfiniteCacheValue >(cache, key) const cacheData = getCache().data const revalidators = [] let previousPageData = null for (let i = 0; i < pageSize; ++i) { const [pageKey, pageArg] = serialize( getKey(i, parallel ? null : previousPageData) ) if (!pageKey) { // `pageKey` is falsy, stop fetching new pages. break } const [getSWRCache, setSWRCache] = createCacheHelper< Data, SWRInfiniteCacheValue >(cache, pageKey) // Get the cached page data. let pageData = getSWRCache().data as Data // should fetch (or revalidate) if: // - `revalidateAll` is enabled // - `mutate()` called // - the cache is missing // - it's the first page and it's not the initial render // - `revalidateOnMount` is enabled and it's on mount // - cache for that page has changed const shouldFetchPage = revalidateAll || forceRevalidateAll || isUndefined(pageData) || (revalidateFirstPage && !i && !isUndefined(cacheData)) || shouldRevalidateOnMount || (cacheData && !isUndefined(cacheData[i]) && !config.compare(cacheData[i], pageData)) if ( fn && (typeof shouldRevalidatePage === 'function' ? shouldRevalidatePage(pageData, pageArg) : shouldFetchPage) ) { const revalidate = async () => { const hasPreloadedRequest = pageKey in PRELOAD if (!hasPreloadedRequest) { pageData = await fn(pageArg) } else { const req = PRELOAD[pageKey] // delete the preload cache key before resolving it // in case there's an error delete PRELOAD[pageKey] // get the page data from the preload cache pageData = await req } setSWRCache({ data: pageData, _k: pageArg }) data[i] = pageData } if (parallel) { revalidators.push(revalidate) } else { await revalidate() } } else { data[i] = pageData } if (!parallel) { previousPageData = pageData } } // flush all revalidateions in parallel if (parallel) { await Promise.all(revalidators.map(r => r())) } // once we executed the data fetching based on the context, clear the context set({ _i: UNDEFINED }) // return the data return data }, config ) const mutate = useCallback( // eslint-disable-next-line func-names function ( data?: | undefined | Data[] | Promise | MutatorCallback, opts?: undefined | boolean | SWRInfiniteMutatorOptions ) { // When passing as a boolean, it's explicitly used to disable/enable // revalidation. const options = typeof opts === 'boolean' ? { revalidate: opts } : opts || {} // Default to true. const shouldRevalidate = options.revalidate !== false // It is possible that the key is still falsy. if (!infiniteKey) return EMPTY_PROMISE if (shouldRevalidate) { if (!isUndefined(data)) { // We only revalidate the pages that are changed set({ _i: false, _r: options.revalidate }) } else { // Calling `mutate()`, we revalidate all pages set({ _i: true, _r: options.revalidate }) } } return arguments.length ? swr.mutate(data, { ...options, revalidate: shouldRevalidate }) : swr.mutate() }, // swr.mutate is always the same reference // eslint-disable-next-line react-hooks/exhaustive-deps [infiniteKey, cache] ) // Extend the SWR API const setSize = useCallback( (arg: number | ((size: number) => number)) => { // It is possible that the key is still falsy. if (!infiniteKey) return EMPTY_PROMISE const [, changeSize] = createCacheHelper< Data, SWRInfiniteCacheValue >(cache, infiniteKey) let size if (isFunction(arg)) { size = arg(resolvePageSize()) } else if (typeof arg == 'number') { size = arg } if (typeof size != 'number') return EMPTY_PROMISE changeSize({ _l: size }) lastPageSizeRef.current = size // Calculate the page data after the size change. const data: Data[] = [] const [getInfiniteCache] = createCacheHelper< Data, SWRInfiniteCacheValue >(cache, infiniteKey) let previousPageData = null for (let i = 0; i < size; ++i) { const [pageKey] = serialize(getKey(i, previousPageData)) const [getCache] = createCacheHelper< Data, SWRInfiniteCacheValue >(cache, pageKey) // Get the cached page data. const pageData = pageKey ? getCache().data : UNDEFINED // Call `mutate` with infinte cache data if we can't get it from the page cache. if (isUndefined(pageData)) { return mutate(getInfiniteCache().data) } data.push(pageData) previousPageData = pageData } return mutate(data) }, // exclude getKey from the dependencies, which isn't allowed to change during the lifecycle // eslint-disable-next-line react-hooks/exhaustive-deps [infiniteKey, cache, mutate, resolvePageSize] ) // Use getter functions to avoid unnecessary re-renders caused by triggering // all the getters of the returned swr object. return { size: resolvePageSize(), setSize, mutate, get data() { return swr.data }, get error() { return swr.error }, get isValidating() { return swr.isValidating }, get isLoading() { return swr.isLoading } } }) as unknown as Middleware const useSWRInfinite = withMiddleware(useSWR, infinite) as SWRInfiniteHook export default useSWRInfinite export { SWRInfiniteConfiguration, SWRInfiniteResponse, SWRInfiniteHook, SWRInfiniteKeyLoader, SWRInfiniteFetcher, SWRInfiniteCompareFn, SWRInfiniteKeyedMutator, SWRInfiniteMutatorOptions } ================================================ FILE: src/infinite/serialize.ts ================================================ import type { SWRInfiniteKeyLoader } from './types' import { serialize } from '../_internal/utils/serialize' import { INFINITE_PREFIX } from '../_internal/constants' export const getFirstPageKey = (getKey: SWRInfiniteKeyLoader) => { return serialize(getKey ? getKey(0, null) : null)[0] } export const unstable_serialize = (getKey: SWRInfiniteKeyLoader) => { return INFINITE_PREFIX + getFirstPageKey(getKey) } ================================================ FILE: src/infinite/types.ts ================================================ import type { SWRConfiguration, SWRResponse, Arguments, BareFetcher, State, StrictTupleKey, MutatorOptions, MutatorCallback } from '../_internal' type FetcherResponse = Data | Promise export type SWRInfiniteFetcher< Data = any, KeyLoader extends SWRInfiniteKeyLoader = SWRInfiniteKeyLoader > = KeyLoader extends (...args: any[]) => any ? ReturnType extends infer T | null | false | undefined ? (args: T) => FetcherResponse : never : never export type SWRInfiniteKeyLoader< Data = any, Args extends Arguments = Arguments > = (index: number, previousPageData: Data | null) => Args export interface SWRInfiniteCompareFn { (a: Data | undefined, b: Data | undefined): boolean (a: Data[] | undefined, b: Data[] | undefined): boolean } export interface SWRInfiniteConfiguration< Data = any, Error = any, Fn extends SWRInfiniteFetcher = BareFetcher > extends Omit, 'compare'> { initialSize?: number revalidateAll?: boolean persistSize?: boolean revalidateFirstPage?: boolean parallel?: boolean fetcher?: Fn compare?: SWRInfiniteCompareFn } interface SWRInfiniteRevalidateFn { (data: Data, key: Arguments): boolean } export type SWRInfiniteKeyedMutator = ( data?: Data | Promise | MutatorCallback, opts?: boolean | SWRInfiniteMutatorOptions ) => Promise export interface SWRInfiniteMutatorOptions extends Omit, 'revalidate'> { revalidate?: | boolean | SWRInfiniteRevalidateFn } export interface SWRInfiniteResponse extends Omit, 'mutate'> { size: number setSize: ( size: number | ((_size: number) => number) ) => Promise mutate: SWRInfiniteKeyedMutator } export interface SWRInfiniteHook { < Data = any, Error = any, KeyLoader extends SWRInfiniteKeyLoader = ( index: number, previousPageData: Data | null ) => StrictTupleKey >( getKey: KeyLoader ): SWRInfiniteResponse < Data = any, Error = any, KeyLoader extends SWRInfiniteKeyLoader = ( index: number, previousPageData: Data | null ) => StrictTupleKey >( getKey: KeyLoader, fetcher: SWRInfiniteFetcher | null ): SWRInfiniteResponse < Data = any, Error = any, KeyLoader extends SWRInfiniteKeyLoader = ( index: number, previousPageData: Data | null ) => StrictTupleKey >( getKey: KeyLoader, config: | SWRInfiniteConfiguration< Data, Error, SWRInfiniteFetcher > | undefined ): SWRInfiniteResponse < Data = any, Error = any, KeyLoader extends SWRInfiniteKeyLoader = ( index: number, previousPageData: Data | null ) => StrictTupleKey >( getKey: KeyLoader, fetcher: SWRInfiniteFetcher | null, config: | SWRInfiniteConfiguration< Data, Error, SWRInfiniteFetcher > | undefined ): SWRInfiniteResponse (getKey: SWRInfiniteKeyLoader): SWRInfiniteResponse< Data, Error > ( getKey: SWRInfiniteKeyLoader, fetcher: BareFetcher | null ): SWRInfiniteResponse ( getKey: SWRInfiniteKeyLoader, config: SWRInfiniteConfiguration> | undefined ): SWRInfiniteResponse ( getKey: SWRInfiniteKeyLoader, fetcher: BareFetcher | null, config: SWRInfiniteConfiguration> | undefined ): SWRInfiniteResponse } export interface SWRInfiniteCacheValue extends State { // We use cache to pass extra info (context) to fetcher so it can be globally // shared. The key of the context data is based on the first-page key. _i?: boolean // Page size is also cached to share the page data between hooks with the // same key. _l?: number _k?: Arguments _r?: boolean | SWRInfiniteRevalidateFn } ================================================ FILE: src/mutation/index.ts ================================================ import { useCallback, useRef } from 'react' import useSWR, { useSWRConfig } from '../index' import type { Middleware, Key } from '../_internal' import { useStateWithDeps, startTransition } from './state' import { serialize, withMiddleware, useIsomorphicLayoutEffect, UNDEFINED, getTimestamp, mergeObjects } from '../_internal' import type { SWRMutationConfiguration, SWRMutationResponse, SWRMutationHook, MutationFetcher, TriggerWithArgs, TriggerWithoutArgs, TriggerWithOptionsArgs } from './types' const mutation = (() => ( key: Key, fetcher: MutationFetcher, config: SWRMutationConfiguration = {} ) => { const { mutate } = useSWRConfig() const keyRef = useRef(key) const fetcherRef = useRef(fetcher) const configRef = useRef(config) // Ditch all mutation results that happened earlier than this timestamp. const ditchMutationsUntilRef = useRef(0) const [stateRef, stateDependencies, setState] = useStateWithDeps<{ data: Data | undefined error: Error | undefined isMutating: boolean }>({ data: UNDEFINED, error: UNDEFINED, isMutating: false }) const currentState = stateRef.current const trigger = useCallback( async (arg: any, opts?: SWRMutationConfiguration) => { const [serializedKey, resolvedKey] = serialize(keyRef.current) if (!fetcherRef.current) { throw new Error('Can’t trigger the mutation: missing fetcher.') } if (!serializedKey) { throw new Error('Can’t trigger the mutation: missing key.') } // Disable cache population by default. const options = mergeObjects( mergeObjects( { populateCache: false, throwOnError: true }, configRef.current ), opts ) // Trigger a mutation, and also track the timestamp. Any mutation that happened // earlier this timestamp should be ignored. const mutationStartedAt = getTimestamp() ditchMutationsUntilRef.current = mutationStartedAt setState({ isMutating: true }) try { const data = await mutate( serializedKey, (fetcherRef.current as any)(resolvedKey, { arg }), // We must throw the error here so we can catch and update the states. mergeObjects(options, { throwOnError: true }) ) // If it's reset after the mutation, we don't broadcast any state change. if (ditchMutationsUntilRef.current <= mutationStartedAt) { startTransition(() => setState({ data, isMutating: false, error: undefined }) ) options.onSuccess?.(data as Data, serializedKey, options) } return data } catch (error) { // If it's reset after the mutation, we don't broadcast any state change // or throw because it's discarded. if (ditchMutationsUntilRef.current <= mutationStartedAt) { startTransition(() => setState({ error: error as Error, isMutating: false }) ) options.onError?.(error as Error, serializedKey, options) if (options.throwOnError) { throw error as Error } } } }, // eslint-disable-next-line react-hooks/exhaustive-deps [] ) const reset = useCallback(() => { ditchMutationsUntilRef.current = getTimestamp() setState({ data: UNDEFINED, error: UNDEFINED, isMutating: false }) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) useIsomorphicLayoutEffect(() => { keyRef.current = key fetcherRef.current = fetcher configRef.current = config }) // We don't return `mutate` here as it can be pretty confusing (e.g. people // calling `mutate` but they actually mean `trigger`). // And also, `mutate` relies on the useSWR hook to exist too. return { trigger, reset, get data() { stateDependencies.data = true return currentState.data }, get error() { stateDependencies.error = true return currentState.error }, get isMutating() { stateDependencies.isMutating = true return currentState.isMutating } } }) as unknown as Middleware /** * A hook to define and manually trigger remote mutations like POST, PUT, DELETE and PATCH use cases. * * @link https://swr.vercel.app/docs/mutation * @example * ```jsx * import useSWRMutation from 'swr/mutation' * * const { * data, * error, * trigger, * reset, * isMutating * } = useSWRMutation(key, fetcher, options?) * ``` */ const useSWRMutation = withMiddleware( useSWR, mutation ) as unknown as SWRMutationHook export default useSWRMutation export { SWRMutationConfiguration, SWRMutationResponse, SWRMutationHook, MutationFetcher, TriggerWithArgs, TriggerWithoutArgs, TriggerWithOptionsArgs } ================================================ FILE: src/mutation/state.ts ================================================ import type { MutableRefObject, TransitionFunction } from 'react' import React, { useRef, useCallback, useState } from 'react' import { useIsomorphicLayoutEffect, IS_REACT_LEGACY } from '../_internal' export const startTransition: (scope: TransitionFunction) => void = IS_REACT_LEGACY ? cb => { cb() } : React.startTransition /** * An implementation of state with dependency-tracking. * @param initialState - The initial state object. */ export const useStateWithDeps = >( initialState: S ): [ MutableRefObject, Record, (payload: Partial) => void ] => { const [, rerender] = useState>({}) const unmountedRef = useRef(false) const stateRef = useRef(initialState) // If a state property (data, error, or isValidating) is accessed by the render // function, we mark the property as a dependency so if it is updated again // in the future, we trigger a rerender. // This is also known as dependency-tracking. const stateDependenciesRef = useRef>({ data: false, error: false, isValidating: false } as Record) /** * Updates state and triggers re-render if necessary. * @param payload To change stateRef, pass the values explicitly to setState: * @example * ```js * setState({ * isValidating: false * data: newData // set data to newData * error: undefined // set error to undefined * }) * * setState({ * isValidating: false * data: undefined // set data to undefined * error: err // set error to err * }) * ``` */ const setState = useCallback((payload: Partial) => { let shouldRerender = false const currentState = stateRef.current for (const key in payload) { if (Object.prototype.hasOwnProperty.call(payload, key)) { const k = key as keyof S // If the property has changed, update the state and mark rerender as // needed. if (currentState[k] !== payload[k]) { currentState[k] = payload[k]! // If the property is accessed by the component, a rerender should be // triggered. if (stateDependenciesRef.current[k]) { shouldRerender = true } } } } if (shouldRerender && !unmountedRef.current) { rerender({}) } }, []) useIsomorphicLayoutEffect(() => { unmountedRef.current = false return () => { unmountedRef.current = true } }) return [stateRef, stateDependenciesRef.current, setState] } ================================================ FILE: src/mutation/types.ts ================================================ import type { SWRResponse, Key, Arguments } from '../index' type FetcherResponse = Data | Promise type FetcherOptions = Readonly<{ arg: ExtraArg }> export type MutationFetcher< Data = unknown, SWRKey extends Key = Key, ExtraArg = unknown > = SWRKey extends () => infer Arg | null | undefined | false ? (key: Arg, options: FetcherOptions) => FetcherResponse : SWRKey extends null | undefined | false ? never : SWRKey extends infer Arg ? (key: Arg, options: FetcherOptions) => FetcherResponse : never export type SWRMutationConfiguration< Data, Error, SWRMutationKey extends Key = Key, ExtraArg = any, SWRData = any > = { revalidate?: boolean | ((data: Data, key: Arguments) => boolean) populateCache?: | boolean | ((result: Data, currentData: SWRData | undefined) => SWRData) optimisticData?: SWRData | ((currentData?: SWRData) => SWRData) rollbackOnError?: boolean | ((error: unknown) => boolean) fetcher?: MutationFetcher onSuccess?: ( data: Data, key: string, config: Readonly< SWRMutationConfiguration > ) => void onError?: ( err: Error, key: string, config: Readonly< SWRMutationConfiguration > ) => void } type RemoveUndefined = T extends undefined ? never : T type IsUndefinedIncluded = undefined extends T ? true : false export interface TriggerWithArgs< Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never > { ( extraArgument: ExtraArg, options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > ): Promise ( extraArgument: ExtraArg, options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > & { throwOnError: true } ): Promise> ( extraArgument: ExtraArg, options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > & { throwOnError: false } ): Promise } export interface TriggerWithOptionsArgs< Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never > { ( extraArgument?: ExtraArg, options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > ): Promise ( extraArgument?: ExtraArg, options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > & { throwOnError: true } ): Promise> ( extraArgument?: ExtraArg, options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > & { throwOnError: false } ): Promise } export interface TriggerWithoutArgs< Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never > { ( extraArgument?: null, options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > ): Promise ( extraArgument?: null, options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > & { throwOnError: true } ): Promise> ( extraArgument?: null, options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > & { throwOnError: false } ): Promise } export interface SWRMutationResponse< Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never > extends Pick, 'data' | 'error'> { /** * Indicates if the mutation is in progress. */ isMutating: boolean /** * Function to trigger the mutation. You can also pass an extra argument to * the fetcher, and override the options for the mutation hook. */ trigger: [ExtraArg] extends [never] ? TriggerWithoutArgs : IsUndefinedIncluded extends true ? TriggerWithOptionsArgs : TriggerWithArgs /** * Function to reset the mutation state (`data`, `error`, and `isMutating`). */ reset: () => void } export interface SWRMutationHook { < Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never, SWRData = Data >( /** * The key of the resource that will be mutated. It should be the same key * used in the `useSWR` hook so SWR can handle revalidation and race * conditions for that resource. */ key: SWRMutationKey, /** * The function to trigger the mutation that accepts the key, extra argument * and options. For example: * * ```jsx * (api, data) => fetch(api, { * method: 'POST', * body: JSON.stringify(data) * }) * ``` */ fetcher: MutationFetcher, /** * Extra options for the mutation hook. */ options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > & { throwOnError?: boolean } ): SWRMutationResponse < Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never, SWRData = Data >( /** * The key of the resource that will be mutated. It should be the same key * used in the `useSWR` hook so SWR can handle revalidation and race * conditions for that resource. */ key: SWRMutationKey, /** * The function to trigger the mutation that accepts the key, extra argument * and options. For example: * * ```jsx * (api, data) => fetch(api, { * method: 'POST', * body: JSON.stringify(data) * }) * ``` */ fetcher: MutationFetcher, /** * Extra options for the mutation hook. */ options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > & { throwOnError: false } ): SWRMutationResponse < Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never, SWRData = Data >( /** * The key of the resource that will be mutated. It should be the same key * used in the `useSWR` hook so SWR can handle revalidation and race * conditions for that resource. */ key: SWRMutationKey, /** * The function to trigger the mutation that accepts the key, extra argument * and options. For example: * * ```jsx * (api, data) => fetch(api, { * method: 'POST', * body: JSON.stringify(data) * }) * ``` */ fetcher: MutationFetcher, /** * Extra options for the mutation hook. */ options?: SWRMutationConfiguration< Data, Error, SWRMutationKey, ExtraArg, SWRData > & { throwOnError: true } ): SWRMutationResponse } ================================================ FILE: src/subscription/index.ts ================================================ import type { Key, SWRHook, Middleware, SWRConfiguration, SWRConfig } from '../index' import type { SWRSubscriptionOptions, SWRSubscription, SWRSubscriptionResponse, SWRSubscriptionHook } from './types' import useSWR from '../index' import { withMiddleware, serialize, useIsomorphicLayoutEffect, createCacheHelper } from '../_internal' // [subscription count, disposer] type SubscriptionStates = [Map, Map void>] const subscriptionStorage = new WeakMap() const SUBSCRIPTION_PREFIX = '$sub$' export const subscription = ((useSWRNext: SWRHook) => ( _key: Key, subscribe: SWRSubscription, config: SWRConfiguration & typeof SWRConfig.defaultValue ): SWRSubscriptionResponse => { const [key, args] = serialize(_key) // Prefix the key to avoid conflicts with other SWR resources. const subscriptionKey = key ? SUBSCRIPTION_PREFIX + key : undefined const swr = useSWRNext(subscriptionKey, null, config) const { cache } = config // Ensure that the subscription state is scoped by the cache boundary, so // you can have multiple SWR zones with subscriptions having the same key. if (!subscriptionStorage.has(cache)) { subscriptionStorage.set(cache, [ new Map(), new Map void>() ]) } const [subscriptions, disposers] = subscriptionStorage.get(cache)! useIsomorphicLayoutEffect(() => { if (!subscriptionKey) return const [, set] = createCacheHelper(cache, subscriptionKey) const refCount = subscriptions.get(subscriptionKey) || 0 const next: SWRSubscriptionOptions['next'] = ( error, data ) => { if (error !== null && typeof error !== 'undefined') { set({ error }) } else { set({ error: undefined }) swr.mutate(data, false) } } // Increment the ref count. subscriptions.set(subscriptionKey, refCount + 1) if (!refCount) { const dispose = subscribe(args, { next }) if (typeof dispose !== 'function') { throw new Error( 'The `subscribe` function must return a function to unsubscribe.' ) } disposers.set(subscriptionKey, dispose) } return () => { const count = subscriptions.get(subscriptionKey)! - 1 subscriptions.set(subscriptionKey, count) // Dispose if it's the last one. if (!count) { const dispose = disposers.get(subscriptionKey) dispose?.() } } }, [subscriptionKey]) return { get data() { return swr.data }, get error() { return swr.error } } }) as unknown as Middleware /** * A hook to subscribe a SWR resource to an external data source for continuous updates. * @experimental This API is experimental and might change in the future. * @example * ```jsx * import useSWRSubscription from 'swr/subscription' * * const { data, error } = useSWRSubscription(key, (key, { next }) => { * const unsubscribe = dataSource.subscribe(key, (err, data) => { * next(err, data) * }) * return unsubscribe * }) * ``` */ const useSWRSubscription = withMiddleware( useSWR, subscription ) as SWRSubscriptionHook export default useSWRSubscription export type { SWRSubscription, SWRSubscriptionOptions, SWRSubscriptionResponse, SWRSubscriptionHook } ================================================ FILE: src/subscription/types.ts ================================================ import type { Key, SWRConfiguration, MutatorCallback } from '../index' export type SWRSubscriptionOptions = { next: (err?: Error | null, data?: Data | MutatorCallback) => void } export type SWRSubscription< SWRSubKey extends Key = Key, Data = any, Error = any > = SWRSubKey extends () => infer Arg | null | undefined | false ? (key: Arg, { next }: SWRSubscriptionOptions) => void : SWRSubKey extends null | undefined | false ? never : SWRSubKey extends infer Arg ? (key: Arg, { next }: SWRSubscriptionOptions) => void : never export type SWRSubscriptionResponse = { data?: Data error?: Error } export type SWRSubscriptionHook = < Data = any, Error = any, SWRSubKey extends Key = Key >( key: SWRSubKey, subscribe: SWRSubscription, config?: SWRConfiguration ) => SWRSubscriptionResponse ================================================ FILE: subscription/package.json ================================================ { "main": "../dist/subscription/index.js", "module": "../dist/subscription/index.mjs", "types": "../dist/subscription/index.d.ts", "private": true } ================================================ FILE: test/jest-setup.ts ================================================ import '@testing-library/jest-dom' ================================================ FILE: test/tsconfig.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "noEmit": true, "strict": false, "jsx": "react-jsx", "baseUrl": "..", "paths": { "swr": ["./core/src/index.ts"], "swr/infinite": ["./infinite/src/index.ts"], "swr/immutable": ["./immutable/src/index.ts"], "swr/mutation": ["./mutation/src/index.ts"], "swr/_internal": ["./_internal/src/index.ts"], "swr/subscription": ["subscription/src/index.ts"] } }, "include": [".", "./jest-setup.ts"], "exclude": ["./type"] } ================================================ FILE: test/type/.eslintrc ================================================ { "extends": "../../.eslintrc", "rules": { "react-hooks/rules-of-hooks": 0 } } ================================================ FILE: test/type/config.tsx ================================================ import type { Cache, SWRResponse } from 'swr' import useSWR, { useSWRConfig, SWRConfig } from 'swr' import { expectType } from './utils' import type { FullConfiguration, SWRConfiguration } from 'swr/_internal' import type { Equal } from '@type-challenges/utils' export function useTestCache() { expectType>(useSWRConfig().cache) } export function useTestCustomSWRConfig() { const noNull = [ // @ts-expect-error , // @ts-expect-error null} /> ] return ( <> {noNull} ({})} /> 0} /> ) } export function useTestFullConfiguration() { type IData = { value: string } type IError = { error: any } type IConfig = FullConfiguration const config: IConfig = SWRConfig.defaultValue expectType | undefined>(config.fallbackData) } export function testSWRResponseCachedDataTypes() { type FilledData = SWRResponse['data'] expectType>(true) type FilledConditionalData = SWRResponse< string | number, any, { suspense: true } >['data'] expectType>(true) } export function useTestSuspense() { // Basic const { data: data1 } = useSWR('/api', (k: string) => Promise.resolve(k), { suspense: true }) expectType(data1) // Basic(default fetcher) const { data: data2 } = useSWR('/api', { suspense: true }) expectType(data2) // If a generic is explicitly passed we will lose type inference for the swr config // because of partial inference limitations in typescript. // https://github.com/microsoft/TypeScript/issues/26242 const { data: data3 } = useSWR( '/api', (k: string) => Promise.resolve(k), { suspense: true } ) expectType(data3) const { data: data4 } = useSWR( '/api', (k: string) => Promise.resolve(k), { suspense: true } ) expectType(data4) } export function useTestFallbackData() { // Need to specify the type of Data returning from fetcher // Basic const fetcher1 = (k: string) => Promise.resolve(k) const { data: data1 } = useSWR('/api', fetcher1, { fallbackData: 'fallback' }) expectType(data1) // Conditional const fetcher2 = (k: string) => Promise.resolve(Math.random() > 0.5 ? k : Math.random() * 100) const { data: data2 } = useSWR('/api', fetcher2, { fallbackData: 'fallback' }) expectType(data2) // Complex const fetcher3 = (k: string) => Promise.resolve({ value: k }) const { data: data3 } = useSWR('/api', fetcher3, { fallbackData: { value: 'fallback' } }) expectType<{ value: string }>(data3) // Does not need specific fetcher // Basic(default fetcher) const { data: data4 } = useSWR('/api', { fallbackData: 'fallback' }) expectType(data4) // If a generic is explicitly passed we will lose type inference for the swr config // because of partial inference limitations in typescript. // https://github.com/microsoft/TypeScript/issues/26242 const { data: data5 } = useSWR( '/api', (k: string) => Promise.resolve(k), { fallbackData: 'fallback' } ) expectType(data5) const { data: data6 } = useSWR( '/api', (k: string) => Promise.resolve(k), { fallbackData: 'fallback' } ) expectType(data6) // Promise const { data: data7 } = useSWR< string, any, { fallbackData: Promise<'fallback'> } >('/api', (k: string) => Promise.resolve(k), { fallbackData: Promise.resolve('fallback') }) expectType(data7) // Declare that the fallback is existing (i.e. provided by SWRConfig). const { data: data8 } = useSWR('/api') const { data: data9 } = useSWR( '/api', {} ) expectType(data8) expectType(data9) } export function useTestConfigAsSWRConfiguration() { const fetcher = (k: string) => Promise.resolve({ value: k }) const { data } = useSWR('/api', fetcher, {} as SWRConfiguration) expectType>(true) } export function useTestEmptyConfig() { const fetcher = (k: string) => Promise.resolve({ value: k }) const { data, error, isLoading } = useSWR<{ value: string }, Error>( '/api', fetcher, {} ) expectType>(true) expectType>(true) expectType>(true) } export function useTestFallbackDataConfig() { const fetcher = (k: string) => Promise.resolve({ value: k }) const { data, isLoading } = useSWR('/api', fetcher, { fallbackData: { value: 'fallback' } }) expectType>(true) expectType>(true) } export function useTestProviderConfig() { const GlobalSetting = ({ children }: { children: React.ReactNode }) => { return ( new Map(), isOnline() { /* Customize the network state detector */ return true }, isVisible() { /* Customize the visibility state detector */ return true }, initFocus(_callback) { /* Register the listener with your state provider */ }, initReconnect(_callback) { /* Register the listener with your state provider */ } }} > {children} ) } return (
) } ================================================ FILE: test/type/fetcher.ts ================================================ import useSWR from 'swr' import useSWRInfinite from 'swr/infinite' import { expectType, truthy } from './utils' import type { Equal } from '@type-challenges/utils' export function useDataErrorGeneric() { useSWR<{ id: number }>('/api/', () => ({ id: 123 })) useSWR('/api/', (key: string) => key) const fetcher = ({ url }: { url: string }) => url useSWR({ url: '/api' }, fetcher) useSWRInfinite( (index, previousPageData) => { expectType>(true) expectType>(true) return 'key' }, key => key ) useSWRInfinite<{ id: number }[], any>( (index, previousPageData) => { expectType>(true) expectType>(true) return truthy() ? 'key' : null }, key => key ) } export function useString() { useSWR('/api/user', key => { expectType>(true) return key }) useSWR(truthy() ? '/api/user' : null, key => { expectType>(true) return key }) useSWR(truthy() ? '/api/user' : false, key => { expectType>(true) return key }) } export function useRecord() { useSWR({ a: '1', b: { c: '3', d: 2 } }, key => { expectType>( true ) return key }) useSWR(truthy() ? { a: '1', b: { c: '3', d: 2 } } : null, key => { expectType>( true ) return key }) useSWR(truthy() ? { a: '1', b: { c: '3', d: 2 } } : false, key => { expectType>( true ) return key }) } export function useTuple() { useSWR([{ a: '1', b: { c: '3' } }, [1231, '888']], keys => { expectType< Equal<[{ a: string; b: { c: string } }, (string | number)[]], typeof keys> >(true) return keys }) useSWR(truthy() ? [{ a: '1', b: { c: '3' } }, [1231, '888']] : null, keys => { expectType< Equal<[{ a: string; b: { c: string } }, (string | number)[]], typeof keys> >(true) return keys }) useSWR( truthy() ? [{ a: '1', b: { c: '3' } }, [1231, '888']] : false, keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } ) } export function useReadonlyTuple() { useSWR([{ a: '1', b: { c: '3' } }, [1231, '888']] as const, keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys }) useSWR( truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : null, keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } ) useSWR( truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : false, keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } ) } export function useReturnString() { useSWR( () => '/api/user', key => { expectType>(true) return key } ) useSWR( () => (truthy() ? '/api/user' : null), key => { expectType>(true) return key } ) useSWR( () => (truthy() ? '/api/user' : false), key => { expectType>(true) return key } ) useSWRInfinite( (index, previousPageData: string) => { return `${index}${previousPageData}` }, key => { expectType>(true) return key } ) useSWRInfinite( (index, previousPageData: string) => { return truthy() ? `${index}${previousPageData}` : null }, key => { expectType>(true) return key } ) useSWRInfinite( (index, previousPageData: string) => { return truthy() ? `${index}${previousPageData}` : false }, key => { expectType>(true) return key } ) } export function useReturnRecord() { useSWR( () => ({ a: '1', b: { c: '3', d: 2 } }), key => { expectType>( true ) return key } ) useSWR( () => (truthy() ? { a: '1', b: { c: '3', d: 2 } } : null), key => { expectType>( true ) return key } ) useSWR( () => (truthy() ? { a: '1', b: { c: '3', d: 2 } } : false), key => { expectType>( true ) return key } ) useSWRInfinite( index => ({ index, endPoint: '/api' }), key => { expectType>(true) return [key] } ) useSWRInfinite( index => truthy() ? { index, endPoint: '/api' } : null, key => { expectType>(true) return [key] } ) useSWRInfinite( index => truthy() ? { index, endPoint: '/api' } : false, key => { expectType>(true) return [key] } ) } export function useReturnTuple() { useSWR( () => [{ a: '1', b: { c: '3' } }, [1231, '888']], keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } ) useSWR( () => (truthy() ? [{ a: '1', b: { c: '3' } }, [1231, '888']] : null), keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } ) useSWR( () => (truthy() ? [{ a: '1', b: { c: '3' } }, [1231, '888']] : false), keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } ) useSWRInfinite( index => [{ a: '1', b: { c: '3', d: index } }, [1231, '888']], keys => { expectType< Equal< [{ a: string; b: { c: string; d: number } }, (string | number)[]], typeof keys > >(true) return keys[1] } ) useSWRInfinite( index => truthy() ? [{ a: '1', b: { c: '3', d: index } }, [1231, '888']] : null, keys => { expectType< Equal< [{ a: string; b: { c: string; d: number } }, (string | number)[]], typeof keys > >(true) return keys[1] } ) useSWRInfinite( index => truthy() ? [{ a: '1', b: { c: '3', d: index } }, [1231, '888']] : false, keys => { expectType< Equal< [{ a: string; b: { c: string; d: number } }, (string | number)[]], typeof keys > >(true) return keys[1] } ) } export function useReturnReadonlyTuple() { useSWR( () => [{ a: '1', b: { c: '3' } }, [1231, '888']] as const, keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } ) useSWR( () => truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : null, keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } ) useSWR( () => truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : false, keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } ) useSWRInfinite( () => [{ a: '1', b: { c: '3' } }, [1231, '888']] as const, keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } ) useSWRInfinite( () => truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : null, keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys[1] } ) useSWRInfinite( () => truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : false, keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys[1] } ) } ================================================ FILE: test/type/helper-types.tsx ================================================ import type { BlockingData } from 'swr/_internal' import { expectType } from './utils' export function testDataCached() { expectType>(true) expectType>(true) expectType< BlockingData >(false) expectType>( false ) } ================================================ FILE: test/type/internal.tsx ================================================ import { rAF } from 'swr/_internal' import { expectType } from './utils' export function rAFTyping() { expectType< (f: (...args: any[]) => void) => ReturnType | number >(rAF) } ================================================ FILE: test/type/mutate.ts ================================================ /* eslint-disable @typescript-eslint/no-empty-object-type */ import type { Equal, Expect } from '@type-challenges/utils' import useSWR, { useSWRConfig } from 'swr' import type { MutatorFn, Key, MutatorCallback, Mutator, MutatorWrapper, Arguments } from 'swr/_internal' import { expectType } from './utils' type Case1 = MutatorFn type Case2 = ( cache: Cache, key: Key, data: Data | Promise | MutatorCallback, opts: boolean ) => Promise type Case3 = ( cache: Cache, key: Key, data: Data | Promise | MutatorCallback ) => Promise type Case4 = ( cache: Cache, key: Key, data: Data | Promise | MutatorCallback, opts: { populateCache: undefined } ) => Promise type Case5 = ( cache: Cache, key: Key, data: Data | Promise | MutatorCallback, opts: { populateCache: false } ) => Promise type Case6 = ( cache: Cache, key: Key, data: Data | Promise | MutatorCallback, opts: { populateCache: true } ) => Promise export type TestCasesForMutator = [ Expect, Promise<{} | undefined>>>, Expect>, Promise<{} | undefined>>>, Expect>, Promise<{} | undefined>>>, Expect>, Promise<{} | undefined>>>, Expect>, Promise<{} | undefined>>>, Expect>, never>>, Expect>, Promise<{} | undefined>>> ] export function useMutatorTypes() { const { mutate } = useSWR('') mutate(async () => '1') mutate(async () => '1', { populateCache: false }) // @ts-expect-error mutate(async () => 1) // @ts-expect-error mutate(async () => 1, { populateCache: false }) } export function useConfigMutate() { const { mutate } = useSWRConfig() expect>>( mutate( key => { expectType(key) return typeof key === 'string' && key.startsWith('swr') }, data => { expectType(data) return 0 } ) ) expect>( mutate('string', (data?: string) => { expectType(data) return '0' }) ) expect>>( mutate( key => { expectType(key) return typeof key === 'string' && key.startsWith('swr') }, data => { expectType(data) return 0 } ) ) expect>( mutate('string', data => { expectType(data) return '0' }) ) mutate('string', data => { expectType(data) return '0' }) } ================================================ FILE: test/type/mutation.ts ================================================ import useSWRMutation, { type TriggerWithoutArgs } from 'swr/mutation' import { expectType } from './utils' export function useConfigMutation() { const { trigger } = useSWRMutation('key', k => k) expectType>(trigger) } ================================================ FILE: test/type/option-fetcher.ts ================================================ import useSWR from 'swr' import useSWRInfinite from 'swr/infinite' import { expectType, truthy } from './utils' import type { Equal } from '@type-challenges/utils' export function useDataErrorGeneric() { useSWR<{ id: number }>('/api/', { fetcher: () => ({ id: 123 }) }) useSWR('/api/', { fetcher: (key: string) => key }) useSWRInfinite(() => '/api/', { fetcher: key => key }) } export function useString() { useSWR('/api/user', { fetcher: key => { expectType>(true) return key } }) useSWR(truthy() ? '/api/user' : null, { fetcher: key => { expectType>(true) return key } }) useSWR(truthy() ? '/api/user' : false, { fetcher: key => { expectType>(true) return key } }) } export function useRecord() { useSWR( { a: '1', b: { c: '3', d: 2 } }, { fetcher: key => { expectType< Equal<{ a: string; b: { c: string; d: number } }, typeof key> >(true) return key } } ) useSWR(truthy() ? { a: '1', b: { c: '3', d: 2 } } : null, { fetcher: key => { expectType>( true ) return key } }) useSWR(truthy() ? { a: '1', b: { c: '3', d: 2 } } : false, { fetcher: key => { expectType>( true ) return key } }) } export function useTuple() { useSWR([{ a: '1', b: { c: '3' } }, [1231, '888']], { fetcher: keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } }) useSWR(truthy() ? [{ a: '1', b: { c: '3' } }, [1231, '888']] : null, { fetcher: keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } }) useSWR(truthy() ? [{ a: '1', b: { c: '3' } }, [1231, '888']] : false, { fetcher: keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } }) } export function useReadonlyTuple() { useSWR([{ a: '1', b: { c: '3' } }, [1231, '888']] as const, { fetcher: keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } }) useSWR( truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : null, { fetcher: keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } } ) useSWR( truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : false, { fetcher: keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } } ) } export function useReturnString() { useSWR(() => '/api/user', { fetcher: key => { expectType>(true) return key } }) useSWR(() => (truthy() ? '/api/user' : null), { fetcher: key => { expectType>(true) return key } }) useSWR(() => (truthy() ? '/api/user' : false), { fetcher: key => { expectType>(true) return key } }) useSWRInfinite( (index, previousPageData: string) => { return `${index}${previousPageData}` }, { fetcher: key => { expectType>(true) return key } } ) useSWRInfinite( (index, previousPageData: string) => { return truthy() ? `${index}${previousPageData}` : null }, { fetcher: key => { expectType>(true) return key } } ) useSWRInfinite( (index, previousPageData: string) => { return truthy() ? `${index}${previousPageData}` : false }, { fetcher: key => { expectType>(true) return key } } ) } export function useReturnRecord() { useSWR(() => ({ a: '1', b: { c: '3', d: 2 } }), { fetcher: key => { expectType>( true ) return key } }) useSWR(() => (truthy() ? { a: '1', b: { c: '3', d: 2 } } : null), { fetcher: key => { expectType>( true ) return key } }) useSWR(() => (truthy() ? { a: '1', b: { c: '3', d: 2 } } : false), { fetcher: key => { expectType>( true ) return key } }) useSWRInfinite( index => ({ index, endPoint: '/api' }), { fetcher: key => { expectType>(true) return [key] } } ) useSWRInfinite( index => truthy() ? { index, endPoint: '/api' } : null, { fetcher: key => { expectType>(true) return [key] } } ) useSWRInfinite( index => truthy() ? { index, endPoint: '/api' } : false, { fetcher: key => { expectType>(true) return [key] } } ) } export function useReturnTuple() { useSWR(() => [{ a: '1', b: { c: '3' } }, [1231, '888']], { fetcher: keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } }) useSWR(() => (truthy() ? [{ a: '1', b: { c: '3' } }, [1231, '888']] : null), { fetcher: keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } }) useSWR( () => (truthy() ? [{ a: '1', b: { c: '3' } }, [1231, '888']] : false), { fetcher: keys => { expectType< Equal< [{ a: string; b: { c: string } }, (string | number)[]], typeof keys > >(true) return keys } } ) useSWRInfinite( index => [{ a: '1', b: { c: '3', d: index } }, [1231, '888']], { fetcher: keys => { expectType< Equal< [{ a: string; b: { c: string; d: number } }, (string | number)[]], typeof keys > >(true) return keys[1] } } ) useSWRInfinite( index => truthy() ? [{ a: '1', b: { c: '3', d: index } }, [1231, '888']] : null, { fetcher: keys => { expectType< Equal< [{ a: string; b: { c: string; d: number } }, (string | number)[]], typeof keys > >(true) return keys[1] } } ) useSWRInfinite( index => truthy() ? [{ a: '1', b: { c: '3', d: index } }, [1231, '888']] : false, { fetcher: keys => { expectType< Equal< [{ a: string; b: { c: string; d: number } }, (string | number)[]], typeof keys > >(true) return keys[1] } } ) } export function useReturnReadonlyTuple() { useSWR(() => [{ a: '1', b: { c: '3' } }, [1231, '888']] as const, { fetcher: keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } }) useSWR( () => truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : null, { fetcher: keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } } ) useSWR( () => truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : false, { fetcher: keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } } ) useSWRInfinite(() => [{ a: '1', b: { c: '3' } }, [1231, '888']] as const, { fetcher: keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys } }) useSWRInfinite( () => truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : null, { fetcher: keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys[1] } } ) useSWRInfinite( () => truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : false, { fetcher: keys => { expectType< Equal< readonly [ { readonly a: '1' readonly b: { readonly c: '3' } }, readonly [1231, '888'] ], typeof keys > >(true) return keys[1] } } ) } ================================================ FILE: test/type/preload.ts ================================================ import { preload } from 'swr' import { expectType } from './utils' import type { Equal } from '@type-challenges/utils' export function testPreload() { const data1 = preload('key', () => Promise.resolve('value' as const)) expectType, typeof data1>>(true) const data2 = preload( () => 'key', () => 'value' as const ) expectType>(true) const data3 = preload<'value'>( () => 'key', () => 'value' as const ) // specifing a generic param breaks the rest type inference so get FetcherResponse<"value"> expectType, typeof data3>>(true) preload('key', key => { expectType>(true) }) preload<'value'>( 'key', ( // @ts-expect-error -- infered any implicitly key ) => { return 'value' as const } ) preload(['key', 1], keys => { expectType>(true) }) preload( () => 'key' as const, key => { expectType>(true) } ) } ================================================ FILE: test/type/subscription.ts ================================================ import useSWRSubscription from 'swr/subscription' import type { SWRSubscriptionOptions, SWRSubscription } from 'swr/subscription' import { expectType, truthy } from './utils' export function useTestSubscription() { useSWRSubscription( 'key', (key, { next: _ }: SWRSubscriptionOptions) => { expectType<'key'>(key) return () => {} } ) useSWRSubscription( truthy() ? 'key' : undefined, (key, { next: _ }: SWRSubscriptionOptions) => { expectType<'key'>(key) return () => {} } ) useSWRSubscription( ['key', 1], (key, { next: _ }: SWRSubscriptionOptions) => { expectType<[string, number]>(key) return () => {} } ) useSWRSubscription( truthy() ? ['key', 1] : undefined, (key, { next: _ }: SWRSubscriptionOptions) => { expectType<[string, number]>(key) return () => {} } ) useSWRSubscription( { foo: 'bar' }, (key, { next: _ }: SWRSubscriptionOptions) => { expectType<{ foo: string }>(key) return () => {} } ) useSWRSubscription( truthy() ? { foo: 'bar' } : undefined, (key, { next: _ }: SWRSubscriptionOptions) => { expectType<{ foo: string }>(key) return () => {} } ) useSWRSubscription( () => 'key', (key, { next: _ }: SWRSubscriptionOptions) => { expectType(key) return () => {} } ) useSWRSubscription( () => (truthy() ? 'key' : undefined), (key, { next: _ }: SWRSubscriptionOptions) => { expectType<'key'>(key) return () => {} } ) useSWRSubscription( () => ['key', 1], (key, { next: _ }: SWRSubscriptionOptions) => { expectType<[string, number]>(key) return () => {} } ) useSWRSubscription( () => (truthy() ? ['key', 1] : undefined), (key, { next: _ }: SWRSubscriptionOptions) => { expectType<[string, number]>(key) return () => {} } ) useSWRSubscription( () => ({ foo: 'bar' }), (key, { next: _ }: SWRSubscriptionOptions) => { expectType<{ foo: string }>(key) return () => {} } ) useSWRSubscription( () => (truthy() ? { foo: 'bar' } : undefined), (key, { next: _ }: SWRSubscriptionOptions) => { expectType<{ foo: string }>(key) return () => {} } ) const sub: SWRSubscription = (_, { next: __ }) => { return () => {} } const { data: data2, error: error2 } = useSWRSubscription('key', sub) expectType(data2) expectType(error2) } ================================================ FILE: test/type/suspense/helper-types.tsx ================================================ import type { BlockingData } from 'swr/_internal' import { expectType } from '../utils' declare module 'swr' { interface SWRGlobalConfig { suspense: true } } export function testDataCached() { expectType>(true) expectType>(true) expectType< BlockingData >(true) expectType>( true ) } ================================================ FILE: test/type/suspense/suspense.ts ================================================ import useSWR from 'swr' import { expectType } from '../utils' declare module 'swr' { interface SWRGlobalConfig { suspense: true } } export function useTestSuspense() { const { data } = useSWR('/api', (k: string) => Promise.resolve(k)) expectType(data) } ================================================ FILE: test/type/suspense/tsconfig.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "noEmit": true, "strict": true, "jsx": "react-jsx" }, "include": ["./**/*.ts", "./**/*.tsx"], "exclude": [] } ================================================ FILE: test/type/trigger.ts ================================================ import useSWRMutation from 'swr/mutation' import useSWR from 'swr' type ExpectType = (value: T) => void const expectType: ExpectType = () => {} type Equal = (() => T extends A ? 1 : 2) extends () => T extends B ? 1 : 2 ? true : false // Test the Equal type expectType>(false) // should be false export function useExtraParam() { useSWRMutation('/api/user', key => { expectType(key) }) useSWRMutation('/api/user', (_, opts) => { expectType>>(true) }) } export function useTrigger() { const { trigger, reset, data, error } = useSWRMutation( '/api/user', (_, opts: { arg: number }) => String(opts.arg) ) // The argument of `trigger` should be number or undefined. expectType[0], number>>(true) expectType>(trigger(1)) // Other return values expectType void>>(true) expectType>(true) expectType>(true) // Should not return some fields. type Ret = ReturnType expectType, Ret>>(true) } export function useTriggerWithParameter() { const { trigger } = useSWRMutation( '/api/user', (_, opts) => { expectType>>(true) return String(opts.arg) } ) // The argument of `trigger` should be number or undefined. expectType[0], number>>(true) expectType>(trigger(1)) expectType>( trigger(1, { throwOnError: false }) ) } export function useOnErrorThrowFalse() { const { trigger } = useSWRMutation( '/api/user', (_, opts) => { expectType>>(true) return String(opts.arg) }, { throwOnError: false } ) // The argument of `trigger` should be number or undefined. expectType[0], number>>(true) expectType>(trigger(1)) expectType>( trigger(1, { throwOnError: true }) ) } export function useTestSWRMutation() { const { data } = useSWR('key', async () => { return ['foo'] }) const { trigger } = useSWRMutation( 'key', async (_, { arg }: { arg: 'foo' }) => { return arg.toUpperCase() } ) const test = () => { // @ts-expect-error `arg` should be 'foo' trigger() // @ts-expect-error `arg` should be 'foo' trigger('bar', { optimisticData: current => { expectType(current) return [] }, populateCache: (added, current) => { expectType(added) expectType(current) return [] }, revalidate: false }) } test() } export function useTestSWRMutationWithOptionalArgs() { const { trigger } = useSWRMutation( 'key', async (_, { arg }: { arg?: 'foo' }) => { return arg?.toUpperCase() } ) const test = () => { expectType>(trigger('foo')) expectType>(trigger(undefined)) expectType>(trigger()) } test() } export function useTestSWRMutationWithSWRMutate() { const { mutate } = useSWR('/some/key', () => { return { foo: 'bar' } }) const { trigger } = useSWRMutation('/some/key', () => { return { foo: 'foo' } }) const test = () => { // eslint-disable-next-line @typescript-eslint/no-unused-expressions ;async () => { mutate(trigger(), { optimisticData: { foo: 'baz' } }) } } test() } ================================================ FILE: test/type/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "noEmit": true, "strict": true, "jsx": "react-jsx" }, "include": ["./**/*.ts", "./**/*.tsx"], "exclude": ["./suspense"] } ================================================ FILE: test/type/utils.ts ================================================ export type ExpectType = (value: T) => void export const expectType: ExpectType = () => {} export const truthy: () => boolean = () => true ================================================ FILE: test/unit/serialize.test.ts ================================================ /** * @jest-environment @edge-runtime/jest-environment */ import { unstable_serialize } from 'swr' import { stableHash } from 'swr/_internal' describe('SWR - unstable_serialize', () => { it('should serialize arguments correctly', async () => { expect(unstable_serialize([])).toBe('') expect(unstable_serialize(null)).toBe('') expect(unstable_serialize('key')).toBe('key') expect(unstable_serialize([1, { foo: 2, bar: 1 }, ['a', 'b', 'c']])).toBe( stableHash([1, { foo: 2, bar: 1 }, ['a', 'b', 'c']]) ) }) }) ================================================ FILE: test/unit/utils.test.tsx ================================================ /** * @jest-environment @edge-runtime/jest-environment */ import { stableHash as hash, serialize, normalize, mergeConfigs } from 'swr/_internal' describe('Utils', () => { it('should normalize arguments correctly', async () => { const fetcher = () => {} const opts = { revalidateOnFocus: false } // Only the `key` argument is passed expect(normalize(['key'])).toEqual(['key', null, {}]) // `key` and `null` as fetcher (no fetcher) expect(normalize(['key', null])).toEqual(['key', null, {}]) // `key` and `fetcher` expect(normalize(['key', fetcher])).toEqual(['key', fetcher, {}]) // `key` and `options` expect(normalize(['key', opts])).toEqual(['key', null, opts]) // `key`, `null` as fetcher, and `options` expect(normalize(['key', null, opts])).toEqual(['key', null, opts]) // `key`, `fetcher`, and `options` expect(normalize(['key', fetcher, opts])).toEqual(['key', fetcher, opts]) }) it('should hash arguments correctly', async () => { // Empty expect(serialize([])[0]).toEqual('') // Primitives expect(hash(['key'])).toEqual('@"key",') expect(hash([1])).toEqual('@1,') expect(hash(['false'])).toEqual('@"false",') expect(hash([false])).toEqual('@false,') expect(hash([true])).toEqual('@true,') expect(hash([null])).toEqual('@null,') expect(hash(['null'])).toEqual('@"null",') expect(hash([undefined])).toEqual('@undefined,') expect(hash([NaN])).toEqual('@NaN,') expect(hash([Infinity])).toEqual('@Infinity,') expect(hash([''])).toEqual('@"",') // Encodes `"` expect(hash(['","', 1])).not.toEqual(hash(['', '', 1])) // BigInt expect(hash([BigInt(1)])).toEqual('@1,') // Date const date = new Date() expect(hash([date])).toEqual(`@${date.toJSON()},`) expect(hash([new Date(1234)])).toEqual(hash([new Date(1234)])) // Regex expect(hash([/regex/])).toEqual('@/regex/,') // Symbol expect(hash([Symbol('key')])).toMatch('@Symbol(key),') const symbol = Symbol('foo') expect(hash([symbol])).toMatch(hash([symbol])) // Due to serialization, those three are equivalent expect(hash([Symbol.for('key')])).toMatch(hash([Symbol.for('key')])) expect(hash([Symbol('key')])).toMatch(hash([Symbol('key')])) expect(hash([Symbol('key')])).toMatch(hash([Symbol.for('key')])) // Set, Map, Buffer... const set = new Set() expect(hash([set])).not.toMatch(hash([new Set()])) expect(hash([set])).toMatch(hash([set])) const map = new Map() expect(hash([map])).not.toMatch(hash([new Map()])) expect(hash([map])).toMatch(hash([map])) const buffer = new ArrayBuffer(0) expect(hash([buffer])).not.toMatch(hash([new ArrayBuffer(0)])) expect(hash([buffer])).toMatch(hash([buffer])) // Serializable objects expect(hash([{ x: 1 }])).toEqual('@#x:1,,') expect(hash([{ '': 1 }])).toEqual('@#:1,,') expect(hash([{ x: { y: 2 } }])).toEqual('@#x:#y:2,,,') expect(hash([[]])).toEqual('@@,') expect(hash([[[]]])).not.toMatch(hash([[], []])) // Circular const o: any = {} o.o = o expect(hash([o])).toEqual(hash([o])) expect(hash([o])).not.toEqual(hash([{}])) const a: any = [] a.push(a) expect(hash([a])).toEqual(hash([a])) expect(hash([a])).not.toEqual(hash([[]])) const o2: any = {} const a2: any = [o2] o2.a = a2 expect(hash([o2])).toEqual(hash([o2])) // Unserializable objects expect(hash([() => {}])).toMatch(/@\d+~,/) expect(hash([class {}])).toMatch(/@\d+~,/) }) it('should always generate the same and stable hash', async () => { // Multiple arguments expect(hash([() => {}, 1, 'key', null, { x: 1 }])).toMatch( /@\d+~,1,"key",null,#x:1,,/ ) // Stable hash expect(hash([{ x: 1, y: 2, z: undefined }])).toMatch( hash([{ z: undefined, y: 2, x: 1 }]) ) expect(hash([{ x: 1, y: { a: 1, b: 2 }, z: undefined }])).toMatch( hash([{ y: { b: 2, a: 1 }, x: 1 }]) ) // Same hash of the same reference const f = () => {} expect(hash([f])).toEqual(hash([f])) expect(hash([() => {}])).not.toEqual(hash([() => {}])) }) it('should correctly merge configs', async () => { const a: any = { a: 1 }, b: any = { b: 1 } // Should merge middleware expect(mergeConfigs({ use: [a] }, { use: [b] })).toEqual({ use: [a, b] }) // Should merge fallback expect(mergeConfigs({ fallback: a }, { fallback: b })).toEqual({ fallback: { a: 1, b: 1 } }) }) }) ================================================ FILE: test/unit/web-preset.test.ts ================================================ import { EventEmitter } from 'events' const FOCUS_EVENT = 'focus' const VISIBILITYCHANGE_EVENT = 'visibilitychange' function createEventTarget() { EventEmitter.prototype['addEventListener'] = EventEmitter.prototype.on EventEmitter.prototype['removeEventListener'] = EventEmitter.prototype.off const target = new EventEmitter() return target } function runTests(propertyName) { let initFocus const eventName = propertyName === 'window' ? FOCUS_EVENT : VISIBILITYCHANGE_EVENT describe(`Web Preset ${propertyName}`, () => { const globalSpy = { window: undefined, document: undefined } beforeEach(() => { globalSpy.window = jest.spyOn(global, 'window', 'get') globalSpy.document = jest.spyOn(global, 'document', 'get') jest.resetModules() }) afterEach(() => { globalSpy.window.mockClear() globalSpy.document.mockClear() }) it(`should trigger listener when ${propertyName} has browser APIs`, async () => { const target = createEventTarget() if (propertyName === 'window') { globalSpy.window.mockImplementation(() => target) globalSpy.document.mockImplementation(() => undefined) } else if (propertyName === 'document') { globalSpy.window.mockImplementation(() => undefined) globalSpy.document.mockImplementation(() => target) } // eslint-disable-next-line @typescript-eslint/no-require-imports initFocus = require('swr/_internal').defaultConfigOptions.initFocus const fn = jest.fn() const release = initFocus(fn) as () => void target.emit(eventName) expect(fn).toHaveBeenCalledTimes(1) release() target.emit(eventName) expect(fn).toHaveBeenCalledTimes(1) }) it(`should not trigger listener when ${propertyName} is falsy`, async () => { if (propertyName === 'window') { // window exists but without event APIs globalSpy.window.mockImplementation(() => ({ emit: createEventTarget().emit })) globalSpy.document.mockImplementation(() => undefined) } else if (propertyName === 'document') { globalSpy.window.mockImplementation(() => undefined) globalSpy.document.mockImplementation(() => undefined) } // eslint-disable-next-line @typescript-eslint/no-require-imports initFocus = require('swr/_internal').defaultConfigOptions.initFocus const fn = jest.fn() const release = initFocus(fn) as () => void const target = global[propertyName] target?.emit?.(eventName) expect(fn).toHaveBeenCalledTimes(0) release() if (target && target.emit) { target.emit(eventName) } expect(fn).toHaveBeenCalledTimes(0) }) }) } runTests('window') runTests('document') ================================================ FILE: test/use-swr-cache.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import { act, useState, StrictMode } from 'react' import useSWR, { useSWRConfig, SWRConfig, mutate as globalMutate } from 'swr' import { sleep, createKey, createResponse, nextTick, focusOn, renderWithConfig, renderWithGlobalCache } from './utils' describe('useSWR - cache provider', () => { let provider beforeEach(() => { provider = new Map() }) it('should be able to update the cache', async () => { const fetcher = _key => 'res:' + _key const keys = [createKey(), createKey()] function Page() { const [index, setIndex] = useState(0) const { data } = useSWR(keys[index], fetcher) return
setIndex(1)}>{data}
} renderWithConfig(, { provider: () => provider }) await screen.findByText(fetcher(keys[0])) expect(provider.get(keys[1])?.data).toBe(undefined) fireEvent.click(screen.getByText(fetcher(keys[0]))) await act(() => sleep(10)) expect(provider.get(keys[0])?.data).toBe(fetcher(keys[0])) expect(provider.get(keys[1])?.data).toBe(fetcher(keys[1])) }) it('should be able to read from the initial cache with updates', async () => { const key = createKey() const renderedValues = [] const fetcher = () => createResponse('updated value', { delay: 10 }) function Page() { const { data } = useSWR(key, fetcher) renderedValues.push(data) return
{data}
} renderWithConfig(, { provider: () => new Map([[key, { data: 'cached value' }]]) }) screen.getByText('cached value') await screen.findByText('updated value') expect(renderedValues.length).toBe(2) }) it('should correctly mutate the cached value', async () => { const key = createKey() let mutate function Page() { const { mutate: mutateWithCache } = useSWRConfig() mutate = mutateWithCache const { data } = useSWR(key, null) return
{data}
} renderWithConfig(, { provider: () => new Map([[key, { data: 'cached value' }]]) }) screen.getByText('cached value') await act(() => mutate(key, 'mutated value', false)) await screen.findByText('mutated value') }) it('should support multi-level cache', async () => { const key = createKey() // Nested components with the same cache key can get different values. function Foo() { const { data } = useSWR(key, null) return <>{data} } function Page() { const { data } = useSWR(key, null) return (
{data}: new Map([[key, { data: '2' }]]) }} >
) } renderWithConfig(, { provider: () => new Map([[key, { data: '1' }]]) }) screen.getByText('1:2') }) it('should support isolated cache', async () => { const key = createKey() // Nested components with the same cache key can get different values. function Foo() { const { data } = useSWR(key, null) return <>{data} } function Page() { return (
new Map([[key, { data: '1' }]]) }} > : new Map([[key, { data: '2' }]]) }} >
) } renderWithConfig() screen.getByText('1:2') }) it('should respect provider options', async () => { const key = createKey() const focusFn = jest.fn() const unsubscribeFocusFn = jest.fn() const unsubscribeReconnectFn = jest.fn() let value = 1 function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0 }) return <>{String(data)} } const { unmount } = renderWithConfig(, { provider: () => new Map([[key, { data: 0 }]]), initFocus() { focusFn() return unsubscribeFocusFn }, initReconnect() { /* do nothing */ return unsubscribeReconnectFn } }) screen.getByText('0') // mount await screen.findByText('1') await nextTick() // try to trigger revalidation, but shouldn't work await focusOn(window) // revalidateOnFocus won't work screen.getByText('1') unmount() expect(focusFn).toHaveBeenCalled() expect(unsubscribeFocusFn).toHaveBeenCalledTimes(1) expect(unsubscribeReconnectFn).toHaveBeenCalledTimes(1) }) it('should work with revalidateOnFocus', async () => { const key = createKey() let value = 0 function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0, focusThrottleInterval: 0 }) return <>{String(data)} } renderWithConfig(, { provider: () => provider }) screen.getByText('undefined') await screen.findByText('0') await nextTick() await focusOn(window) await nextTick() screen.getByText('1') }) it('should support fallback values with custom provider', async () => { const key = createKey() function Page() { const { data, isLoading } = useSWR(key, async () => { await sleep(10) return 'data' }) return ( <> {String(data)},{String(isLoading)} ) } renderWithConfig(, { provider: () => provider, fallback: { [key]: 'fallback' } }) screen.getByText('fallback,true') // no `undefined`, directly fallback await screen.findByText('data,false') }) it('should not return the fallback if cached', async () => { const key = createKey() function Page() { const { data } = useSWR(key, async () => { await sleep(10) return 'data' }) return <>{String(data)} } renderWithConfig(, { provider: () => new Map([[key, { data: 'cache' }]]), fallback: { [key]: 'fallback' } }) screen.getByText('cache') // no `undefined`, directly from the cache await screen.findByText('data') }) it('should be able to extend the parent cache', async () => { let parentCache const key = createKey() function Page() { const { data } = useSWR(key, async () => { await sleep(10) return 'data' }) return <>{String(data)} } renderWithConfig(, { provider: parentCache_ => { parentCache = parentCache_ return { keys: () => parentCache.keys(), set: (k, v) => parentCache_.set(k, v), get: k => { // We append `-extended` to the value returned by the parent cache. const v = parentCache_.get(k) if (v && typeof v.data !== 'undefined') { return { ...v, data: v.data + '-extended' } } return v }, delete: k => parentCache_.delete(k) } } }) expect(parentCache).toBe(SWRConfig.defaultValue.cache) screen.getByText('undefined') await screen.findByText('data-extended') }) it('should return the cache instance from the useSWRConfig', async () => { let cache function Page() { cache = useSWRConfig().cache return null } renderWithConfig(, { provider: () => provider }) expect(provider).toBe(cache) }) it('should retain the correct cache hierarchy', async () => { const key = createKey() const fetcher = async () => { await sleep(10) return 'data' } function Foo() { const { data } = useSWR(key, fetcher) return <>{String(data)} } function Bar() { const { data } = useSWR(key, fetcher) return <>{String(data)} } function Page() { const { data } = useSWR(key, fetcher) return (
{String(data)}, ,
) } renderWithConfig() screen.getByText('undefined,fallback,undefined') await screen.findByText('data,data,data') }) it('should not recreate the cache if rerendering', async () => { const createCacheProvider = jest.fn() let rerender function Page() { rerender = useState({})[1] return ( { createCacheProvider() return provider } }} /> ) } renderWithConfig() expect(createCacheProvider).toHaveBeenCalledTimes(1) act(() => rerender({})) expect(createCacheProvider).toHaveBeenCalledTimes(1) }) }) describe('useSWR - global cache', () => { it('should return the global cache and mutate by default', async () => { let localCache, localMutate function Page() { const { cache, mutate } = useSWRConfig() localCache = cache localMutate = mutate return null } renderWithGlobalCache() expect(localCache).toBe(SWRConfig.defaultValue.cache) expect(localMutate).toBe(globalMutate) }) it('should be able to update the cache', async () => { const fetcher = _key => 'res:' + _key const keys = [createKey(), createKey()] let cache function Page() { const [index, setIndex] = useState(0) cache = useSWRConfig().cache const { data } = useSWR(keys[index], fetcher) return
setIndex(1)}>{data}
} renderWithGlobalCache() await screen.findByText(fetcher(keys[0])) expect(cache.get(keys[1])?.data).toBe(undefined) fireEvent.click(screen.getByText(fetcher(keys[0]))) await act(() => sleep(10)) expect(cache.get(keys[0])?.data).toBe(fetcher(keys[0])) expect(cache.get(keys[1])?.data).toBe(fetcher(keys[1])) }) it('should correctly mutate the cached value', async () => { const key = createKey() let mutate function Page() { const { mutate: mutateWithCache } = useSWRConfig() mutate = mutateWithCache const { data } = useSWR(key, null) return
data:{data}
} renderWithGlobalCache() screen.getByText('data:') await act(() => mutate(key, 'mutated value', false)) await screen.findByText('data:mutated value') }) it('should work with revalidateOnFocus', async () => { const key = createKey() let value = 0 function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0, focusThrottleInterval: 0 }) return <>{String(data)} } renderWithGlobalCache() screen.getByText('undefined') await screen.findByText('0') await nextTick() await focusOn(window) await nextTick() screen.getByText('1') }) it('should support fallback values', async () => { const key = createKey() function Page() { const { data } = useSWR(key, async () => { await sleep(10) return 'data' }) return <>{String(data)} } renderWithGlobalCache(, { fallback: { [key]: 'fallback' } }) screen.getByText('fallback') // no `undefined`, directly fallback await screen.findByText('data') }) it('should reusing the same cache instance after unmounting SWRConfig', async () => { let focusEventRegistered = false const cacheSingleton = new Map([['key', { data: 'value' }]]) function Page() { return ( cacheSingleton, initFocus: () => { focusEventRegistered = true return () => (focusEventRegistered = false) } }} > ) } function Comp() { const { cache } = useSWRConfig() return <>{String(cache.get('key')?.data)} } function Wrapper() { const [mount, setMountPage] = useState(true) return ( <> {mount ? : null} ) } renderWithGlobalCache() await screen.findByText('value') fireEvent.click(screen.getByText('toggle')) fireEvent.click(screen.getByText('toggle')) await screen.findByText('value') expect(focusEventRegistered).toEqual(true) }) it('should correctly return the cache instance under strict mode', async () => { function Page() { // Intentionally do this. const [cache] = useState(new Map([['key', { data: 'value' }]])) return ( cache }}> ) } function Comp() { const { cache } = useSWRConfig() return <>{String(cache.get('key')?.data)} } renderWithGlobalCache( ) await screen.findByText('value') }) }) ================================================ FILE: test/use-swr-concurrent-rendering.test.tsx ================================================ import { screen } from '@testing-library/react' import { createKey, createResponse, sleep, executeWithoutBatching, renderWithConfig } from './utils' import React, { act } from 'react' import useSWR from 'swr' describe('useSWR - concurrent rendering', () => { it('should fetch data in concurrent rendering', async () => { const key = createKey() function Page() { const { data } = useSWR(key, () => createResponse('0', { delay: 50 }), { dedupingInterval: 0 }) return
data:{data}
} renderWithConfig() screen.getByText('data:') await act(() => sleep(100)) screen.getByText('data:0') }) // https://codesandbox.io/s/concurrent-swr-case-ii-lr6x4u it.skip('should do state updates in transitions', async () => { const key1 = createKey() const key2 = createKey() const log = [] function Counter() { const [count, setCount] = React.useState(0) React.useEffect(() => { const interval = setInterval(() => { setCount(x => x + 1) }, 20) return () => clearInterval(interval) }, []) log.push(count) return <>{count} } function Body() { useSWR(key2, () => createResponse(true, { delay: 1000 }), { revalidateOnFocus: false, revalidateOnReconnect: false, dedupingInterval: 0, suspense: true }) return null } function Page() { const { data } = useSWR(key1, () => createResponse(true, { delay: 50 }), { revalidateOnFocus: false, revalidateOnReconnect: false, dedupingInterval: 0 }) return ( <> {data ? : null} ) } await executeWithoutBatching(async () => { renderWithConfig() await sleep(500) }) }) }) ================================================ FILE: test/use-swr-config-callbacks.test.tsx ================================================ import { screen, fireEvent } from '@testing-library/react' import { act } from 'react' import useSWR from 'swr' import { sleep, createResponse, renderWithConfig, createKey } from './utils' describe('useSWR - config callbacks', () => { it('should trigger the onSuccess event with the latest version of the onSuccess callback', async () => { let state = null let count = 0 const key = createKey() function Page(props: { text: string }) { const { data, mutate } = useSWR(key, () => createResponse(count++), { onSuccess: () => (state = props.text) }) return (
mutate()}> hello, {data}, {props.text}
) } const { rerender } = renderWithConfig() // the onSuccess callback does not trigger yet, the state is still null. screen.getByText('hello, , a') expect(state).toEqual(null) await screen.findByText('hello, 0, a') expect(state).toEqual('a') // props changed, but the onSuccess callback does not trigger yet, `state` is same as before rerender() screen.getByText('hello, 0, b') expect(state).toEqual('a') // trigger revalidation, this would re-trigger the onSuccess callback fireEvent.click(screen.getByText(/hello/)) await screen.findByText('hello, 1, b') // the onSuccess callback should capture the latest `props.text` expect(state).toEqual('b') }) it('should trigger the onError event with the latest version of the onError callback', async () => { let state = null let count = 0 const key = createKey() function Page(props: { text: string }) { const { data, mutate, error } = useSWR( key, () => createResponse(new Error(`Error: ${count++}`)), { onError: () => (state = props.text) } ) if (error) return (
mutate()}> {error.message}
) return (
mutate()}> <> hello, {data}, {props.text}
) } const { rerender } = renderWithConfig() screen.getByText('hello, , a') expect(state).toEqual(null) await screen.findByText('Error: 0') expect(state).toEqual('a') // props changed, but the onError callback does not trigger yet. rerender() screen.getByText('Error: 0') screen.getByTitle('b') expect(state).toEqual('a') fireEvent.click(screen.getByTitle('b')) await screen.findByText('Error: 1') screen.getByTitle('b') expect(state).toEqual('b') }) it('should trigger the onErrorRetry event with the latest version of the onErrorRetry callback', async () => { let state = null let count = 0 const key = createKey() function Page(props: { text: string }) { const { data, error } = useSWR( key, () => createResponse(new Error(`Error: ${count++}`)), { onErrorRetry: (_, __, ___, revalidate, revalidateOpts) => { state = props.text revalidate(revalidateOpts) } } ) if (error) return
{error.message}
return (
<> hello, {data}, {props.text}
) } const { rerender } = renderWithConfig() screen.getByText('hello, , a') expect(state).toEqual(null) await screen.findByText('Error: 0') screen.getByTitle('a') expect(state).toEqual('a') // since the onErrorRetry schedule a timer to trigger revalidation, and update props.text now rerender() // not revalidated yet. screen.getByText('Error: 0') screen.getByTitle('b') expect(state).toEqual('a') // revalidate await screen.findByText('Error: 1') screen.getByTitle('b') expect(state).toEqual('b') }) it('should trigger the onLoadingSlow and onSuccess event with the lastest version of the callbacks', async () => { const LOADING_TIMEOUT = 100 let state = null let count = 0 const key = createKey() function Page(props: { text: string }) { const { data } = useSWR( key, () => createResponse(count++, { delay: LOADING_TIMEOUT * 2 }), { onLoadingSlow: () => { state = props.text }, onSuccess: () => { state = props.text }, loadingTimeout: LOADING_TIMEOUT } ) return (
hello, {data}, {props.text}
) } const { rerender } = renderWithConfig() screen.getByText('hello, , a') expect(state).toEqual(null) // should trigger a loading slow event await act(() => sleep(LOADING_TIMEOUT * 1.5)) screen.getByText('hello, , a') expect(state).toEqual('a') // onSuccess callback should be called with the latest prop value rerender() await screen.findByText('hello, 0, b') expect(state).toEqual('b') }) it('should trigger the onDiscarded callback when having a race condition with mutate', async () => { const key = createKey() const discardedEvents = [] function Page() { const { mutate } = useSWR( key, () => createResponse('foo', { delay: 50 }), { onDiscarded: k => { discardedEvents.push(k) } } ) return
mutate('bar')}>mutate
} renderWithConfig() screen.getByText('mutate') await act(() => sleep(10)) fireEvent.click(screen.getByText('mutate')) await act(() => sleep(80)) // Should have one event recorded. expect(discardedEvents).toEqual([key]) }) it('should not trigger the onSuccess callback when discarded', async () => { const key = createKey() const discardedEvents = [] const successEvents = [] function Page() { const { mutate } = useSWR( key, () => createResponse('foo', { delay: 50 }), { onDiscarded: k => { discardedEvents.push(k) }, onSuccess: d => { successEvents.push(d) } } ) return
mutate('bar', false)}>mutate
} renderWithConfig() screen.getByText('mutate') await act(() => sleep(10)) fireEvent.click(screen.getByText('mutate')) await act(() => sleep(80)) // Should have one event recorded. expect(discardedEvents).toEqual([key]) expect(successEvents).toEqual([]) }) }) ================================================ FILE: test/use-swr-config.test.tsx ================================================ import { screen, fireEvent } from '@testing-library/react' import { useEffect, useState, act } from 'react' import type { Middleware } from 'swr' import useSWR, { SWRConfig, useSWRConfig } from 'swr' import { renderWithConfig, createKey, renderWithGlobalCache, sleep } from './utils' describe('useSWR - configs', () => { it('should read the config fallback from the context', async () => { let value = 0 const INTERVAL = 100 const fetcher = () => value++ const key = createKey() function Page() { const { data } = useSWR(key) return
data: {data}
} renderWithConfig(, { fetcher, refreshInterval: INTERVAL, dedupingInterval: 0 }) // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') // wait for the refresh interval await screen.findByText('data: 1') }) it('should stop revalidations when config.isPaused returns true', async () => { const key = createKey() let value = 0 const fetcher = () => { if (value === 2) throw new Error() return value++ } let mutate function Page() { const [paused, setPaused] = useState(false) const { data, error, mutate: _mutate } = useSWR(key, fetcher, { revalidateOnMount: true, refreshInterval: 1, isPaused() { return paused } }) mutate = _mutate useEffect(() => { // revalidate on the mount and turn to idle setPaused(true) }, []) return (
setPaused(!paused)}> {error ? error : `data: ${data}`}
) } renderWithConfig() await screen.findByText('data: 0') // should not be revalidated await act(() => mutate()) screen.getByText('data: 0') await act(() => mutate()) screen.getByText('data: 0') // enable isPaused fireEvent.click(screen.getByText('data: 0')) // should be revalidated await act(() => mutate()) screen.getByText('data: 1') // disable isPaused fireEvent.click(screen.getByText('data: 1')) // should not be revalidated await act(() => mutate()) screen.getByText('data: 1') await act(() => mutate()) screen.getByText('data: 1') }) it('should skip initial revalidation when isPaused is true and revalidateOnMount is true', async () => { const key = createKey() let value = 0 const fetcher = async () => { await sleep(50) return value++ } function Page() { const [paused, setPaused] = useState(false) const { data, isLoading, isValidating } = useSWR(key, fetcher, { revalidateOnMount: true, refreshInterval: 1, isPaused() { return true } }) return (
setPaused(!paused)}> {`data: ${data} | isLoading: ${ isLoading ? 'yes' : 'no' } | isValidating: ${isValidating ? 'yes' : 'no'}`}
) } renderWithConfig() // should not revalidate on mount screen.getByText('data: undefined | isLoading: no | isValidating: no') }) it('should expose default config as static property on SWRConfig', () => { expect(SWRConfig.defaultValue).toBeDefined() }) it('should expose the default config from useSWRConfig', () => { let config function Page() { config = useSWRConfig() return null } renderWithGlobalCache() expect(SWRConfig.defaultValue).toEqual(config) }) it('should expose the correctly extended config from useSWRConfig', () => { let config function Page() { config = useSWRConfig() return null } const middleware1: Middleware = useSWRNext => (k, f, c) => useSWRNext(k, f, c) const middleware2: Middleware = useSWRNext => (k, f, c) => useSWRNext(k, f, c) renderWithConfig( ) expect(config.dedupingInterval).toEqual(2) expect(config.refreshInterval).toEqual(1) expect(config.fallback).toEqual({ a: 2, b: 1, c: 2 }) expect(config.use).toEqual([middleware1, middleware2]) }) it('should ignore parent config when value is functional', async () => { let config function Page() { config = useSWRConfig() return null } const middleware1: Middleware = useSWRNext => (k, f, c) => useSWRNext(k, f, c) const middleware2: Middleware = useSWRNext => (k, f, c) => useSWRNext(k, f, c) renderWithConfig( ({ dedupingInterval: 2 + parentConfig.dedupingInterval, fallback: { a: 2, c: 2 }, use: [middleware2] })} > ) expect(config.dedupingInterval).toEqual(3) expect(config.refreshInterval).toEqual(undefined) expect(config.fallback).toEqual({ a: 2, c: 2 }) expect(config.use).toEqual([middleware2]) }) it('should not occur error when fallback is undefined', async () => { const key = createKey() const fetcher = () => 'data' function Page() { const { data } = useSWR(key) return
data: {data}
} renderWithConfig(, { fetcher, fallback: undefined }) // hydration screen.getByText('data:') // mount await screen.findByText('data: data') }) }) ================================================ FILE: test/use-swr-context-config.test.tsx ================================================ import { render, screen, fireEvent } from '@testing-library/react' import { act } from 'react' import useSWR, { mutate, SWRConfig, type SWRConfiguration, useSWRConfig } from 'swr' import { createKey, createResponse, renderWithGlobalCache } from './utils' import { useCallback, useEffect, useState } from 'react' describe('useSWR - context configs', () => { it('mutate before mount should not block rerender', async () => { const prefetch = () => createResponse('prefetch-data') const fetcher = () => createResponse('data') const key = createKey() await act(async () => { await mutate(key, prefetch) }) function Page() { const { data } = useSWR(key, fetcher) return
{data}
} renderWithGlobalCache() // render with the prefetched data screen.getByText('prefetch-data') // render the fetched data await screen.findByText('data') }) }) describe('useSWRConfig hook maintains stable reference across re-renders', () => { it('should maintain the same swrConfig reference when counter updates', () => { const parentConfig: SWRConfiguration = { revalidateOnMount: true, revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false } const counterButtonText = 'counter + 1' let useSWRConfigReferenceChangedTimes = 0 function Page() { return ( ) } function ChildComponent() { const swrConfig = useSWRConfig() const [, setCounter] = useState(0) const counterAddOne = useCallback( () => setCounter(prev => prev + 1), [setCounter] ) useEffect(() => { useSWRConfigReferenceChangedTimes += 1 }, [swrConfig]) return } render() fireEvent.click(screen.getByText(counterButtonText)) fireEvent.click(screen.getByText(counterButtonText)) fireEvent.click(screen.getByText(counterButtonText)) expect(useSWRConfigReferenceChangedTimes).toBe(1) }) }) ================================================ FILE: test/use-swr-devtools.test.tsx ================================================ import { screen } from '@testing-library/react' import React from 'react' describe('useSWR - devtools', () => { let useSWR, createKey, createResponse, renderWithConfig beforeEach(() => { const middleware = useSWRNext => (...args) => { const result = useSWRNext(...args) return { ...result, data: 'middleware' } } // @ts-expect-error window.__SWR_DEVTOOLS_USE__ = [middleware] // eslint-disable-next-line @typescript-eslint/no-require-imports ;({ createKey, createResponse, renderWithConfig } = require('./utils')) // eslint-disable-next-line @typescript-eslint/no-require-imports useSWR = require('swr').default }) it('window.__SWR_DEVTOOLS_USE__ should be set as middleware', async () => { const key = createKey() function Page() { const { data } = useSWR(key, () => createResponse('ok')) return
data: {data}
} renderWithConfig() await screen.findByText('data: middleware') }) it('window.__SWR_DEVTOOLS_REACT__ should be the same reference with React', () => { // @ts-expect-error expect(window.__SWR_DEVTOOLS_REACT__).toBe(React) }) }) ================================================ FILE: test/use-swr-error.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import { useEffect, useState, act } from 'react' import useSWR from 'swr' import { sleep, createResponse, createKey, renderWithConfig, mockVisibilityHidden } from './utils' describe('useSWR - error', () => { it('should handle errors', async () => { const key = createKey() function Page() { const { data, error } = useSWR(key, () => createResponse(new Error('error!')) ) if (error) return
{error.message}
return (
<>hello, {data}
) } renderWithConfig() screen.getByText('hello,') // mount await screen.findByText('error!') }) it('should trigger the onError event', async () => { const key = createKey() let erroredSWR = null function Page() { const { data, error } = useSWR( key, () => createResponse(new Error('error!')), { onError: (_, errorKey) => (erroredSWR = errorKey) } ) if (error) return
{error.message}
return (
<>hello, {data}
) } renderWithConfig() screen.getByText('hello,') // mount await screen.findByText('error!') expect(erroredSWR).toEqual(key) }) it('should trigger error retry', async () => { const key = createKey() let count = 0 function Page() { const { data, error } = useSWR( key, () => createResponse(new Error('error: ' + count++), { delay: 100 }), { onErrorRetry: (_, __, ___, revalidate, revalidateOpts) => { setTimeout(() => revalidate(revalidateOpts), 50) }, dedupingInterval: 0 } ) if (error) return
{error.message}
return (
<>hello, {data}
) } renderWithConfig() screen.getByText('hello,') // mount await screen.findByText('error: 0') await act(() => sleep(200)) // retry screen.getByText('error: 1') await act(() => sleep(200)) // retry screen.getByText('error: 2') }) it('should stop retrying when document is not visible', async () => { const key = createKey() let count = 0 function Page() { const { data, error } = useSWR( key, () => createResponse(new Error('error: ' + count++), { delay: 100 }), { onErrorRetry: (_, __, ___, revalidate, revalidateOpts) => { revalidate(revalidateOpts) }, dedupingInterval: 0 } ) if (error) return
{error.message}
return (
<>hello, {data}
) } renderWithConfig() screen.getByText('hello,') // mount await screen.findByText('error: 0') // errored, retrying await act(() => sleep(50)) const resetVisibility = mockVisibilityHidden() await act(() => sleep(100)) screen.getByText('error: 1') await act(() => sleep(100)) // stopped due to invisible screen.getByText('error: 1') resetVisibility() }) it('should not retry when shouldRetryOnError is disabled', async () => { const key = createKey() let count = 0 function Page() { const { data, error } = useSWR( key, () => createResponse(new Error('error: ' + count++), { delay: 100 }), { onErrorRetry: (_, __, ___, revalidate, revalidateOpts) => { revalidate(revalidateOpts) }, dedupingInterval: 0, shouldRetryOnError: false } ) if (error) return
{error.message}
return (
<>hello, {data}
) } renderWithConfig() screen.getByText('hello,') // mount await screen.findByText('error: 0') await act(() => sleep(150)) screen.getByText('error: 0') }) it('should not retry when shouldRetryOnError function returns false', async () => { const key = createKey() let count = 0 function Page() { const { data, error } = useSWR( key, () => createResponse(new Error('error: ' + count++), { delay: 100 }), { onErrorRetry: (_, __, ___, revalidate, revalidateOpts) => { revalidate(revalidateOpts) }, dedupingInterval: 0, shouldRetryOnError: () => false } ) if (error) return
{error.message}
return (
<>hello, {data}
) } renderWithConfig() screen.getByText('hello,') // mount await screen.findByText('error: 0') await act(() => sleep(150)) screen.getByText('error: 0') }) it('should retry when shouldRetryOnError function returns true', async () => { const key = createKey() let count = 0 function Page() { const { data, error } = useSWR( key, () => createResponse(new Error('error: ' + count++), { delay: 100 }), { onErrorRetry: (_, __, ___, revalidate, revalidateOpts) => { revalidate(revalidateOpts) }, dedupingInterval: 0, shouldRetryOnError: () => true } ) if (error) return
{error.message}
return (
<>hello, {data}
) } renderWithConfig() screen.getByText('hello,') // mount await screen.findByText('error: 0') await act(() => sleep(150)) screen.getByText('error: 1') }) it('should trigger the onLoadingSlow and onSuccess event', async () => { const key = createKey() let loadingSlow = null, success = null function Page() { const { data } = useSWR( key, () => createResponse('SWR', { delay: 200 }), { onLoadingSlow: loadingKey => (loadingSlow = loadingKey), onSuccess: (_, successKey) => (success = successKey), loadingTimeout: 100 } ) return
hello, {data}
} renderWithConfig() screen.getByText('hello,') expect(loadingSlow).toEqual(null) await act(() => sleep(150)) // trigger onLoadingSlow event expect(loadingSlow).toEqual(key) expect(success).toEqual(null) await act(() => sleep(150)) // finish the request expect(success).toEqual(key) screen.getByText('hello, SWR') }) it('should trigger limited error retries if errorRetryCount exists', async () => { const key = createKey() let count = 0 function Page() { const { data, error } = useSWR( key, () => createResponse(new Error('error: ' + count++)), { errorRetryCount: 1, errorRetryInterval: 50, dedupingInterval: 0 } ) if (error) return
{error.message}
return (
<>hello, {data}
) } renderWithConfig() screen.getByText('hello,') // mount await screen.findByText('error: 0') await screen.findByText('error: 1') // retry await act(() => sleep(200)) // a retry request won't happen because retryCount is over screen.getByText('error: 1') }) it.skip('should not trigger the onLoadingSlow and onSuccess event after component unmount', async () => { const key = createKey() let loadingSlow = null, success = null function Page() { const { data } = useSWR(key, () => createResponse('SWR'), { onLoadingSlow: loadingKey => { loadingSlow = loadingKey }, onSuccess: (_, successKey) => { success = successKey }, loadingTimeout: 100 }) return
hello, {data}
} function App() { const [on, toggle] = useState(true) return (
toggle(s => !s)}> {on && }
) } renderWithConfig() screen.getByText('hello,') expect(loadingSlow).toEqual(null) expect(success).toEqual(null) fireEvent.click(screen.getByText('hello,')) await act(() => sleep(200)) expect(success).toEqual(null) expect(loadingSlow).toEqual(null) }) it.skip('should not trigger the onError and onErrorRetry event after component unmount', async () => { const key = createKey() let retry = null, failed = null function Page() { const { data } = useSWR(key, () => createResponse(new Error('error!')), { onError: (_, errorKey) => { failed = errorKey }, onErrorRetry: (_, errorKey) => { retry = errorKey }, dedupingInterval: 0 }) return (
<>hello, {data}
) } function App() { const [on, toggle] = useState(true) return (
toggle(s => !s)}> {on && }
) } renderWithConfig() screen.getByText('hello,') expect(retry).toEqual(null) expect(failed).toEqual(null) fireEvent.click(screen.getByText('hello,')) await act(() => sleep(200)) expect(retry).toEqual(null) expect(failed).toEqual(null) }) it('should not trigger error retries if errorRetryCount is set to 0', async () => { const key = createKey() let count = 0 function Page() { const { data, error } = useSWR( key, () => createResponse(new Error('error: ' + count++)), { errorRetryCount: 0, errorRetryInterval: 50, dedupingInterval: 0 } ) if (error) return
{error.message}
return (
<>hello, {data}
) } renderWithConfig() screen.getByText('hello,') // mount await screen.findByText('error: 0') await act(() => sleep(210)) // retry is never happen screen.getByText('error: 0') }) it('should not clear error during revalidating until fetcher is finished successfully', async () => { const errors = [] const key = createKey() let mutate function Page() { const { error, mutate: _mutate } = useSWR( key, () => createResponse(new Error('error')), { errorRetryCount: 0, errorRetryInterval: 0, dedupingInterval: 0 } ) mutate = _mutate useEffect(() => { errors.push(error ? error.message : null) }, [error]) return
hello, {error ? error.message : null}
} renderWithConfig() // mount await screen.findByText('hello, error') await act(() => mutate()) // initial -> first error -> mutate -> receive another error // the error won't be cleared during revalidation expect(errors).toEqual([null, 'error', 'error']) }) it('should reset isValidating when an error occured synchronously', async () => { const key = createKey() function Page() { const { error, isValidating } = useSWR(key, () => { throw new Error('error!') }) if (error) return (
{error.message},{isValidating.toString()}
) return
hello,{isValidating.toString()}
} renderWithConfig() screen.getByText('error!,false') }) it('should reset isValidating when an error occured asynchronously', async () => { const key = createKey() function Page() { const { error, isValidating } = useSWR(key, () => createResponse(new Error('error!')) ) if (error) return (
{error.message},{isValidating.toString()}
) return
hello,{isValidating.toString()}
} renderWithConfig() screen.getByText('hello,true') await screen.findByText('error!,false') }) it('should dedupe onError events', async () => { const key = createKey() const errorEvents = [] function Foo() { useSWR(key, () => createResponse(new Error('error!'), { delay: 20 }), { onError: e => errorEvents.push(e) }) return null } function Page() { return ( <> ) } renderWithConfig() await act(() => sleep(30)) // Since there's only 1 request fired, only 1 error event should be reported. expect(errorEvents.length).toBe(1) }) it('should not trigger revalidation when a key is already active and has error - isLoading', async () => { const key = createKey() const useData = () => { return useSWR(key, () => createResponse(new Error('error!'), { delay: 200 }) ) } const Page = () => { useData() return null } const App = () => { const { error, isLoading } = useData() if (isLoading) return loading return (
{error ? error.message : ''},{isLoading.toString()}
) } renderWithConfig() screen.getByText('loading') await screen.findByText('error!,false') }) it('should not trigger revalidation when a key is already active and has error - isValidating', async () => { const key = createKey() const useData = () => { return useSWR(key, () => createResponse(new Error('error!'), { delay: 200 }) ) } const Page = () => { useData() return null } const App = () => { const { error, isValidating } = useData() if (isValidating) return validating return (
{error ? error.message : ''},{isValidating.toString()}
) } renderWithConfig() screen.getByText('validating') await screen.findByText('error!,false') }) it('should trigger revalidation when first hook is unmount', async () => { const key = createKey() const fn = jest.fn() const useData = () => { return useSWR( key, () => createResponse(new Error('error!'), { delay: 200 }), { onErrorRetry: (_, __, ___, revalidate, opts) => { setTimeout(() => { fn() revalidate(opts) }, 100) }, dedupingInterval: 1 } ) } const First = () => { useData() const [state, setState] = useState(true) return ( <> {state ? : null} ) } const Second = () => { useData() return null } const App = () => { return (
) } renderWithConfig() await act(() => sleep(320)) expect(fn).toHaveBeenCalledTimes(1) fireEvent.click(screen.getByText('toggle')) await act(() => sleep(320)) expect(fn).toHaveBeenCalledTimes(2) await act(() => sleep(320)) expect(fn).toHaveBeenCalledTimes(3) }) }) ================================================ FILE: test/use-swr-fetcher.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import { Suspense, useState, act } from 'react' import useSWR from 'swr' import { createKey, renderWithConfig, nextTick, itShouldSkipForReactCanary } from './utils' describe('useSWR - fetcher', () => { // https://github.com/vercel/swr/issues/1131 it('should use the latest fetcher reference', async () => { const key = createKey() let fetcher = () => 'foo' let mutate let rerender function Page() { const { data, mutate: boundMutate } = useSWR(key, fetcher) rerender = useState({})[1] mutate = boundMutate return
data:{data}
} renderWithConfig() await nextTick() screen.getByText('data:foo') // Change the fetcher and make sure the ref is updated. fetcher = () => 'bar' act(() => rerender({})) // Revalidate. await act(() => mutate()) // Should fetch with the new fetcher. await screen.findByText('data:bar') }) it('should use the latest fetcher reference when the key has been changed', async () => { const key = createKey() let fetcher = () => 'foo' function Page() { const [prefix, setPrefix] = useState('a') const { data } = useSWR(prefix + key, fetcher) return (

data:{data}

) } renderWithConfig() await screen.findByText('data:foo') // Change the fetcher and make sure the ref is updated. fetcher = () => 'bar' fireEvent.click(screen.getByText('mutate')) // Should fetch with the new fetcher. await screen.findByText('data:bar') }) itShouldSkipForReactCanary( 'should use the latest fetcher reference with the suspense mode when the key has been changed', async () => { const key = createKey() let fetcher = () => 'foo' function Page() { const [prefix, setPrefix] = useState('a') const { data } = useSWR(prefix + key, fetcher, { suspense: true }) return (

data:{data}

) } renderWithConfig( ) await screen.findByText('data:foo') // Change the fetcher and make sure the ref is updated. fetcher = () => 'bar' fireEvent.click(screen.getByText('mutate')) // Should fetch with the new fetcher. await screen.findByText('data:bar') } ) it('should be able to pass falsy values to the fetcher', () => { const key = createKey() function Page({ fetcher }) { const { data } = useSWR(key, fetcher) return (

data:{data}

) } const { rerender } = renderWithConfig() screen.getByText('data:') rerender() screen.getByText('data:') rerender() screen.getByText('data:') }) }) ================================================ FILE: test/use-swr-focus.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import { useState, act } from 'react' import useSWR from 'swr' import { sleep, nextTick as waitForNextTick, focusOn, renderWithConfig, createKey } from './utils' const focusWindow = () => focusOn(window) describe('useSWR - focus', () => { it('should revalidate on focus by default', async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0, focusThrottleInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await waitForNextTick() // trigger revalidation await focusWindow() await screen.findByText('data: 1') }) it("shouldn't revalidate on focus when revalidateOnFocus is false", async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0, revalidateOnFocus: false }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await waitForNextTick() // trigger revalidation await focusWindow() // should not be revalidated screen.getByText('data: 0') }) it('revalidateOnFocus should be stateful', async () => { let value = 0 const key = createKey() function Page() { const [revalidateOnFocus, toggle] = useState(false) const { data } = useSWR(key, () => value++, { dedupingInterval: 0, revalidateOnFocus, focusThrottleInterval: 0 }) return
toggle(s => !s)}>data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await waitForNextTick() // trigger revalidation await focusWindow() // data should not change screen.getByText('data: 0') // change revalidateOnFocus to true fireEvent.click(screen.getByText('data: 0')) // trigger revalidation await focusWindow() // data should update await screen.findByText('data: 1') await waitForNextTick() // trigger revalidation await focusWindow() // data should update await screen.findByText('data: 2') await waitForNextTick() // change revalidateOnFocus to false fireEvent.click(screen.getByText('data: 2')) // trigger revalidation await focusWindow() // data should not change screen.getByText('data: 2') }) it('focusThrottleInterval should work', async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0, revalidateOnFocus: true, focusThrottleInterval: 50 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await waitForNextTick() // still in throttling interval await act(() => sleep(20)) // should be throttled await focusWindow() await screen.findByText('data: 0') // wait for focusThrottleInterval await act(() => sleep(100)) // trigger revalidation again await focusWindow() await screen.findByText('data: 1') }) it('focusThrottleInterval should be stateful', async () => { let value = 0 const key = createKey() function Page() { const [focusThrottleInterval, setInterval] = useState(50) const { data } = useSWR(key, () => value++, { dedupingInterval: 0, revalidateOnFocus: true, focusThrottleInterval }) return
setInterval(s => s + 100)}>data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await waitForNextTick() // trigger revalidation, won't revalidate as within 50ms await focusWindow() // wait for throttle interval await act(() => sleep(100)) // trigger revalidation, will revalidate as 50ms passed await focusWindow() await screen.findByText('data: 1') await waitForNextTick() // increase focusThrottleInterval fireEvent.click(screen.getByText('data: 1')) // wait for throttle interval await act(() => sleep(100)) // trigger revalidation await focusWindow() // wait for throttle interval await act(() => sleep(100)) // should be throttled await focusWindow() await screen.findByText('data: 2') // wait for throttle interval await act(() => sleep(150)) // trigger revalidation await focusWindow() // wait for throttle intervals await act(() => sleep(150)) await screen.findByText('data: 3') }) it('should revalidate on focus even with custom cache', async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { revalidateOnFocus: true, dedupingInterval: 0, focusThrottleInterval: 0 }) return
data: {data}
} renderWithConfig() screen.getByText('data:') await screen.findByText('data: 0') await waitForNextTick() await focusWindow() await screen.findByText('data: 1') }) it('should not revalidate on focus when key changes in the same tick', async () => { const fetchLogs = [] function Page() { const [key, setKey] = useState(() => createKey()) useSWR(key, k => fetchLogs.push(k), { revalidateOnFocus: true, dedupingInterval: 0 }) return
setKey(createKey())}>change key
} renderWithConfig() await waitForNextTick() fireEvent.focus(window) fireEvent.click(screen.getByText('change key')) await waitForNextTick() // Only fetched twice with the initial and the new keys. expect(fetchLogs.length).toBe(2) expect(fetchLogs[0]).not.toEqual(fetchLogs[1]) }) }) ================================================ FILE: test/use-swr-immutable.test.tsx ================================================ import { screen, fireEvent } from '@testing-library/react' import { useState, act, Profiler } from 'react' import useSWR, { SWRConfig } from 'swr' import useSWRImmutable, { immutable } from 'swr/immutable' import { sleep, createKey, nextTick as waitForNextTick, focusOn, renderWithConfig, createResponse } from './utils' const focusWindow = () => focusOn(window) describe('useSWR - immutable', () => { it('should revalidate on mount', async () => { let value = 0 const key = createKey() const useData = () => useSWR(key, () => value++, { dedupingInterval: 0 }) function Component() { useData() return null } function Page() { const [showComponent, setShowComponent] = useState(false) const { data } = useData() return (

data: {data}

{showComponent ? : null}
) } renderWithConfig() // hydration screen.getByText('mount component') screen.getByText('data:') // ready await screen.findByText('data: 0') // mount by clicking the button fireEvent.click(screen.getByText('mount component')) // wait for rerender await screen.findByText('data: 1') }) it('should not revalidate on mount when `revalidateIfStale` is enabled', async () => { let value = 0 const key = createKey() const useData = () => useSWR(key, () => value++, { dedupingInterval: 0, revalidateIfStale: false }) function Component() { useData() return null } function Page() { const [showComponent, setShowComponent] = useState(false) const { data } = useData() return (

data: {data}

{showComponent ? : null}
) } renderWithConfig() // hydration screen.getByText('mount component') screen.getByText('data:') // ready await screen.findByText('data: 0') // mount by clicking the button fireEvent.click(screen.getByText('mount component')) // wait for rerender await act(() => sleep(50)) await screen.findByText('data: 0') }) it('should not revalidate with the immutable hook', async () => { let value = 0 const key = createKey() const useData = () => useSWRImmutable(key, () => value++, { dedupingInterval: 0 }) function Component() { useData() return null } function Page() { const [showComponent, setShowComponent] = useState(false) const { data } = useData() return (

data: {data}

{showComponent ? : null}
) } renderWithConfig() // hydration screen.getByText('mount component') screen.getByText('data:') // ready await screen.findByText('data: 0') // mount by clicking the button fireEvent.click(screen.getByText('mount component')) // trigger window focus await waitForNextTick() await focusWindow() // wait for rerender await act(() => sleep(50)) await screen.findByText('data: 0') }) it('should not revalidate with the immutable middleware', async () => { let value = 0 const key = createKey() const useData = () => useSWR(key, () => value++, { dedupingInterval: 0, use: [immutable] }) function Component() { useData() return null } function Page() { const [showComponent, setShowComponent] = useState(false) const { data } = useData() return (

data: {data}

{showComponent ? : null}
) } renderWithConfig() // hydration screen.getByText('mount component') screen.getByText('data:') // ready await screen.findByText('data: 0') // mount by clicking the button fireEvent.click(screen.getByText('mount component')) // trigger window focus await waitForNextTick() await focusWindow() // wait for rerender await act(() => sleep(50)) await screen.findByText('data: 0') }) it('should not revalidate with revalidateIfStale disabled when key changes', async () => { const fetcher = jest.fn(v => v) const key = createKey() const useData = (id: string) => useSWR(key + id, fetcher, { dedupingInterval: 0, revalidateIfStale: false }) function Page() { const [id, setId] = useState('0') const { data } = useData(id) return ( ) } renderWithConfig() // Ready await screen.findByText(`data: ${key}0`) // Toggle the key by clicking the button fireEvent.click(screen.getByText(`data: ${key}0`)) await screen.findByText(`data: ${key}1`) await waitForNextTick() // Toggle the key again by clicking the button fireEvent.click(screen.getByText(`data: ${key}1`)) await screen.findByText(`data: ${key}0`) await waitForNextTick() // Toggle the key by clicking the button fireEvent.click(screen.getByText(`data: ${key}0`)) await screen.findByText(`data: ${key}1`) await sleep(20) // `fetcher` should only be called twice, with each key. expect(fetcher).toHaveBeenCalledTimes(2) expect(fetcher).toHaveBeenNthCalledWith(1, key + '0') expect(fetcher).toHaveBeenNthCalledWith(2, key + '1') }) it('isLoading and isValidating should be true when switch to new key', async () => { const key = createKey() const onRender = jest.fn() const useData = (id: string) => useSWRImmutable( key + id, () => createResponse(id, { delay: 100 }), { dedupingInterval: 0 } ) function Data() { const [id, setId] = useState('0') const { data, isLoading, isValidating } = useData(id) return (

data: {data}, isLoading: {isLoading ? 'true' : 'false'}, isValidating: {isValidating ? 'true' : 'false'}

) } function Page() { return ( { onRender(id, phase) }} id={key} > ) } renderWithConfig() await screen.findByText(`data: , isLoading: true, isValidating: true`) await screen.findByText(`data: 0, isLoading: false, isValidating: false`) fireEvent.click(screen.getByText('switch id')) await screen.findByText(`data: , isLoading: true, isValidating: true`) await screen.findByText(`data: 1, isLoading: false, isValidating: false`) expect(onRender).toHaveBeenCalledTimes(4) }) }) describe('issue #4207', () => { it('should ignore global refreshInterval', async () => { let fetchCount = 0 const fetcher = () => { fetchCount++ return 'data' } function Page() { const { data } = useSWRImmutable('key', fetcher) return
{data}
} renderWithConfig( new Map() }} > ) await screen.findByText('data') expect(fetchCount).toBe(1) await new Promise(resolve => setTimeout(resolve, 300)) expect(fetchCount).toBe(1) }) }) ================================================ FILE: test/use-swr-infinite-preload.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import { Suspense, useEffect, useState, Profiler, act } from 'react' import { preload } from 'swr' import useSWRInfinite from 'swr/infinite' import { createKey, createResponse, itShouldSkipForReactCanary, renderWithConfig, sleep } from './utils' describe('useSWRInfinite - preload', () => { const getKeyFunction = (key: string) => (index: number) => `page-${index}-${key}` it('preloading useSWRInfinite should produce the same result', async () => { const key = createKey() const getKey = getKeyFunction(key) const fetcher = jest.fn(() => createResponse('foo')) function Page() { const { data } = useSWRInfinite(getKey, fetcher) return
data:{Array.isArray(data) ? 'true' : 'false'}
} preload(getKey(0), fetcher) renderWithConfig() await screen.findByText('data:true') }) it('preload the fetcher function', async () => { const key = createKey() const getKey = getKeyFunction(key) const fetcher = jest.fn(() => createResponse('foo')) function Page() { const { data } = useSWRInfinite(getKey, fetcher) return
data:{data}
} preload(getKey(0), fetcher) expect(fetcher).toHaveBeenCalledTimes(1) renderWithConfig() await screen.findByText('data:foo') expect(fetcher).toHaveBeenCalledTimes(1) }) it('should avoid preloading the resource multiple times', async () => { const key = createKey() const getKey = getKeyFunction(key) const fetcher = jest.fn(() => createResponse('foo')) function Page() { const { data } = useSWRInfinite(getKey, fetcher) return
data:{data}
} preload(getKey(0), fetcher) preload(getKey(0), fetcher) preload(getKey(0), fetcher) expect(fetcher).toHaveBeenCalledTimes(1) renderWithConfig() await screen.findByText('data:foo') expect(fetcher).toHaveBeenCalledTimes(1) }) it('should be able to prealod resources in effects', async () => { const key = createKey() const getKey = getKeyFunction(key) const fetcher = jest.fn(() => createResponse('foo')) function Comp() { const { data } = useSWRInfinite(getKey, fetcher) return
data:{data}
} function Page() { const [show, setShow] = useState(false) useEffect(() => { preload(getKey(0), fetcher) }, []) return show ? ( ) : ( ) } renderWithConfig() expect(fetcher).toHaveBeenCalledTimes(1) fireEvent.click(screen.getByText('click')) await screen.findByText('data:foo') expect(fetcher).toHaveBeenCalledTimes(1) }) itShouldSkipForReactCanary( 'preload the fetcher function with the suspense mode', async () => { const key = createKey() const getKey = getKeyFunction(key) const fetcher = jest.fn(() => createResponse('foo')) const onRender = jest.fn() function Page() { const { data } = useSWRInfinite(getKey, fetcher, { suspense: true }) return
data:{data}
} preload(getKey(0), fetcher) expect(fetcher).toHaveBeenCalledTimes(1) renderWithConfig( loading } > ) await screen.findByText('data:foo') expect(onRender).toHaveBeenCalledTimes(1) expect(fetcher).toHaveBeenCalledTimes(1) } ) it.skip('avoid suspense waterfall by prefetching the resources', async () => { const key1 = createKey() const getKey1 = getKeyFunction(key1) const key2 = createKey() const getKey2 = getKeyFunction(key2) const response1 = createResponse('foo', { delay: 50 }) const response2 = createResponse('bar', { delay: 50 }) const fetcher1 = () => response1 const fetcher2 = () => response2 function Page() { const { data: data1 } = useSWRInfinite(getKey1, fetcher1, { suspense: true }) const { data: data2 } = useSWRInfinite(getKey2, fetcher2, { suspense: true }) return (
data:{data1}:{data2}
) } preload(getKey1(0), fetcher1) preload(getKey2(0), fetcher2) renderWithConfig( ) screen.getByText('loading') //Should avoid waterfall(50ms + 50ms) await act(() => sleep(80)) screen.getByText('data:foo:bar') }) it('reset the preload result when the preload function gets an error', async () => { const key = createKey() const getKey = getKeyFunction(key) let count = 0 const fetcher = () => { ++count const res = count === 1 ? new Error('err') : 'foo' return createResponse(res) } let mutate function Page() { const { data, error, ...swr } = useSWRInfinite(getKey, fetcher) mutate = swr.mutate if (error) { return
error:{error.message}
} return
data:{data}
} try { // error await preload(getKey(0), fetcher) } catch (e) { // noop } renderWithConfig() screen.getByText('data:') // use the preloaded result await screen.findByText('error:err') expect(count).toBe(1) // revalidate await act(() => mutate(getKey(0))) // should not use the preload data await screen.findByText('data:foo') }) it('dedupe requests during preloading', async () => { const key = createKey() const getKey = getKeyFunction(key) const fetcher = jest.fn(() => createResponse('foo', { delay: 50 }) ) const onRender = jest.fn() function Page() { const { data } = useSWRInfinite(getKey, fetcher, { dedupingInterval: 0 }) return ( data:{data} ) } preload(getKey(0), fetcher) expect(fetcher).toHaveBeenCalledTimes(1) const { rerender } = renderWithConfig() expect(onRender).toHaveBeenCalledTimes(1) // rerender when the preloading is in-flight, and the deduping interval is over await act(() => sleep(10)) rerender() expect(onRender).toHaveBeenCalledTimes(2) await screen.findByText('data:foo') expect(fetcher).toHaveBeenCalledTimes(1) expect(onRender).toHaveBeenCalledTimes(3) }) it('should pass serialize key to fetcher', async () => { const key = createKey() const getKey = getKeyFunction(key) let calledWith: string const fetcher = (args: string) => { calledWith = args } preload(() => getKey(0), fetcher) expect(calledWith).toBe(getKey(0)) }) it('should not break parallel option', async () => { // mock api const pageData = ['apple', 'banana', 'pineapple'] const key = createKey() const fetcher = ([_, index]) => createResponse(`${pageData[index]}, `, { delay: index === 0 ? 50 : 200 }) function Page() { const { data } = useSWRInfinite(index => [key, index], fetcher, { initialSize: 3, parallel: true }) return
data:{data}
} preload([key, 0], fetcher) renderWithConfig() screen.getByText('data:') // If SWR sends parallel requests, it should only take 200ms await act(() => sleep(200)) screen.getByText('data:apple, banana, pineapple,') }) it('should be able to preload multiple page', async () => { // mock api const pageData = ['apple', 'banana', 'pineapple'] const key = createKey() const fetcher = ([_, index]) => createResponse(`${pageData[index]}, `, { delay: 50 }) function Page() { const { data } = useSWRInfinite(index => [key, index], fetcher, { initialSize: 3, parallel: true }) return
data:{data}
} preload([key, 0], fetcher) preload([key, 1], fetcher) preload([key, 2], fetcher) renderWithConfig() screen.getByText('data:') await act(() => sleep(50)) screen.getByText('data:apple, banana, pineapple,') }) }) ================================================ FILE: test/use-swr-infinite.test.tsx ================================================ import { Suspense, useEffect, useState, act } from 'react' import { fireEvent, screen } from '@testing-library/react' import useSWR, { mutate as globalMutate, useSWRConfig, SWRConfig } from 'swr' import useSWRInfinite, { unstable_serialize } from 'swr/infinite' import { sleep, createKey, createResponse, nextTick, renderWithConfig, renderWithGlobalCache, executeWithoutBatching, itShouldSkipForReactCanary } from './utils' describe('useSWRInfinite', () => { it('should render the first page component', async () => { const key = createKey() function Page() { const { data, error, isValidating } = useSWRInfinite( index => `page-${index}-${key}`, infiniteKey => createResponse(infiniteKey) ) return (
data:{data}
isArray:{Array.isArray(data) ? 'true' : 'false'}
error:{error}
isValidating:{isValidating.toString()}
) } renderWithConfig() screen.getByText('data:') await screen.findByText(`data:page-0-${key}`) await screen.findByText(`isArray:true`) await screen.findByText(`error:`) await screen.findByText(`isValidating:false`) }) it('should not render anything if getKey throw error and call mutate wont cause error', async () => { function Page() { const { data, error, isValidating, mutate } = useSWRInfinite( () => { throw new Error('error') }, infiniteKey => createResponse(infiniteKey) ) return (
mutate()}>data:{data}
error:{error}
isValidating:{isValidating.toString()}
) } renderWithConfig() screen.getByText('data:') await screen.findByText(`data:`) await screen.findByText(`error:`) await screen.findByText(`isValidating:false`) fireEvent.click(screen.getByText('data:')) await screen.findByText(`data:`) await screen.findByText(`error:`) await screen.findByText(`isValidating:false`) }) it('should render the multiple pages', async () => { const key = createKey() function Page() { const { data, size, setSize } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(`page ${index}, `) ) useEffect(() => { // load next page if the current one is ready if (size <= 2) setSize(size + 1) // The setSize function is guaranteed to be referential equal // eslint-disable-next-line react-hooks/exhaustive-deps }, [size]) return
data:{data}
} renderWithConfig() screen.getByText('data:') await screen.findByText('data:page 0, page 1, page 2,') }) it('should support mutate and initialSize', async () => { // mock api const pageData = ['apple', 'banana', 'pineapple'] const key = createKey() function Page() { const { data, mutate: boundMutate } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(`${pageData[index]}, `), { initialSize: 3 } ) return (
{ // reload the entire list boundMutate() }} > data:{data}
) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:apple, banana, pineapple,') // change the source data to 'watermelon' pageData[1] = 'watermelon' // revalidate fireEvent.click(screen.getByText('data:apple, banana, pineapple,')) await screen.findByText('data:apple, watermelon, pineapple,') }) it('should support api cursor', async () => { // an API that supports the `?offset=` param async function mockAPIFetcher(url) { const parse = url.match(/\?offset=(\d+)/) const offset = parse ? +parse[1] + 1 : 0 const response = offset <= 3 ? [ { data: 'foo', id: offset }, { data: 'bar', id: offset + 1 } ] : [] return createResponse(response) } const key = createKey() function Page() { const { data } = useSWRInfinite( (index, previousPageData) => { // first page if (index === 0) return `/api/${key}` // hit the end if (!previousPageData.length) { return null } // fetch with offset return `/api/${key}?offset=${ previousPageData[previousPageData.length - 1].id }` }, mockAPIFetcher, { initialSize: 5 } ) if (!data) return
loading
const hitEnd = data[data.length - 1].length === 0 return (
{data.map(page => { return page.map(item => { return ( {item.id}: {item.data},{' '} ) }) })} {hitEnd ? 'end.' : ''}
) } renderWithConfig() screen.getByText('loading') await screen.findByText('0: foo,') await screen.findByText('1: bar,') await screen.findByText('2: foo,') await screen.findByText('3: bar,') await screen.findByText('end.') }) it('should skip fetching existing pages when loading more', async () => { let requests = 0 const key = createKey() function Page() { const { data, size, setSize } = useSWRInfinite( index => [key, index], ([_, index]) => { requests++ return createResponse(`page ${index}, `) } ) return (
{ // load next page setSize(size + 1) }} > data:{data}
) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:page 0,') // mounted expect(requests).toEqual(1) // load next page fireEvent.click(screen.getByText('data:page 0,')) await screen.findByText('data:page 0, page 1,') // mounted expect(requests).toEqual(3) // revalidate page 0, load page 1 // load next page fireEvent.click(screen.getByText('data:page 0, page 1,')) await screen.findByText('data:page 0, page 1, page 2,') // mounted expect(requests).toEqual(5) // revalidate page 0, load page 2 // load next page fireEvent.click(screen.getByText('data:page 0, page 1, page 2,')) await screen.findByText('data:page 0, page 1, page 2, page 3,') // mounted expect(requests).toEqual(7) // revalidate page 0, load page 3 }) it('should not revalidate page 0 when revalidateFirstPage is false', async () => { let requests = 0 const key = createKey() function Page() { const { data, size, setSize } = useSWRInfinite( index => [key, index], ([_, index]) => { requests++ return createResponse(`page ${index}, `) }, { revalidateFirstPage: false } ) return (
{ // load next page setSize(size + 1) }} > data:{data}
) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:page 0,') // mounted expect(requests).toEqual(1) // load next page fireEvent.click(screen.getByText('data:page 0,')) await screen.findByText('data:page 0, page 1,') // mounted expect(requests).toEqual(2) // load page 1 // load next page fireEvent.click(screen.getByText('data:page 0, page 1,')) await screen.findByText('data:page 0, page 1, page 2,') // mounted expect(requests).toEqual(3) // load page 2 // load next page fireEvent.click(screen.getByText('data:page 0, page 1, page 2,')) await screen.findByText('data:page 0, page 1, page 2, page 3,') // mounted expect(requests).toEqual(4) // load page 3 }) it('should cache page count', async () => { let toggle const key = createKey() function Page() { const { data, size, setSize } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(`page ${index}, `) ) return (
{ // load next page setSize(size + 1) }} > data:{data}
) } function App() { const [showList, setShowList] = useState(true) toggle = setShowList return showList ? :
yo
} renderWithConfig() screen.getByText('data:') await screen.findByText('data:page 0,') // load next page fireEvent.click(screen.getByText('data:page 0,')) await screen.findByText('data:page 0, page 1,') // switch to another component act(() => toggle(v => !v)) screen.getByText('yo') // switch back and it should still have 2 pages cached act(() => toggle(v => !v)) screen.getByText('data:page 0, page 1,') await act(() => sleep(100)) screen.getByText('data:page 0, page 1,') }) it('should reset page size when key changes', async () => { const key = createKey() function Page() { const [t, setT] = useState(false) const { data, size: pageSize, setSize } = useSWRInfinite( index => [key, index, t ? 'A' : 'B'], ([_, index]) => createResponse(`page ${index}, `, { delay: 20 }), { dedupingInterval: 0 } ) return ( <>
size: {pageSize}
key:{t ? 'A' : 'B'} data:{data}
) } renderWithConfig() screen.getByText('key:B data:') await screen.findByText('key:B data:page 0,') // load next page fireEvent.click(screen.getByText('load next')) await screen.findByText('key:B data:page 0, page 1,') // switch key, it should have only 1 page fireEvent.click(screen.getByText('change key')) await screen.findByText('key:A data:page 0,') // switch key back, it should have 2 pages fireEvent.click(screen.getByText('change key')) await act(() => sleep(40)) await screen.findByText('key:B data:page 0, page 1,') }) it('should persist page size when key changes', async () => { let toggle const key = createKey() function Page() { const [t, setT] = useState(false) const { data, size, setSize } = useSWRInfinite( index => [key, index, t ? 'A' : 'B'], async ([_, index]) => createResponse(`page ${index}, `), { persistSize: true } ) toggle = setT return (
{ // load next page setSize(size + 1) }} > data:{data}
) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:page 0,') // load next page fireEvent.click(screen.getByText('data:page 0,')) await screen.findByText('data:page 0, page 1,') // switch key, it should still have 2 pages act(() => toggle(v => !v)) await screen.findByText('data:page 0, page 1,') }) it('should persist page size when remount', async () => { let toggle const key = createKey() function Comp() { const { data, size, setSize } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(`page ${index}, `) ) return (
{ // load next page setSize(size + 1) }} > data:{data}
) } function Page() { const [show, setShow] = useState(true) toggle = setShow return show ? :
hide
} renderWithConfig() screen.getByText('data:') await screen.findByText('data:page 0,') // load next page fireEvent.click(screen.getByText('data:page 0,')) await screen.findByText('data:page 0, page 1,') // pages should be unmounted now act(() => toggle(v => !v)) await screen.findByText('hide') // remount, it should still have 2 pages act(() => toggle(v => !v)) await screen.findByText('data:page 0, page 1,') }) it('should keep `mutate` referential equal', async () => { const setters = [] const key = createKey() function Comp() { const { data, size, setSize } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(`page ${index}, `) ) setters.push(setSize) return (
{ // load next page setSize(size + 1) }} > data:{data}
) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:page 0,') // load next page fireEvent.click(screen.getByText('data:page 0,')) await screen.findByText('data:page 0, page 1,') // check all `setSize`s are referential equal. for (const setSize of setters) { expect(setSize).toEqual(setters[0]) } }) it('should share initial cache from `useSWR`', async () => { const cachedData = new Date().toISOString() const key = createKey() globalMutate(`shared-cache-${key}-0`, cachedData) function Page() { const { data } = useSWRInfinite( index => `shared-cache-${key}-${index}`, () => createResponse(cachedData) ) return
data:{data}
} renderWithGlobalCache() screen.getByText('data:') // after a rerender, we should already have the cached data rendered await screen.findByText(`data:${cachedData}`) }) it('should not break refreshInterval', async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWRInfinite( index => `interval-${key}-${index}`, () => value++, { dedupingInterval: 0, refreshInterval: 100 } ) return
data:{data}
} renderWithConfig() screen.getByText('data:') // after 300ms the rendered result should be 3 await executeWithoutBatching(() => sleep(350)) screen.getByText('data:3') }) it('should re-use fallbackData', async () => { const dummyResponses = { '/api?page=1': ['page-1-1', 'page-1-2'], '/api?page=2': ['page-2-1', 'page-2-2'] } const requests = [] const key = createKey() function Page() { const { data, size, setSize } = useSWRInfinite( index => { return [key, `/api?page=${index + 1}`] }, ([_, index]) => { requests.push(index) return createResponse(dummyResponses[index]) }, { fallbackData: [dummyResponses[`/api?page=1`]] } ) return (
{ // load next page setSize(size + 1) }} > data:{(data ? [].concat(...data) : []).join(', ')}
) } renderWithConfig() // render with the fallbackData screen.getByText('data:page-1-1, page-1-2') expect(requests).toEqual([]) // should use the initial data fireEvent.click(screen.getByText('data:page-1-1, page-1-2')) // Should this reuse the cached data for `page=1`? await screen.findByText('data:page-1-1, page-1-2, page-2-1, page-2-2') expect(requests).toEqual(['/api?page=1', '/api?page=2']) }) it('should share data between multiple hooks have the same key', async () => { const key = createKey() const dummyResponses = { '/api?page=1': ['page-1-1', 'page-1-2'], '/api?page=2': ['page-2-1', 'page-2-2'] } const useCustomSWRInfinite = () => { const { data, setSize, size } = useSWRInfinite( index => [key, `/api?page=${index + 1}`], ([_, index]) => createResponse(dummyResponses[index]) ) return { data: data ? [].concat(...data) : [], setSize, size } } const Component = (props: { label: string }) => { const { data, size, setSize } = useCustomSWRInfinite() return ( <>
    {data.map(value => (
  • {props.label}:{value}
    • ))}
) } function Page() { return (
) } renderWithConfig() // render responses for page=1 await screen.findByText('A:page-1-2') await screen.findByText('B:page-1-2') fireEvent.click(screen.getByText('A:click')) // render responses for page=2 await screen.findByText('A:page-2-2') await screen.findByText('B:page-2-2') }) it('should support null as getKey', async () => { function Page() { const { data, setSize } = useSWRInfinite(null, () => 'data') return (
{ // load next page setSize(size => size + 1) }} > data:{data || ''}
) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:') // load next page fireEvent.click(screen.getByText('data:')) await screen.findByText('data:') }) it('should support getKey to return null', async () => { function Page() { const { data, setSize } = useSWRInfinite( () => null, () => 'data' ) return (
{ // load next page setSize(size => size + 1) }} > data:{data || ''}
) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:') // load next page fireEvent.click(screen.getByText('data:')) await screen.findByText('data:') }) it('should mutate a cache with `unstable_serialize`', async () => { let count = 0 const key = createKey() let mutate function Page() { mutate = useSWRConfig().mutate const { data } = useSWRInfinite( index => `page-test-${key}-${index}`, infiniteKey => createResponse(`${infiniteKey}:${++count}`) ) return
data:{data}
} renderWithConfig() screen.getByText('data:') await screen.findByText(`data:page-test-${key}-0:1`) await act(() => mutate(unstable_serialize(index => `page-test-${key}-${index}`)) ) await screen.findByText(`data:page-test-${key}-0:2`) await act(() => mutate( unstable_serialize(index => `page-test-${key}-${index}`), 'local-mutation', false ) ) await screen.findByText('data:local-mutation') }) it('should mutate a cache with `unstable_serialize` based on a current data', async () => { const key = createKey() const getKey: (index: number) => [string, number] = (index: number) => [ key, index ] let mutate function Comp() { mutate = useSWRConfig().mutate const { data, size, setSize } = useSWRInfinite(getKey, ([_, index]) => createResponse(`page ${index}, `) ) useEffect(() => { setSize(size + 1) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return
data:{data}
} renderWithConfig() screen.getByText('data:') await screen.findByText('data:page 0, page 1,') await act(() => mutate( unstable_serialize(getKey), data => data.map(value => `(edited)${value}`), false ) ) await screen.findByText('data:(edited)page 0, (edited)page 1,') }) it('should be able to use `unstable_serialize` with a custom cache', async () => { const key = createKey() let mutateCustomCache function Page() { mutateCustomCache = useSWRConfig().mutate const { data } = useSWRInfinite( () => key, () => createResponse('response data') ) return
data:{data}
} function App() { return ( new Map([[key, { data: 'initial-cache' }]]) }} > ) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:initial-cache') await act(() => mutateCustomCache(unstable_serialize(() => key))) await screen.findByText('data:response data') await act(() => mutateCustomCache( unstable_serialize(() => key), 'local-mutation', false ) ) await screen.findByText('data:local-mutation') }) it('should correctly set size when key is null', async () => { const loggedValues = [] function Page() { const { size, setSize } = useSWRInfinite( () => null, () => '' ) loggedValues.push(size) return } renderWithConfig() await screen.findByText('set size') fireEvent.click(screen.getByText('set size')) await nextTick() expect(loggedValues).toEqual([1]) }) it('setSize should only accept number', async () => { const key = createKey() function Comp() { const { data, size, setSize } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(`page ${index}`) ) return ( <>
{ // load next page // @ts-expect-error setSize('2') }} > data:{data}
size:{size}
) } renderWithConfig() await screen.findByText('data:page 0') await screen.findByText('size:1') fireEvent.click(screen.getByText('data:page 0')) await screen.findByText('data:page 0') await screen.findByText('size:1') }) it('should correctly set size when setSize receives a callback', async () => { const key = createKey() function Page() { const { data, size, setSize } = useSWRInfinite( index => `${key}-${index}`, k => createResponse(`page-${k}`) ) return (

data: {(data || []).join()}

size: {size}

) } const getDataBySize = size => Array(size) .fill('') .map((_, index) => `page-${key}-${index}`) .join() renderWithConfig() await screen.findByText('set size') const btn = screen.getByText('set size') fireEvent.click(btn) await nextTick() await screen.findByText(`data: ${getDataBySize(2)}`) await screen.findByText('size: 2') fireEvent.click(btn) await nextTick() await screen.findByText(`data: ${getDataBySize(3)}`) await screen.findByText('size: 3') }) it('setSize should return a promise', async () => { let _setSize function Comp() { const { setSize } = useSWRInfinite( () => null, () => createResponse('') ) _setSize = setSize return null } renderWithConfig() expect(_setSize()).toBeInstanceOf(Promise) }) // https://github.com/vercel/swr/issues/908 it('should revalidate first page after mutating', async () => { const key = createKey() let v = 'old' function Page() { const { data, mutate: boundMutate } = useSWRInfinite( i => [key, i], () => createResponse(v) ) return (

data:{data}

) } renderWithConfig() await screen.findByText('data:old') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data:new') }) it('should reuse cached value for new pages', async () => { const key = createKey() function Page() { const { data, setSize } = useSWRInfinite( index => key + '-' + index, () => createResponse('response value') ) return (
setSize(2)}>data:{data ? data.join(',') : ''}
) } renderWithConfig(, { provider: () => new Map([[key + '-1', { data: 'cached value' }]]) }) screen.getByText('data:') await screen.findByText('data:response value') fireEvent.click(screen.getByText('data:response value')) await screen.findByText('data:response value,cached value') }) it('should return cached value ASAP when updating size and revalidate in the background', async () => { const key = createKey() const getData = jest.fn(v => v) function Page() { const { data, setSize } = useSWRInfinite( index => key + '-' + index, () => sleep(30).then(() => getData('response value')) ) return (
setSize(2)}>data:{data ? data.join(',') : ''}
) } renderWithConfig(, { provider: () => new Map([[key + '-1', { data: 'cached value' }]]) }) screen.getByText('data:') await screen.findByText('data:response value') expect(getData).toHaveBeenCalledTimes(1) fireEvent.click(screen.getByText('data:response value')) // Returned directly from the cache without blocking await screen.findByText('data:response value,cached value') expect(getData).toHaveBeenCalledTimes(1) // Revalidate await act(() => sleep(30)) expect(getData).toHaveBeenCalledTimes(2) }) it('should block on fetching new uncached pages when updating size', async () => { const key = createKey() const getData = jest.fn(v => v) function Page() { const { data, setSize } = useSWRInfinite( index => key + '-' + index, () => sleep(30).then(() => getData('response value')) ) return (
setSize(2)}>data:{data ? data.join(',') : ''}
) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:response value') expect(getData).toHaveBeenCalledTimes(1) fireEvent.click(screen.getByText('data:response value')) // Fetch a new page and revalidate the first page. await screen.findByText('data:response value,response value') expect(getData).toHaveBeenCalledTimes(3) }) it('should return fallbackData if cache is empty', async () => { const key = createKey() function Page() { const { data, setSize } = useSWRInfinite( index => key + '-' + index, () => sleep(30).then(() => 'response value'), { fallbackData: ['fallback-1', 'fallback-2'] } ) return (
setSize(2)}>data:{data ? data.join(',') : ''}
) } renderWithConfig() screen.getByText('data:fallback-1,fallback-2') // Update size, it should still render the fallback fireEvent.click(screen.getByText('data:fallback-1,fallback-2')) await nextTick() screen.getByText('data:fallback-1,fallback-2') }) it('should revalidate the resource with bound mutate when no argument is passed', async () => { let t = 0 const key = createKey() const fetcher = jest.fn(async () => createResponse(`foo-${t++}`, { delay: 10 }) ) const logger = [] function Page() { const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) logger.push(data) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: foo-1') expect(fetcher).toHaveBeenCalledTimes(2) expect(logger).toEqual([undefined, ['foo-0'], ['foo-1']]) }) it('should pass the correct cursor information in `getKey`', async () => { const key = createKey() const fetcher = jest.fn(index => createResponse('data-' + index)) const logger = [] function Page() { const { data } = useSWRInfinite( (index, previousPageData) => { logger.push(key + ':' + index + ':' + previousPageData) return '' + index }, fetcher, { dedupingInterval: 0, initialSize: 5 } ) return ( <>
{data ? data.length : 0}
) } renderWithConfig() await screen.findByText('5') expect( logger.every(log => { const [k, index, previousData] = log.split(':') return ( k === key && ((index === '0' && previousData === 'null') || previousData === 'data-' + (index - 1)) ) }) ).toBeTruthy() }) // https://github.com/vercel/swr/issues/1776 itShouldSkipForReactCanary( 'should update the getKey reference with the suspense mode', async () => { const keyA = 'keyA' + createKey() const keyB = 'keyB' + createKey() const apiData = { [keyA]: ['A1', 'A2', 'A3'], [keyB]: ['B1', 'B2', 'B3'] } function Page() { const [status, setStatus] = useState('a') const { data, setSize } = useSWRInfinite( () => (status === 'a' ? keyA : keyB), key => createResponse(apiData[key]), { suspense: true } ) return ( <>
data: {String(data)}
) } renderWithConfig( ) await screen.findByText('data: A1,A2,A3') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: B1,B2,B3') } ) it('should revalidate the resource with bound mutate when arguments are passed', async () => { const key = createKey() let counter = 0 function Content() { const { data } = useSWRInfinite( () => key, () => createResponse(++counter), { revalidateOnMount: true, revalidateFirstPage: false, dedupingInterval: 0 } ) return
data: {String(data)}
} function Page() { const [contentKey, setContentKey] = useState('a') return ( <> ) } renderWithConfig() await screen.findByText('data: 1') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: 2') }) // https://github.com/vercel/swr/issues/1899 it('should revalidate the resource with bound mutate when options is of Object type ', async () => { let t = 0 const key = createKey() const fetcher = jest.fn(async () => createResponse(`foo-${t++}`, { delay: 10 }) ) const logger = [] function Page() { const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) logger.push(data) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: foo-1') expect(fetcher).toHaveBeenCalledTimes(2) expect(logger).toEqual([undefined, ['foo-0'], ['foo-1']]) }) // https://github.com/vercel/swr/issues/1899 it('should not revalidate the resource with bound mutate when options is of Object type', async () => { let t = 0 const key = createKey() const fetcher = jest.fn(async () => createResponse(`foo-${t++}`, { delay: 10 }) ) const logger = [] function Page() { const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) logger.push(data) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) expect(fetcher).toHaveBeenCalledTimes(1) expect(logger).toEqual([undefined, ['foo-0']]) }) it('should be able to use the optimisticData option', async () => { let t = 0 const key = createKey() const fetcher = async () => createResponse(`foo-${t++}`) const updater = async () => createResponse(['updated']) function Page() { const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: optimistic') await screen.findByText('data: updated') await screen.findByText('data: foo-1') }) it('should be able to use the functional optimisticData option', async () => { let t = 0 const key = createKey() const fetcher = async () => createResponse(`foo-${t++}`) const updater = async () => createResponse(['updated']) function Page() { const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: foo-0,optimistic') await screen.findByText('data: updated') await screen.findByText('data: foo-1') }) it('should be able to use the functional populateCache option', async () => { let t = 0 const key = createKey() const fetcher = async () => createResponse(`foo-${t++}`) const updater = async () => createResponse(['updated']) function Page() { const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: foo-0,updated') }) it('should be able to turn off the populateCache option', async () => { let t = 0 const key = createKey() const fetcher = async () => createResponse(`foo-${t++}`) const updater = async () => createResponse(['updated']) function Page() { const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) sleep(50) await screen.findByText('data: foo-0') }) it('should be able to use the functional optimisticData option with multiple pages', async () => { const apiData = { 0: ['A1', 'A2', 'A3'], 1: ['B1', 'B2', 'B3'] } const key = createKey() const fetcher = async ([_key, pageKey]) => createResponse(apiData[pageKey]) const updater = async () => createResponse(['updated']) function Page() { const { data, mutate } = useSWRInfinite( (pageIndex: number) => [key, pageIndex], fetcher, { initialSize: 2, dedupingInterval: 0 } ) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: A1,A2,A3,B1,B2,B3') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: A1,A2,A3,B1,B2,B3,B4') await screen.findByText('data: A1,A2,A3,B1,B2,B3,updated') }) it('should be able to use the rollbackOnError option', async () => { let t = 0 const key = createKey() const fetcher = async () => createResponse(`foo-${t++}`) const updater = async () => createResponse(new Error('error')) as any as Promise function Page() { const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: optimistic') await screen.findByText('data: foo-0') }) it('should be able to disable the rollbackOnError option', async () => { let t = 0 const key = createKey() const fetcher = async () => createResponse(`foo-${t++}`) const updater = async () => createResponse(new Error('error')) as any as Promise function Page() { const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: optimistic') await sleep(50) await screen.findByText('data: optimistic') }) it('should be able to use the throwOnError option', async () => { let t = 0 const key = createKey() const fetcher = async () => createResponse(`foo-${t++}`) const updater = async () => createResponse(new Error('mutation error')) as any as Promise function Page() { const [error, setError] = useState(null) const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) return ( <>
data: {String(data)}
error: {error}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) await screen.findByText('error: mutation error') }) it('should be able to disable the throwOnError option', async () => { let t = 0 const key = createKey() const fetcher = async () => createResponse(`foo-${t++}`) const updater = async () => createResponse(new Error('mutation error')) as any as Promise function Page() { const [error, setError] = useState(null) const { data, mutate } = useSWRInfinite(() => key, fetcher, { dedupingInterval: 0 }) return ( <>
data: {String(data)}
error: {error}
) } renderWithConfig() await screen.findByText('data: foo-0') fireEvent.click(screen.getByText('mutate')) await sleep(50) await screen.findByText('error:') }) it('should share data with useSWR', async () => { const key = createKey() const SWR = () => { const { data } = useSWR(`${key}-${2}`) return
swr: {data}
} const Page = () => { const { data, setSize, size } = useSWRInfinite( index => `${key}-${index + 1}`, infiniteKey => createResponse(`${infiniteKey},`, { delay: 100 }) ) return ( <>
setSize(i => i + 1)}>data: {data}
setSize(i => i + 1)}>size: {size}
) } renderWithConfig() await screen.findByText(`data: ${key}-1,`) await screen.findByText(`swr:`) fireEvent.click(screen.getByText('size: 1')) await screen.findByText(`data: ${key}-1,${key}-2,`) await screen.findByText(`size: 2`) await screen.findByText(`swr: ${key}-2,`) }) it('should support the parallel option', async () => { // mock api const pageData = ['apple', 'banana', 'pineapple'] const key = createKey() function Page() { const { data } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(`${pageData[index]}, `, { delay: 50 }), { initialSize: 3, parallel: true } ) return
data:{data}
} renderWithConfig() screen.getByText('data:') // If SWR sends requests sequentially, it takes 150ms at least await act(() => sleep(100)) screen.getByText('data:apple, banana, pineapple,') }) it('should return the first error happened in parallel requests', async () => { // mock api const pageData = [ { data: new Error('apple'), delay: 50 }, { data: new Error('banana'), delay: 30 }, { data: 'pineapple', delay: 10 } ] const key = createKey() function Page() { const { data, error } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(pageData[index].data as string, { delay: pageData[index].delay }), { initialSize: 3, parallel: true } ) if (error) { return
error:{error.message}
} return
data:{data}
} renderWithConfig() screen.getByText('data:') await act(() => sleep(50)) screen.getByText('error:banana') }) it('should send request sequentially when the parallel option is disabled', async () => { // mock api const pageData = ['apple', 'banana', 'pineapple'] const key = createKey() function Page() { const { data } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(`${pageData[index]}, `, { delay: 50 }), { initialSize: 3, parallel: false } ) return
data:{data}
} renderWithConfig() screen.getByText('data:') // If SWR sends requests sequentially, it takes 150ms at least await act(() => sleep(100)) screen.getByText('data:') await act(() => sleep(200)) screen.getByText('data:apple, banana, pineapple,') }) it('should be the parallel option false by default', async () => { // mock api const pageData = ['apple', 'banana', 'pineapple'] const key = createKey() function Page() { const { data } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(`${pageData[index]}, `, { delay: 50 }), { initialSize: 3 } ) return
data:{data}
} renderWithConfig() screen.getByText('data:') // If SWR sends requests sequentially, it takes 150ms at least await act(() => sleep(100)) screen.getByText('data:') await act(() => sleep(200)) screen.getByText('data:apple, banana, pineapple,') }) it('should make previousPageData null when the parallel option is enabled', async () => { // mock api const pageData = ['apple', 'banana', 'pineapple'] const previousPageDataLogs = [] const key = createKey() function Page() { const { data } = useSWRInfinite( (index, previousPageData) => { previousPageDataLogs.push(previousPageData) return [key, index] }, ([_, index]) => createResponse(`${pageData[index]}, `, { delay: 50 }), { initialSize: 3, parallel: true } ) return
data:{data}
} renderWithConfig() screen.getByText('data:') // If SWR sends requests sequentially, it takes 150ms at least await act(() => sleep(100)) screen.getByText('data:apple, banana, pineapple,') expect(previousPageDataLogs.every(d => d === null)).toBeTruthy() }) it('should support revalidate as a function', async () => { // mock api let pageData = ['apple', 'banana', 'pineapple'] const key = createKey() function Page() { const { data, mutate: boundMutate } = useSWRInfinite( index => [key, index], ([_, index]) => createResponse(pageData[index]), { initialSize: 3 } ) return (
{ boundMutate(data, { // only revalidate 'apple' & 'pineapple' (page=2) revalidate: (d, [_, i]: [string, number]) => { return d === 'apple' || i === 2 } }) }} > data:{Array.isArray(data) && data.join(',')}
) } renderWithConfig() screen.getByText('data:') await screen.findByText('data:apple,banana,pineapple') // update response data pageData = pageData.map(data => `[${data}]`) // revalidate fireEvent.click(screen.getByText('data:apple,banana,pineapple')) await screen.findByText('data:[apple],banana,[pineapple]') }) }) ================================================ FILE: test/use-swr-integration.test.tsx ================================================ import { screen, fireEvent } from '@testing-library/react' import React, { useState, useEffect, Profiler, act } from 'react' import useSWR from 'swr' import { createResponse, sleep, nextTick as waitForNextTick, renderWithConfig, createKey, renderWithGlobalCache } from './utils' describe('useSWR', () => { const sharedKey = createKey() it('should return `undefined` on hydration then return data', async () => { function Page() { const { data } = useSWR(sharedKey, () => 'SWR') return
hello, {data}
} renderWithGlobalCache() // hydration screen.getByText('hello,') // mounted await screen.findByText('hello, SWR') }) it('should allow functions as key and reuse the cache', async () => { function Page() { const { data } = useSWR( () => sharedKey, () => 'SWR' ) return
hello, {data}
} renderWithGlobalCache() screen.getByText('hello, SWR') }) it('should allow async fetcher functions', async () => { const fetcher = jest.fn(() => createResponse('SWR')) const key = createKey() function Page() { const { data } = useSWR(key, fetcher) return
hello, {data}
} renderWithConfig() // hydration screen.getByText('hello,') await screen.findByText('hello, SWR') expect(fetcher).toHaveBeenCalledTimes(1) }) it('should not call fetch function when revalidateOnMount is false', async () => { const fetch = jest.fn(() => 'SWR') const key = createKey() function Page() { const { data } = useSWR(key, fetch, { revalidateOnMount: false }) return
hello, {data}
} renderWithConfig() await screen.findByText('hello,') expect(fetch).not.toHaveBeenCalled() }) it('should call fetch function when revalidateOnMount is false and key has been changed', async () => { const fetch = jest.fn(() => 'SWR') function Page() { const [key, setKey] = useState(createKey()) const { data } = useSWR(key, fetch, { revalidateOnMount: false }) return
setKey(createKey)}>hello,{data}
} renderWithConfig() await screen.findByText('hello,') expect(fetch).not.toHaveBeenCalled() // the key has been changed fireEvent.click(screen.getByText('hello,')) await screen.findByText('hello,SWR') }) it('should call fetch function when revalidateOnMount is true even if fallbackData is set', async () => { const fetch = jest.fn(() => 'SWR') const key = createKey() function Page() { const { data } = useSWR(key, fetch, { revalidateOnMount: true, fallbackData: 'gab' }) return
hello, {data}
} renderWithConfig() screen.getByText('hello, gab') await screen.findByText('hello, SWR') expect(fetch).toHaveBeenCalled() }) it('initial loading state should be false when revalidation is disabled with fallbackData', async () => { const fetch = jest.fn(() => 'SWR') const key = createKey() function Page() { const { data, isLoading, isValidating } = useSWR(key, fetch, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false, fallbackData: 'Fallback' }) return (
{data}, {isLoading.toString()} , {isValidating.toString()}
) } renderWithConfig() screen.getByText('Fallback, false , false') expect(fetch).not.toHaveBeenCalled() }) it('should dedupe requests by default', async () => { const fetcher = jest.fn(() => createResponse('SWR')) const key = createKey() function Page() { const { data: v1 } = useSWR(key, fetcher) const { data: v2 } = useSWR(key, fetcher) return (
{v1}, {v2}
) } renderWithConfig() screen.getByText(',') await screen.findByText('SWR, SWR') expect(fetcher).toHaveBeenCalledTimes(1) }) it('should trigger the onSuccess event', async () => { let SWRData = null const key = createKey() function Page() { const { data } = useSWR(key, () => createResponse('SWR'), { onSuccess: _data => (SWRData = _data) }) return
hello, {data}
} renderWithConfig() screen.getByText('hello,') await screen.findByText('hello, SWR') expect(SWRData).toEqual('SWR') }) it('should broadcast data', async () => { let cnt = 0 const key = createKey() function Block() { const { data } = useSWR(key, () => cnt++, { refreshInterval: 100, // need to turn of deduping otherwise // refreshing will be ignored dedupingInterval: 10 }) return <>{data} } function Page() { return ( <> ) } renderWithConfig() await act(() => sleep(50)) screen.getByText('0 0 0') await act(() => sleep(100)) screen.getByText('1 1 1') await act(() => sleep(100)) screen.getByText('2 2 2') }) it('should broadcast error', async () => { let cnt = 0 const key = createKey() function Block() { const { data, error } = useSWR( key, () => { if (cnt === 2) throw new Error('err') return cnt++ }, { refreshInterval: 100, // need to turn of deduping otherwise // refreshing will be ignored dedupingInterval: 10 } ) if (error) return error.message return <>{data} } function Page() { return ( <> ) } renderWithConfig() await act(() => sleep(50)) screen.getByText('0 0 0') await act(() => sleep(100)) screen.getByText('1 1 1') await act(() => sleep(100)) screen.getByText('err err err') }) it('should broadcast isValidating', async () => { const key = createKey() function useBroadcast3() { const { isValidating, mutate } = useSWR(key, () => sleep(100), { // need to turn of deduping otherwise // revalidating will be ignored dedupingInterval: 10 }) return { isValidating, mutate } } function Initiator() { const { isValidating, mutate } = useBroadcast3() useEffect(() => { const timeout = setTimeout(() => { mutate() }, 200) return () => clearTimeout(timeout) // the revalidate function is always the same reference because the key of the useSWR is static (broadcast-3) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return <>{isValidating ? 'true' : 'false'} } function Consumer() { const { isValidating } = useBroadcast3() return <>{isValidating ? 'true' : 'false'} } function Page() { return ( <> ) } renderWithConfig() screen.getByText('true true true') await act(() => sleep(150)) screen.getByText('false false false') await act(() => sleep(100)) screen.getByText('true true true') await act(() => sleep(100)) screen.getByText('false false false') }) it('should accept object args', async () => { const obj = { v: 'hello' } const arr = ['world'] const key1 = createKey() const key2 = createKey() function Page() { const { data: v1 } = useSWR( [key1, obj, arr], ([a, b, c]) => a + b.v + c[0] ) // reuse the cache const { data: v2 } = useSWR([key1, obj, arr], () => 'not called!') // different object const { data: v3 } = useSWR( [key2, obj, 'world'], ([a, b, c]) => a + b.v + c ) return (
{v1}, {v2}, {v3}
) } renderWithConfig() await screen.findByText( `${key1}helloworld, ${key1}helloworld, ${key2}helloworld` ) }) it('should accept function returning args', async () => { const obj = { v: 'hello' } const arr = ['world'] const key = createKey() function Page() { const { data } = useSWR( () => [key, obj, arr], ([a, b, c]) => a + b.v + c[0] ) return
{data}
} renderWithConfig() await screen.findByText(`${key}helloworld`) }) it('should accept initial data', async () => { const fetcher = jest.fn(() => 'SWR') const key = createKey() function Page() { const { data } = useSWR(key, fetcher, { fallbackData: 'Initial' }) return
hello, {data}
} renderWithConfig() await screen.findByText('hello, Initial') expect(fetcher).not.toHaveBeenCalled() }) it('should revalidate even if fallbackData is provided', async () => { const fetcher = key => createResponse(key, { delay: 50 }) const initialKey = createKey() const updatedKey = createKey() function Page() { const [key, setKey] = useState(initialKey) const { data } = useSWR(key, fetcher, { fallbackData: 'Initial' }) return (
setKey(updatedKey)}> {data ? `hello, ${data}` : 'loading'}
) } renderWithConfig() // render with the initial data await screen.findByText('hello, Initial') await waitForNextTick() fireEvent.focus(window) await screen.findByText(`hello, ${initialKey}`) // change the key await waitForNextTick() fireEvent.click(screen.getByText(`hello, ${initialKey}`)) // a request is still in flight await act(() => sleep(10)) // while validating, SWR returns the fallbackData // https://github.com/vercel/swr/pull/961/files#r588928241 screen.getByText('hello, Initial') // render with data the fetcher returns await screen.findByText(`hello, ${updatedKey}`) }) it('should set config as second parameter', async () => { const fetcher = jest.fn(() => 'SWR') const key = createKey() function Page() { const { data } = useSWR(key, { fetcher }) return
hello, {data}
} renderWithConfig() screen.getByText('hello,') expect(fetcher).toHaveBeenCalled() await screen.findByText('hello, SWR') }) it('should revalidate on mount after dedupingInterval', async () => { const key = createKey() let cnt = 0 function Foo() { const { data } = useSWR(key, () => 'data: ' + cnt++, { dedupingInterval: 0 }) return <>{data} } function Page() { const [showFoo, setShowFoo] = React.useState(true) return ( <> {showFoo ? : null} ) } renderWithConfig() await waitForNextTick() screen.getByText('data: 0') fireEvent.click(screen.getByText('toggle')) await waitForNextTick() fireEvent.click(screen.getByText('toggle')) await act(() => sleep(20)) screen.getByText('data: 1') }) it('Nested SWR hook should only do loading once', async () => { const key = createKey() let count = 0 const ChildComponent = () => { const { data } = useSWR(key, _ => createResponse(_, { delay: 100 })) return
{data}
} const NestedRender = () => { const { data, isValidating } = useSWR(key, _ => createResponse(_, { delay: 50 }) ) if (isValidating) { return
loading
} return (
{data}
) } const Page = () => ( { count += 1 }} > ) renderWithConfig() await screen.findByText(`loading`) await screen.findAllByText(key) await act(() => sleep(150)) expect(count).toBe(2) }) // Test for https://swr.vercel.app/docs/advanced/performance#dependency-collection it('should render four times in the worst case', async () => { let isFirstFetch = true const fetcher = async () => { if (isFirstFetch) { isFirstFetch = false throw new Error('error') } return 'value' } const key = createKey() const logs = [] function Page() { const { data, error, isLoading, isValidating } = useSWR(key, fetcher, { errorRetryInterval: 10 }) logs.push({ data, error, isLoading, isValidating }) if (isLoading) return

loading

return

data:{data}

} renderWithConfig() await screen.findByText('data:value') expect(logs).toMatchInlineSnapshot(` [ { "data": undefined, "error": undefined, "isLoading": true, "isValidating": true, }, { "data": undefined, "error": [Error: error], "isLoading": false, "isValidating": false, }, { "data": undefined, "error": [Error: error], "isLoading": true, "isValidating": true, }, { "data": "value", "error": undefined, "isLoading": false, "isValidating": false, }, ] `) }) // Test for https://swr.vercel.app/docs/advanced/performance#dependency-collection it('should render only two times in the best case', async () => { let isFirstFetch = true const fetcher = async () => { if (isFirstFetch) { isFirstFetch = false throw new Error('error') } return 'value' } const key = createKey() const logs = [] function Page() { const { data } = useSWR(key, fetcher, { errorRetryInterval: 10 }) logs.push({ data }) if (!data) return

loading

return

data:{data}

} renderWithConfig() await screen.findByText('data:value') expect(logs).toMatchInlineSnapshot(` [ { "data": undefined, }, { "data": "value", }, ] `) }) // Test for https://github.com/vercel/swr/issues/2446 it('should return latest data synchronously after accessing getter', async () => { const fetcher = async () => { await sleep(10) return 'value' } const key = createKey() const logs = [] function Page() { const swr = useSWR(key, fetcher) const [show, setShow] = useState(false) useEffect(() => { setTimeout(() => { setShow(true) }, 100) }, []) if (!show) return null logs.push(swr.data) return

data:{swr.data}

} renderWithConfig() await screen.findByText('data:value') expect(logs).toMatchInlineSnapshot(` [ "value", ] `) }) }) ================================================ FILE: test/use-swr-key.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import React, { useState, useEffect, act } from 'react' import useSWR from 'swr' import { createKey, createResponse, renderWithConfig, sleep } from './utils' describe('useSWR - key', () => { it('should respect requests after key has changed', async () => { let rerender const baseKey = createKey() function Page() { const [mounted, setMounted] = useState(0) const key = `${baseKey}-${mounted ? 'short' : 'long'}` const { data } = useSWR(key, () => { if (mounted) { return createResponse('short request', { delay: 50 }) } return createResponse('long request', { delay: 100 }) }) useEffect(() => setMounted(1), []) rerender = setMounted return
data:{data}
} renderWithConfig() screen.getByText('data:') await screen.findByText('data:short request') await act(() => sleep(100)) // wait 100ms until "long request" finishes screen.getByText('data:short request') // should be "short request" still // manually trigger a re-render from outside // this triggers a re-render and a read access to `swr.data` // but the result should still be "short request" act(() => rerender(x => x + 1)) screen.getByText('data:short request') }) it('should render undefined after key has changed', async () => { const baseKey = createKey() function Page() { const [mounted, setMounted] = useState(false) const key = `${baseKey}-${mounted ? '1' : '0'}` const { data } = useSWR(key, k => createResponse(k, { delay: 100 })) useEffect(() => { setTimeout(() => setMounted(true), 200) }, []) return
data:{data}
} // time data key // -> 0 undefined, '0' // -> 100 0, '0' // -> 200 undefined, '1' <- this state is required; we can't show 0 here // -> 300 1, '1' renderWithConfig() screen.getByText('data:') // undefined, time=0 await act(() => sleep(150)) screen.getByText(`data:${baseKey}-0`) // 0, time=150 await act(() => sleep(100)) screen.getByText('data:') // undefined, time=250 await act(() => sleep(100)) screen.getByText(`data:${baseKey}-1`) // 1, time=350 }) it('should return undefined after key change when fetcher is synchronized', async () => { const samples = { '1': 'a', '2': 'b', '3': 'c' } const baseKey = createKey() function Page() { const [sampleKey, setKey] = React.useState(1) const { data } = useSWR( `${baseKey}-${sampleKey}`, key => samples[key.replace(`${baseKey}-`, '')] ) return (
{ setKey(sampleKey + 1) }} > hello, {sampleKey}:{data}
) } renderWithConfig() screen.getByText('hello, 1:') await screen.findByText('hello, 1:a') fireEvent.click(screen.getByText('hello, 1:a')) // first, rerender on key change screen.getByText('hello, 2:') await screen.findByText('hello, 2:b') }) it('should revalidate if a function key changes identity', async () => { const closureFunctions: { [key: string]: () => string } = {} const baseKey = createKey() const closureFactory = id => { if (closureFunctions[id]) return closureFunctions[id] closureFunctions[id] = () => `${baseKey}-${id}` return closureFunctions[id] } let updateId const fetcher = (key: string) => Promise.resolve(key) function Page() { const [id, setId] = React.useState('first') updateId = setId const fnWithClosure = closureFactory(id) const { data } = useSWR(fnWithClosure, fetcher) return
{data}
} renderWithConfig() await screen.findByText(`${baseKey}-first`) act(() => updateId('first')) await screen.findByText(`${baseKey}-first`) act(() => updateId('second')) await screen.findByText(`${baseKey}-second`) }) it('should not fetch if the function key throws an error', async () => { let value = 0 const fetcher = jest.fn(() => value++) const key = () => { throw new Error('error') } function Page() { const { data } = useSWR(key, fetcher) return
{`key-${data}`}
} renderWithConfig() await screen.findByText(`key-undefined`) expect(fetcher).toHaveBeenCalledTimes(0) }) it('should cleanup state when key turns to empty', async () => { const key = createKey() function Page() { const [cnt, setCnt] = useState(1) const { isValidating } = useSWR(cnt === -1 ? '' : `${key}-${cnt}`, () => createResponse('', { delay: 100 }) ) return (
setCnt(cnt == 2 ? -1 : cnt + 1)}> {isValidating ? 'true' : 'false'}
) } renderWithConfig() screen.getByText('true') fireEvent.click(screen.getByText('true')) await act(() => sleep(10)) screen.getByText('true') fireEvent.click(screen.getByText('true')) await act(() => sleep(10)) screen.getByText('false') }) it('should keep data in sync when key updates', async () => { const fetcher = () => createResponse('test', { delay: 100 }) const values = [] const updatedKey = createKey() function Page() { const [key, setKey] = useState(null) const { data: v1 } = useSWR(key, fetcher) const { data: v2 } = useSWR(key, fetcher) values.push([v1, v2]) return } renderWithConfig() screen.getByText('update key') fireEvent.click(screen.getByText('update key')) await act(() => sleep(120)) // All values should be equal because they're sharing the same key expect(values.some(([a, b]) => a !== b)).toBeFalsy() }) it('should support object as the key and deep compare', async () => { const fetcher = jest.fn(() => 'data') function Page() { const { data: v1 } = useSWR({ foo: { bar: 1 } }, fetcher) const { data: v2 } = useSWR({ foo: { bar: 1 } }, fetcher) return (
{v1},{v2}
) } renderWithConfig() await screen.findByText('data,data') // Only 1 request since the keys are the same. expect(fetcher).toHaveBeenCalledTimes(1) }) }) ================================================ FILE: test/use-swr-laggy.test.tsx ================================================ import { screen, fireEvent } from '@testing-library/react' import { useState, act } from 'react' import useSWR from 'swr' import useSWRInfinite from 'swr/infinite' import { createKey, createResponse, renderWithConfig, sleep } from './utils' describe('useSWR - keep previous data', () => { it('should keep previous data when key changes when `keepPreviousData` is enabled', async () => { const loggedData = [] const fetcher = k => createResponse(k, { delay: 50 }) function App() { const [key, setKey] = useState(createKey()) const { data: laggedData } = useSWR(key, fetcher, { keepPreviousData: true }) loggedData.push([key, laggedData]) return } renderWithConfig() await act(() => sleep(100)) fireEvent.click(screen.getByText('change key')) await act(() => sleep(100)) const key1 = loggedData[0][0] const key2 = loggedData[2][0] expect(loggedData).toEqual([ [key1, undefined], [key1, key1], [key2, key1], [key2, key2] ]) }) it('should keep previous data when sharing the cache', async () => { const loggedData = [] const fetcher = k => createResponse(k, { delay: 50 }) function App() { const [key, setKey] = useState(createKey()) const { data } = useSWR(key, fetcher) const { data: laggedData } = useSWR(key, fetcher, { keepPreviousData: true }) loggedData.push([key, data, laggedData]) return } renderWithConfig() await act(() => sleep(100)) fireEvent.click(screen.getByText('change key')) await act(() => sleep(100)) const key1 = loggedData[0][0] const key2 = loggedData[2][0] expect(loggedData).toEqual([ [key1, undefined, undefined], [key1, key1, key1], [key2, undefined, key1], [key2, key2, key2] ]) }) it('should keep previous data even if there is fallback data', async () => { const loggedData = [] const fetcher = k => createResponse(k, { delay: 50 }) function App() { const [key, setKey] = useState(createKey()) const { data } = useSWR(key, fetcher, { fallbackData: 'fallback' }) const { data: laggedData } = useSWR(key, fetcher, { keepPreviousData: true, fallbackData: 'fallback' }) loggedData.push([key, data, laggedData]) return } renderWithConfig() await act(() => sleep(100)) fireEvent.click(screen.getByText('change key')) await act(() => sleep(100)) const key1 = loggedData[0][0] const key2 = loggedData[2][0] expect(loggedData).toEqual([ [key1, 'fallback', 'fallback'], [key1, key1, key1], [key2, 'fallback', key1], [key2, key2, key2] ]) }) it('should always return the latest data', async () => { const loggedData = [] const fetcher = k => createResponse(k, { delay: 50 }) function App() { const [key, setKey] = useState(createKey()) const { data: laggedData, mutate } = useSWR(key, fetcher, { keepPreviousData: true }) loggedData.push([key, laggedData]) return ( <> ) } renderWithConfig() await act(() => sleep(100)) fireEvent.click(screen.getByText('change key')) await act(() => sleep(100)) fireEvent.click(screen.getByText('mutate')) await act(() => sleep(100)) const key1 = loggedData[0][0] const key2 = loggedData[2][0] expect(loggedData).toEqual([ [key1, undefined], [key1, key1], [key2, key1], [key2, key2], [key2, 'mutate'], [key2, key2] ]) }) it('should keep previous data for the useSWRInfinite hook', async () => { const loggedData = [] const fetcher = k => createResponse(k, { delay: 50 }) function App() { const [key, setKey] = useState(createKey()) const { data } = useSWRInfinite(() => key, fetcher, { keepPreviousData: true }) loggedData.push([key, data]) return } renderWithConfig() await act(() => sleep(100)) fireEvent.click(screen.getByText('change key')) await act(() => sleep(100)) const key1 = loggedData[0][0] const key2 = loggedData[2][0] expect(loggedData).toEqual([ [key1, undefined], [key1, [key1]], [key2, [key1]], [key2, [key2]] ]) }) it('should support changing the `keepPreviousData` option', async () => { const loggedData = [] const fetcher = k => createResponse(k, { delay: 50 }) let keepPreviousData = false function App() { const [key, setKey] = useState(createKey()) const { data: laggedData } = useSWR(key, fetcher, { keepPreviousData }) loggedData.push([key, laggedData]) return } renderWithConfig() await act(() => sleep(100)) fireEvent.click(screen.getByText('change key')) await act(() => sleep(100)) keepPreviousData = true fireEvent.click(screen.getByText('change key')) await act(() => sleep(100)) const key1 = loggedData[0][0] const key2 = loggedData[2][0] const key3 = loggedData[4][0] expect(loggedData).toEqual([ [key1, undefined], [key1, key1], [key2, undefined], [key2, key2], [key3, key2], [key3, key3] ]) }) // https://github.com/vercel/swr/issues/2128 it('should re-render when returned data and fallbackData is the same and keepPreviousData is enabled', async () => { const fallbackData = 'initial' const fetcher = k => createResponse(k, { delay: 50 }) const keys = ['initial', 'updated'] function App() { const [count, setCount] = useState(0) const { data } = useSWR(keys[count % 2 === 0 ? 0 : 1], fetcher, { fallbackData, keepPreviousData: true, revalidateOnMount: false, revalidateOnFocus: false }) return ( <>
{data}
) } renderWithConfig() // fallbackData screen.getByText('initial') fireEvent.click(screen.getByText('change key')) await act(() => sleep(10)) // previous data screen.getByText('initial') await act(() => sleep(100)) screen.getByText('updated') fireEvent.click(screen.getByText('change key')) await act(() => sleep(10)) // previous data screen.getByText('updated') await act(() => sleep(100)) screen.getByText('initial') }) it('should work keepPreviousData without changing th key', async () => { const key = createKey() let counter = 0 const fetcher = () => createResponse(++counter, { delay: 50 }) function App() { const { data, mutate } = useSWR(key, fetcher) const { data: laggedData } = useSWR(key, fetcher, { keepPreviousData: true }) return ( <>
data:{data},laggy:{laggedData}
) } renderWithConfig() screen.getByText('data:,laggy:') await act(() => sleep(100)) screen.getByText('data:1,laggy:1') fireEvent.click(screen.getByText('mutate')) // previous data screen.getByText('data:,laggy:1') await act(() => sleep(100)) screen.getByText('data:2,laggy:2') }) }) ================================================ FILE: test/use-swr-legacy-react.test.tsx ================================================ // This test case covers special environments such as React <= 17. import { screen, render, fireEvent } from '@testing-library/react' import { act } from 'react' // https://github.com/jestjs/jest/issues/11471 jest.mock('react', () => jest.requireActual('react')) async function withLegacyReact(runner: () => Promise) { await jest.isolateModulesAsync(async () => { await runner() }) } describe('useSWR - legacy React', () => { ;(process.env.__SWR_TEST_BUILD ? it.skip : it)( 'should enable the IS_REACT_LEGACY flag - startTransition', async () => { await withLegacyReact(async () => { // Test mutation and trigger const useSWRMutation = (await import('swr/mutation')).default const waitForNextTick = () => act(() => new Promise(resolve => setTimeout(resolve, 1))) const key = Math.random().toString() function Page() { const { data, trigger } = useSWRMutation(key, () => 'data') return } render() // mount await screen.findByText('pending') fireEvent.click(screen.getByText('pending')) await waitForNextTick() screen.getByText('data') }) } ) // https://github.com/vercel/swr/blob/cfcfa9e320a59742d41a77e52003127b04378c4f/src/core/use-swr.ts#L345 ;(process.env.__SWR_TEST_BUILD ? it.skip : it)( 'should enable the IS_REACT_LEGACY flag - unmount check', async () => { await withLegacyReact(async () => { const useSWR = (await import('swr')).default const key = Math.random().toString() function Page() { // No fallback data const { data } = useSWR( key, () => new Promise(resolve => setTimeout(() => resolve('data'), 100) ), { loadingTimeout: 10 } ) return

{data || 'pending'}

} render() await screen.findByText('data') }) } ) }) ================================================ FILE: test/use-swr-loading.test.tsx ================================================ import { screen, fireEvent } from '@testing-library/react' import React, { useEffect, act } from 'react' import useSWR from 'swr' import { createResponse, createKey, sleep, renderWithConfig, nextTick, executeWithoutBatching } from './utils' describe('useSWR - loading', () => { it('should return validating state', async () => { let renderCount = 0 const key = createKey() function Page() { const { data, isValidating } = useSWR(key, () => createResponse('data')) renderCount++ return (
hello, {data}, {isValidating ? 'validating' : 'ready'}
) } renderWithConfig() screen.getByText('hello, , validating') await screen.findByText('hello, data, ready') // data isValidating // -> undefined, true // -> data, false expect(renderCount).toEqual(2) }) it('should return loading state', async () => { let renderCount = 0 const key = createKey() function Page() { const { data, isLoading } = useSWR(key, () => createResponse('data')) renderCount++ return (
hello, {data}, {isLoading ? 'loading' : 'ready'}
) } renderWithConfig() screen.getByText('hello, , loading') await screen.findByText('hello, data, ready') // data isLoading // -> undefined, true // -> data, false expect(renderCount).toEqual(2) }) it('should avoid extra rerenders', async () => { let renderCount = 0 const key = createKey() function Page() { // we never access `isValidating`, so it will not trigger rerendering const { data } = useSWR(key, () => createResponse('data')) renderCount++ return
hello, {data}
} renderWithConfig() await screen.findByText('hello, data') // data // -> undefined // -> data expect(renderCount).toEqual(2) }) it('should avoid extra rerenders while fetching', async () => { let renderCount = 0, dataLoaded = false const key = createKey() function Page() { // we never access anything useSWR(key, async () => { const res = await createResponse('data') dataLoaded = true return res }) renderCount++ return
hello
} renderWithConfig() screen.getByText('hello') await executeWithoutBatching(() => sleep(100)) // wait // it doesn't re-render, but fetch was triggered expect(renderCount).toEqual(1) expect(dataLoaded).toEqual(true) }) it('should avoid extra rerenders when the fallback is the same as cache', async () => { let renderCount = 0, initialDataLoaded = false, mutationDataLoaded = false const key = createKey() function Page() { const { data, mutate } = useSWR( key, async () => { const res = await createResponse({ greeting: 'hello' }) initialDataLoaded = true return res }, { fallbackData: { greeting: 'hello' } } ) useEffect(() => { const timeout = setTimeout( () => mutate(async () => { const res = await createResponse({ greeting: 'hello' }) mutationDataLoaded = true return res }), 200 ) return () => clearTimeout(timeout) }, [mutate]) renderCount++ return
{data?.greeting}
} renderWithConfig() screen.getByText('hello') await act(() => sleep(1000)) // wait // it doesn't re-render, but fetch was triggered expect(initialDataLoaded).toEqual(true) expect(mutationDataLoaded).toEqual(true) expect(renderCount).toEqual(1) }) it('should return enumerable object', async () => { // If the returned object is enumerable, we can use the spread operator // to deconstruct all the keys. function Page() { const swr = useSWR(createKey()) return (
{Object.keys({ ...swr }) .sort() .join(',')}
) } renderWithConfig() screen.getByText('data,error,isLoading,isValidating,mutate') }) it('should sync validating states', async () => { const key = createKey() const fetcher = jest.fn() function Foo() { const { isValidating } = useSWR(key, async () => { fetcher() return 'foo' }) return isValidating ? <>validating : <>stopped } function Page() { return ( <> , ) } renderWithConfig() screen.getByText('validating,validating') await nextTick() screen.getByText('stopped,stopped') expect(fetcher).toHaveBeenCalledTimes(1) }) it('should sync all validating states if errored', async () => { const key = createKey() function Foo() { const { isValidating } = useSWR(key, async () => { throw new Error(key) }) return isValidating ? <>validating : <>stopped } function Page() { return ( <> , ) } renderWithConfig() screen.getByText('validating,validating') await nextTick() screen.getByText('stopped,stopped') }) it('should sync all validating states if errored but paused', async () => { const key = createKey() let paused = false function Foo() { const { isValidating } = useSWR(key, { isPaused: () => paused, fetcher: async () => { await sleep(50) throw new Error(key) }, dedupingInterval: 0, errorRetryInterval: 50 }) return isValidating ? <>validating : <>stopped } function Page() { const [mountSecondRequest, setMountSecondRequest] = React.useState(false) return ( <> ,{mountSecondRequest ? : null}
) } renderWithConfig() screen.getByText('validating,') await executeWithoutBatching(() => sleep(70)) screen.getByText('stopped,') fireEvent.click(screen.getByText('start')) await screen.findByText('validating,validating') // Pause before it resolves paused = true await executeWithoutBatching(() => sleep(50)) // They should both stop screen.getByText('stopped,stopped') }) it('should not trigger loading state when revalidating', async () => { const key = createKey() let renderCount = 0 function Page() { const { isLoading, isValidating, mutate } = useSWR(key, () => createResponse('data', { delay: 10 }) ) renderCount++ return (
{isLoading ? 'loading' : 'ready'}, {isValidating ? 'validating' : 'ready'}
) } renderWithConfig() screen.getByText('loading,validating') await screen.findByText('ready,ready') fireEvent.click(screen.getByText('revalidate')) screen.getByText('ready,validating') await screen.findByText('ready,ready') // isValidating: true -> false -> true -> false expect(renderCount).toBe(4) }) it('should trigger loading state when changing the key', async () => { function Page() { const [key, setKey] = React.useState(createKey) const { isLoading, isValidating } = useSWR(key, () => createResponse('data', { delay: 10 }) ) return (
{isLoading ? 'loading' : 'ready'}, {isValidating ? 'validating' : 'ready'}
) } renderWithConfig() screen.getByText('loading,validating') await screen.findByText('ready,ready') fireEvent.click(screen.getByText('update key')) screen.getByText('loading,validating') await screen.findByText('ready,ready') }) it('isLoading and isValidating should always respect cache value', async () => { const key = createKey() const Page = () => { const { data } = useSWR(key, () => createResponse('result', { delay: 10 }) ) const { data: response } = useSWR(data, () => createResponse('data', { delay: 10 }) ) // eslint-disable-next-line react/display-name const Component = ((_: any) => () => { const { data: result, isLoading, isValidating // eslint-disable-next-line react-hooks/rules-of-hooks } = useSWR(key, () => createResponse('result', { delay: 10 })) return (
{`result is ${ result ? result : 'null' },${isLoading},${isValidating}`}
) })(response) return } renderWithConfig() screen.getByText('result is null,true,true') await screen.findByText('result is result,false,false') }) it('isLoading should be false when key is null', () => { function Page() { const { isLoading } = useSWR(null, () => 'data') return
isLoading:{String(isLoading)}
} renderWithConfig() screen.getByText('isLoading:false') }) it('isLoading should be false when the key function throws an error', () => { function Page() { const { isLoading } = useSWR( () => { throw new Error('error') }, () => 'data' ) return
isLoading:{String(isLoading)}
} renderWithConfig() screen.getByText('isLoading:false') }) }) ================================================ FILE: test/use-swr-local-mutation.test.tsx ================================================ import { screen, fireEvent } from '@testing-library/react' import { useEffect, useState, act } from 'react' import useSWR, { mutate as globalMutate, useSWRConfig } from 'swr' import useSWRInfinite from 'swr/infinite' import { serialize } from 'swr/_internal' import { createResponse, sleep, nextTick, createKey, renderWithConfig, renderWithGlobalCache, executeWithoutBatching } from './utils' describe('useSWR - local mutation', () => { it('should trigger revalidation programmatically', async () => { let value = 0, mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => value++, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') act(() => { // mutate and revalidate mutate(key) }) await screen.findByText('data: 1') }) it('should share local state when no fetcher is specified', async () => { const baseKey = createKey() const useSharedState = (key, fallbackData) => { const { data: state, mutate: setState } = useSWR(`${baseKey}--${key}`, { fallbackData }) return [state, setState] } function Page() { const [name, setName] = useSharedState('name', 'huozhi') const [job, setJob] = useSharedState('job', 'gardener') return ( { setName('@huozhi') setJob('chef') }} > {`${name}:${job}`} ) } renderWithConfig() const root = screen.getByText('huozhi:gardener') fireEvent.click(root) await screen.findByText('@huozhi:chef') }) it('should trigger revalidation programmatically within a dedupingInterval', async () => { let value = 0, mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => value++, { dedupingInterval: 2000 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') act(() => { // trigger revalidation mutate(key) }) await screen.findByText('data: 1') }) it('should mutate the cache and revalidate', async () => { let value = 0, mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => value++, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') act(() => { // mutate and revalidate mutate(key, 'mutate') }) await screen.findByText('data: 1') }) it('should dedupe extra requests after mutation', async () => { let value = 0, mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => value++, { dedupingInterval: 2000 }) useSWR(key, () => value++, { dedupingInterval: 2000 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') act(() => { // mutate and revalidate mutate(key) }) await screen.findByText('data: 1') }) it('should mutate the cache and revalidate in async', async () => { let mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => createResponse('truth'), { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: truth') act(() => { // mutate and revalidate mutate(key, 'local') }) await screen.findByText('data: local') // recovers await screen.findByText('data: truth') }) it('should support async mutation with promise', async () => { let mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => 0, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await nextTick() await act(() => { // mutate and revalidate return mutate(key, createResponse(999), false) }) await screen.findByText('data: 999') }) it('should support async mutation with async function', async () => { let mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => 0, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await nextTick() await act(() => { // mutate and revalidate return mutate(key, async () => createResponse(999), false) }) await screen.findByText('data: 999') }) it('should trigger on mutation without data', async () => { let value = 0, mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => value++, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') act(() => { // trigger revalidation mutate(key) }) await screen.findByText('data: 1') }) it('should call function as data passing current cached value', async () => { let mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, null) return
data: {data}
} // Prefill the cache with data renderWithConfig(, { provider: () => new Map([[key, { data: 'cached data' }]]) }) const callback = jest.fn() await act(() => mutate(key, callback)) expect(callback).toHaveBeenCalledWith('cached data') }) it('should call function with undefined if key not cached', async () => { let cache, mutate function App() { const { cache: cache_, mutate: mutate_ } = useSWRConfig() cache = cache_ mutate = mutate_ return null } renderWithConfig() const increment = jest.fn(currentValue => currentValue == null ? undefined : currentValue + 1 ) const key = createKey() await mutate(key, increment, false) expect(increment).toHaveBeenCalledTimes(1) expect(increment).toHaveBeenLastCalledWith(undefined) expect(increment).toHaveLastReturnedWith(undefined) cache.set(key, { ...cache.get(key), data: 42 }) await mutate(key, increment, false) expect(increment).toHaveBeenCalledTimes(2) expect(increment).toHaveBeenLastCalledWith(42) expect(increment).toHaveLastReturnedWith(43) }) it('should return results of the mutation', async () => { const key = createKey() // returns the data if the promise resolved expect(globalMutate(key, Promise.resolve('data'))).resolves.toBe('data') // throw the error if the promise rejected expect( globalMutate(key, Promise.reject(new Error('error'))) ).rejects.toBeInstanceOf(Error) }) it('globalMutate should return undefined if the key is serialized to "" ', async () => { // returns the data if the promise resolved expect(globalMutate(null, Promise.resolve('data'))).resolves.toBe(undefined) // throw the error if the promise rejected const e = new Error('error') expect( globalMutate(() => { throw e }, Promise.resolve('data')) ).rejects.toEqual(e) }) it('should get bound mutate from useSWR', async () => { const key = createKey() function Page() { const { data, mutate: boundMutate } = useSWR(key, () => 'fetched') return (
boundMutate('mutated', false)}>data: {data}
) } renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: fetched') // call bound mutate fireEvent.click(screen.getByText('data: fetched')) // expect a new updated value (after a tick) await screen.findByText('data: mutated') }) it('should ignore in flight requests when mutating', async () => { const key = createKey() // set it to 1 act(() => { globalMutate(key, 1) }) function Section() { const { data } = useSWR(key, () => createResponse(2, { delay: 150 })) return
{data}
} renderWithGlobalCache(
) screen.getByText('1') // directly from cache await act(() => sleep(100)) // still suspending act(() => { globalMutate(key, 3) }) // set it to 3. this will drop the ongoing request await screen.findByText('3') await act(() => sleep(100)) screen.getByText('3') }) it('should ignore in flight mutations when calling another async mutate', async () => { let value = 'off', mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => createResponse(value, { delay: 100 })) return
{data}
} renderWithConfig() await screen.findByText('off') // Initial state act(() => { mutate(key, 'on', false) }) // Validate local state is now "on" await screen.findByText('on') // Simulate toggling "on" await act(async () => { expect( mutate( key, () => { value = 'on' return createResponse('on', { delay: 100 }) }, false ) ).resolves.toBe('on') }) act(() => { mutate(key, 'off', false) }) // Validate local state is now "off" await screen.findByText('off') // Simulate toggling "off" await act(async () => { expect( mutate( key, () => { value = 'off' return createResponse('off', { delay: 100 }) }, false ) ).resolves.toBe('off') }) // Wait for toggling "on" promise to resolve, but the "on" mutation is canceled await act(() => sleep(50)) screen.getByText('off') // Wait for toggling "off" promise to resolve await act(() => sleep(100)) screen.getByText('off') }) it('null is stringified when found inside an array', async () => { let value = 0, mutate function Page() { mutate = useSWRConfig().mutate const { data } = useSWR([null], () => value++, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') act(() => { // trigger revalidation mutate([null]) }) await screen.findByText('data: 1') }) it('should return promise from mutate without data', async () => { let value = 0, mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => value++, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() screen.getByText('data:') // mount await screen.findByText('data: 0') let promise await act(() => { promise = mutate(key) return promise }) expect(promise).toBeInstanceOf(Promise) // mutate returns a promise expect(promise).resolves.toBe(1) // the return value should be the new cache screen.getByText('data: 1') }) it('should not update error in global cache when mutate failed with error', async () => { const value = 0 const key = createKey() const message = 'mutate-error' let cache, mutate function Page() { const { cache: cache_, mutate: mutate_ } = useSWRConfig() cache = cache_ mutate = mutate_ const { data, error } = useSWR(key, () => value) return
{error ? error.message : `data: ${data}`}
} renderWithConfig() // Mount await screen.findByText('data: 0') await act(async () => { // mutate error will be thrown, add try catch to avoid crashing try { await mutate( key, () => { throw new Error(message) }, false ) } catch (e) { // do nothing } }) screen.getByText('data: 0') const [keyInfo] = serialize(key) const cacheError = cache.get(keyInfo)?.error expect(cacheError).toBeUndefined() }) it('should update error in global cache when mutate succeeded', async () => { const key = createKey() let mutate function Page() { const { data, error, mutate: mutate_ } = useSWR(key, async () => { throw new Error('error') }) mutate = mutate_ return
{error ? error.message : `data: ${data}`}
} renderWithConfig() // Mount await screen.findByText('error') act(() => { mutate(v => v, { revalidate: false }) }) await screen.findByText('data: undefined') }) it('should keep the `mutate` function referential equal', async () => { const refs = [] let mutate const updatedKey = createKey() function Section() { mutate = useSWRConfig().mutate const [key, setKey] = useState(null) const { data, mutate: boundMutate } = useSWR(key, () => createResponse(1)) useEffect(() => { const timeout = setTimeout(() => setKey(updatedKey), 50) return () => clearTimeout(timeout) }, []) refs.push(boundMutate) return
{data}
} renderWithConfig(
) await act(() => sleep(100)) act(() => { mutate(updatedKey, 2) }) await act(() => sleep(50)) // check all `setSize`s are referential equal. for (const ref of refs) { expect(ref).toEqual(refs[0]) } }) // https://github.com/vercel/swr/pull/1003 it.skip('should not dedupe synchronous mutations', async () => { const mutationRecivedValues = [] const renderRecivedValues = [] const key = createKey() function Component() { const { data, mutate: boundMutate } = useSWR(key, () => 0) useEffect(() => { setTimeout(() => { // let's mutate twice, synchronously boundMutate(v => { mutationRecivedValues.push(v) // should be 0 return 1 }, false) boundMutate(v => { mutationRecivedValues.push(v) // should be 1 return 2 }, false) }, 1) // the mutate function is guaranteed to be the same reference // eslint-disable-next-line react-hooks/exhaustive-deps }, []) renderRecivedValues.push(data) // should be 0 -> 2, never render 1 in between return null } renderWithConfig() await executeWithoutBatching(() => sleep(50)) expect(mutationRecivedValues).toEqual([0, 1]) expect(renderRecivedValues).toEqual([undefined, 0, 1, 2]) }) it('async mutation case 1 (startAt <= MUTATION_TS[key])', async () => { let result = 0 const key = createKey() const fetcher = jest.fn(createResponse) function Component() { const { data, mutate: boundMutate } = useSWR( key, () => fetcher(0, { delay: 300 }), { dedupingInterval: 200 } ) return (
{ boundMutate(async () => { result += 1 return createResponse(result, { delay: 100 }) }, false) }} > {data !== undefined ? `data: ${data.toString()}` : 'loading'}
) } renderWithConfig() screen.getByText('loading') await act(() => sleep(50)) fireEvent.click(screen.getByText('loading')) await act(() => sleep(100)) // mutate success await screen.findByText('data: 1') await act(() => sleep(150)) // fetcher result should be ignored expect(fetcher).toHaveBeenCalledTimes(1) await screen.findByText('data: 1') }) it('async mutation case 2 (startAt <= MUTATION_END_TS[key])', async () => { let result = 0, mutate const fetcher = jest.fn(createResponse) const updatedKey = createKey() function Component() { const [key, setKey] = useState(null) mutate = useSWRConfig().mutate const { data } = useSWR( key, () => fetcher(0, { delay: 400 }), { dedupingInterval: 200 } ) useEffect(() => { mutate( updatedKey, async () => { result += 1 return createResponse(result, { delay: 200 }) }, false ) setKey(updatedKey) }, []) return (
{data !== undefined ? `data: ${data.toString()}` : 'loading'}
) } renderWithConfig() screen.getByText('loading') // mutate success await act(() => sleep(200)) fireEvent.click(screen.getByText('data: 1')) // fetcher result should be ignored await act(() => sleep(200)) expect(fetcher).toHaveBeenCalledTimes(1) await screen.findByText('data: 1') }) it('async mutation case 3 (MUTATION_END_TS[key] === 0)', async () => { let result = 0, mutate const fetcher = jest.fn(createResponse) const updatedKey = createKey() function Component() { const [key, setKey] = useState(null) mutate = useSWRConfig().mutate const { data } = useSWR( key, () => fetcher(0, { delay: 100 }), { dedupingInterval: 200 } ) useEffect(() => { setKey(updatedKey) mutate( updatedKey, async () => { result += 1 return createResponse(result, { delay: 200 }) }, false ) }, []) return (
{data !== undefined ? `data: ${data.toString()}` : 'loading'}
) } renderWithConfig() screen.getByText('loading') // fetcher result should be ignored await act(() => sleep(100)) expect(fetcher).toHaveBeenCalledTimes(1) screen.getByText('loading') // mutate success await act(() => sleep(100)) await screen.findByText('data: 1') }) it('isValidating should be false when no fetcher is provided', async () => { const key = createKey() function Page() { const { isValidating } = useSWR(key) return

{isValidating.toString()}

} renderWithConfig() screen.getByText('false') }) it('isLoading and isValidating should be false when revalidate is set to false', async () => { const key = createKey() function Page() { const { data, isLoading, isValidating, mutate } = useSWR( key, () => 'data', { fallbackData: 'fallback', revalidateOnMount: false, revalidateOnFocus: false } ) return (

data: {data}

isLoading: {isLoading.toString()}

isValidating: {isValidating.toString()}

) } renderWithConfig() screen.getByText('data: fallback') screen.getByText('isLoading: false') screen.getByText('isValidating: false') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: fallback1') screen.getByText('isLoading: false') screen.getByText('isValidating: false') }) it('bound mutate should always use the latest key', async () => { const key = createKey() const fetcher = jest.fn(() => 'data') function Page() { const [ready, setReady] = useState(false) const { mutate: boundMutate } = useSWR(ready ? key : null, fetcher) return (
) } renderWithConfig() screen.getByText('set ready') expect(fetcher).toHaveBeenCalledTimes(0) // it should trigger the fetch fireEvent.click(screen.getByText('set ready')) await act(() => sleep(10)) expect(fetcher).toHaveBeenCalledTimes(1) // it should trigger the fetch again fireEvent.click(screen.getByText('mutate')) await act(() => sleep(10)) expect(fetcher).toHaveBeenCalledTimes(2) }) it('should reset isValidating after mutate', async () => { const key = createKey() function Data() { const { data, isValidating } = useSWR(key, () => createResponse('data', { delay: 30 }) ) const { cache } = useSWRConfig() const [keyInfo] = serialize(key) const cacheIsValidating = cache.get(keyInfo)?.isValidating return ( <>

data:{data}

isValidating:{isValidating.toString()}

cache:validating:{cacheIsValidating.toString()}

) } function Page() { const { mutate: boundMutate } = useSWR(key, () => createResponse('data', { delay: 30 }) ) const [visible, setVisible] = useState(false) return (
{visible && }
) } renderWithConfig() fireEvent.click(screen.getByText('preload')) await act(() => sleep(20)) fireEvent.click(screen.getByText('show')) screen.getByText('data:data') screen.getByText('isValidating:true') await act(() => sleep(20)) screen.getByText('data:data') screen.getByText('isValidating:false') }) it('should be able to mutate data to undefined', async () => { const key = createKey() function Page() { const { data, mutate } = useSWR(key, () => 'foo') return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: undefined') }) it('should be able to mutate data to undefined asynchronously', async () => { const key = createKey() function Page() { const { data, mutate } = useSWR(key, () => 'foo') return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo') fireEvent.click(screen.getByText('mutate')) await screen.findByText('data: undefined') }) // https://github.com/vercel/swr/issues/482 it('should be able to deduplicate multiple mutate calls', async () => { const key = createKey() const loggedData = [] function Page() { const { data, mutate } = useSWR(key, () => 'foo') useEffect(() => { async function startMutation() { await sleep(10) mutate('sync1', false) mutate(createResponse('async1', { delay: 50 }), false) await sleep(10) mutate('sync2', false) mutate(createResponse('async2', { delay: 50 }), false) await sleep(10) mutate('sync3', false) mutate(createResponse('async3', { delay: 50 }), false) } startMutation() }, [mutate]) loggedData.push(data) return null } renderWithConfig() await executeWithoutBatching(() => sleep(200)) // Only "async3" is left and others were deduped. expect(loggedData).toEqual([ undefined, 'foo', 'sync1', 'sync2', 'sync3', 'async3' ]) }) it('should ignore in flight mutation error when calling another async mutate', async () => { const key = createKey() const errorMutate = () => new Promise((_, reject) => { setTimeout(() => reject('error'), 200) }) const successMutate = () => new Promise(resolve => { setTimeout(() => resolve('success'), 100) }) function Page() { const { data, mutate: boundMutate } = useSWR(key, () => createResponse('data', { delay: 100 }) ) return (
{data}
) } renderWithConfig() await screen.findByText('data') fireEvent.click(screen.getByText('error-mutate')) await sleep(50) fireEvent.click(screen.getByText('success-mutate')) await screen.findByText('success') await sleep(300) await screen.findByText('success') }) it('should not update the cache when `populateCache` is disabled', async () => { const key = createKey() function Page() { const { data, mutate } = useSWR(key, () => 'foo') return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo') fireEvent.click(screen.getByText('mutate')) await sleep(30) await screen.findByText('data: foo') }) it('should support optimistic updates via `optimisticData`', async () => { const key = createKey() const renderedData = [] let mutate function Page() { const { data, mutate: boundMutate } = useSWR(key, () => createResponse('foo', { delay: 20 }) ) mutate = boundMutate renderedData.push(data) return
data: {String(data)}
} renderWithConfig() await screen.findByText('data: foo') await executeWithoutBatching(() => mutate(createResponse('baz', { delay: 20 }), { optimisticData: 'bar' }) ) await act(() => sleep(30)) expect(renderedData).toEqual([undefined, 'foo', 'bar', 'baz', 'foo']) }) it('should support optimistic updates via function `optimisticData`', async () => { const key = createKey() const renderedData = [] let mutate function Page() { const { data, mutate: boundMutate } = useSWR(key, () => createResponse('foo', { delay: 20 }) ) mutate = boundMutate renderedData.push(data) return
data: {String(data)}
} renderWithConfig() await screen.findByText('data: foo') await executeWithoutBatching(() => mutate(createResponse('baz', { delay: 20 }), { optimisticData: data => 'function_' + data }) ) await act(() => sleep(30)) expect(renderedData).toEqual([ undefined, 'foo', 'function_foo', 'baz', 'foo' ]) }) it('should be able use mutate to manipulate data via function `optimisticData`', async () => { const key = createKey() const renderedData = [] function useOptimisticDataMutate(_key, data, fallback) { const { mutate } = useSWRConfig() return () => { return mutate(_key, createResponse(data, { delay: 20 }), { optimisticData() { return fallback } }) } } function Page() { const mutateWithOptData = useOptimisticDataMutate(key, 'final', 'loading') const { data } = useSWR(key) renderedData.push(data) return (
data: {String(data)}
) } renderWithConfig() fireEvent.click(screen.getByText('mutate')) await act(() => sleep(30)) expect(renderedData).toEqual([undefined, 'loading', 'final']) }) it('should be able to use functional optimistic data config and use second param `displayedData` to keep UI consistent in slow networks', async () => { const key1 = createKey() const key2 = createKey() let data1 = 0 let data2 = 0 function useOptimisticData1Mutate() { const { mutate } = useSWRConfig() return () => { return mutate(key1, () => createResponse(data1++, { delay: 1000 }), { optimisticData(currentData) { return currentData + 1 // optimistic update current data } }) } } function useOptimisticData2Mutate() { const { mutate } = useSWRConfig() return () => { return mutate(key2, () => createResponse(data2++, { delay: 1000 }), { optimisticData(_, displayedData) { return displayedData + 1 // optimistic update displayed data } }) } } function Page() { const mutateWithOptimisticallyUpdatedCurrentData = useOptimisticData1Mutate() const mutateWithOptimisticallyUpdatedDisplayedData = useOptimisticData2Mutate() const { data: renderedData1 } = useSWR(key1, () => createResponse(data1, { delay: 1000 }) ) const { data: renderedData2 } = useSWR(key2, () => createResponse(data2, { delay: 1000 }) ) return (
data: {renderedData1}
data: {renderedData2}
) } renderWithConfig() await act(() => sleep(1000)) // Wait for initial data to load fireEvent.click(screen.getByText('incrementCurrent')) fireEvent.click(screen.getByText('incrementDisplayed')) fireEvent.click(screen.getByText('incrementCurrent')) fireEvent.click(screen.getByText('incrementDisplayed')) const renderedData1 = parseInt( (await screen.findByTestId('data1')).innerHTML, 10 ) const renderedData2 = Number((await screen.findByTestId('data2')).innerHTML) await act(() => sleep(2000)) // Wait for revalidation roundtrip const renderedRevalidatedData1 = Number( (await screen.findByTestId('data1')).innerHTML ) const renderedRevalidatedData2 = Number( (await screen.findByTestId('data2')).innerHTML ) expect(data1).toEqual(2) expect(renderedData1).toEqual(1) expect(renderedRevalidatedData1).toEqual(2) expect(data2).toEqual(2) expect(renderedData2).toEqual(2) expect(renderedRevalidatedData2).toEqual(2) }) it('should prevent race conditions with optimistic UI', async () => { const key = createKey() const renderedData = [] let mutate function Page() { const { data, mutate: boundMutate } = useSWR(key, () => Math.random(), { refreshInterval: 10, dedupingInterval: 0 }) mutate = boundMutate renderedData.push(data) return
data: {String(data)}
} renderWithConfig() await act(() => sleep(20)) await executeWithoutBatching(() => mutate(createResponse('end', { delay: 50 }), { optimisticData: 'start' }) ) await act(() => sleep(20)) // There can never be any changes during a mutation — it should be atomic. expect(renderedData.indexOf('end') - renderedData.indexOf('start')).toEqual( 1 ) }) it('should rollback optimistic updates when mutation fails', async () => { const key = createKey() const renderedData = [] let mutate let cnt = 0 function Page() { const { data, mutate: boundMutate } = useSWR(key, () => createResponse(cnt++, { delay: 20 }) ) mutate = boundMutate if ( !renderedData.length || renderedData[renderedData.length - 1] !== data ) { renderedData.push(data) } return
data: {String(data)}
} renderWithConfig() await screen.findByText('data: 0') try { await executeWithoutBatching(() => mutate(createResponse(new Error('baz'), { delay: 20 }), { optimisticData: 'bar' }) ) } catch (e) { expect(e.message).toEqual('baz') } await sleep(30) expect(renderedData).toEqual([undefined, 0, 'bar', 0, 1]) }) it('should not revert to optimistic data when rolling back', async () => { const key = createKey() const renderedData = [] let mutate let previousValue let previousValue2 function Page() { const { data, mutate: boundMutate } = useSWR(key, () => createResponse(0, { delay: 20 }) ) mutate = boundMutate if ( !renderedData.length || renderedData[renderedData.length - 1] !== data ) { renderedData.push(data) } return
data: {String(data)}
} renderWithConfig() await screen.findByText('data: 0') await executeWithoutBatching(async () => { const p1 = mutate(createResponse(new Error(), { delay: 20 }), { optimisticData: 1 }) await sleep(10) const p2 = mutate( v => { previousValue = v return createResponse(new Error(), { delay: 20 }) }, { optimisticData: v => { previousValue2 = v return 2 } } ) return Promise.all([p1, p2]) }).catch(_e => {}) await sleep(30) // It should revert to `0` instead of `1` at the end. expect(renderedData).toEqual([undefined, 0, 1, 2, 0]) // It should receive the original displayed data instead of the currently displayed data. expect(previousValue).toBe(0) expect(previousValue2).toBe(0) }) it('should rollback to the original value after multiple mutations', async () => { const key = createKey() const renderedData = [] let mutate let serverData = 'foo' function Page() { const { data, mutate: boundMutate } = useSWR(key, () => createResponse(serverData, { delay: 20 }) ) mutate = boundMutate if ( !renderedData.length || renderedData[renderedData.length - 1] !== data ) { renderedData.push(data) } return
data: {String(data)}
} // data == "foo" renderWithConfig() await screen.findByText('data: foo') // data == "bar" await executeWithoutBatching(async () => { await mutate( createResponse('bar', { delay: 20 }).then(r => (serverData = r)), { optimisticData: 'bar', populateCache: false } ) }) await sleep(30) try { // data == "baz", then reverted back to "bar" await executeWithoutBatching(() => mutate(createResponse(new Error(), { delay: 20 }), { optimisticData: 'baz', revalidate: false }) ) } catch (_) { // Ignore } await sleep(30) expect(renderedData).toEqual([undefined, 'foo', 'bar', 'baz', 'bar']) }) it('should rollback to the original value after multiple mutations (2)', async () => { const key = createKey() const renderedData = [] let mutate let serverData = 'foo' function Page() { const { data, mutate: boundMutate } = useSWR(key, () => createResponse(serverData, { delay: 20 }) ) mutate = boundMutate if ( !renderedData.length || renderedData[renderedData.length - 1] !== data ) { renderedData.push(data) } return
data: {String(data)}
} // data == "foo" renderWithConfig() await screen.findByText('data: foo') // Here m1 and m2 overlap and m1 will be discarded. await executeWithoutBatching(async () => { const m1 = mutate( createResponse('bar', { delay: 30 }).then(r => (serverData = r)), { optimisticData: 'bar', populateCache: false } ) await sleep(10) const m2 = mutate( createResponse('baz', { delay: 30 }).then(r => (serverData = r)) ) await m1 await m2 }) try { // data == "qux", then reverted back to "baz" await executeWithoutBatching(() => mutate(createResponse(new Error(), { delay: 20 }), { optimisticData: 'qux', revalidate: false }) ) } catch (_) { // Ignore } // data: "foo" -> "bar" -> "baz" -> "qux" -> "baz" // ^ optimistic ^ error await sleep(30) expect(renderedData).toEqual([undefined, 'foo', 'bar', 'baz', 'qux', 'baz']) }) it('should not rollback optimistic updates if `rollbackOnError` is disabled', async () => { const key = createKey() const renderedData = [] let mutate let cnt = 0 function Page() { const { data, mutate: boundMutate } = useSWR(key, () => createResponse(cnt++, { delay: 20 }) ) mutate = boundMutate if ( !renderedData.length || renderedData[renderedData.length - 1] !== data ) { renderedData.push(data) } return
data: {String(data)}
} renderWithConfig() await screen.findByText('data: 0') try { await executeWithoutBatching(() => mutate(createResponse(new Error('baz-1'), { delay: 20 }), { optimisticData: 'bar-1', rollbackOnError: false }) ) } catch (e) { expect(e.message).toEqual('baz-1') } await sleep(30) expect(renderedData).toEqual([undefined, 0, 'bar-1', 1]) let rollbackErrorMessage try { await executeWithoutBatching(() => mutate(createResponse(new Error('baz-2'), { delay: 20 }), { optimisticData: 'bar-2', rollbackOnError: error => { rollbackErrorMessage = error.message return false } }) ) } catch (e) { expect(e.message).toEqual('baz-2') } await sleep(30) expect(renderedData).toEqual([undefined, 0, 'bar-1', 1, 'bar-2', 2]) expect(rollbackErrorMessage).toEqual('baz-2') }) it('should support transforming the result with `populateCache` before writing back', async () => { const key = createKey() function Page() { const { data, mutate } = useSWR(key, () => 'foo') return ( <>
data: {String(data)}
) } renderWithConfig() await screen.findByText('data: foo') fireEvent.click(screen.getByText('mutate')) await sleep(30) await screen.findByText('data: !bar') }) it('should support transforming the result with `populateCache` for async data with optimistic data', async () => { const key = createKey() const renderedData = [] let mutatePage function Page() { const { data, mutate } = useSWR(key, () => 'foo') mutatePage = () => mutate(new Promise(res => setTimeout(() => res('baz'), 20)), { optimisticData: () => 'bar', revalidate: false, populateCache: v => '!' + v }) renderedData.push(data) return null } renderWithConfig() await act(() => sleep(10)) await executeWithoutBatching(() => mutatePage()) await sleep(30) expect(renderedData).toEqual([undefined, 'foo', 'bar', '!baz']) }) it('should pass the original data snapshot to `populateCache` as the second parameter', async () => { const key = createKey() const renderedData = [] let serverData = ['Apple', 'Banana'] let appendData const sendRequest = (newItem: string) => { return new Promise(res => setTimeout(() => { // The server capitalizes the new item. const modifiedData = newItem.charAt(0).toUpperCase() + newItem.slice(1) serverData = [...serverData, modifiedData] res(modifiedData) }, 20) ) } function Page() { const { mutate } = useSWRConfig() const { data } = useSWR(key, () => serverData) appendData = () => { return mutate(key, sendRequest('cherry'), { optimisticData: [...data, 'cherry (optimistic)'], populateCache: (result, currentData) => [ ...currentData, result + ' (res)' ], revalidate: true }) } renderedData.push(data) return null } renderWithConfig() await executeWithoutBatching(async () => { await sleep(10) await appendData() await sleep(30) }) expect(renderedData).toEqual([ undefined, // fetching ['Apple', 'Banana'], // initial data ['Apple', 'Banana', 'cherry (optimistic)'], // optimistic data ['Apple', 'Banana', 'Cherry (res)'], // appended server response ['Apple', 'Banana', 'Cherry'] // revalidated data ]) }) it('should support key filter as first argument', async () => { const key = createKey() const mutationAllResults = [] const mutationOneResults = [] function Page() { const { data: data1 } = useSWR(key + 'first', v => v) const { data: data2 } = useSWR(key + 'second', v => v) const { mutate } = useSWRConfig() return (
{ const res = await mutate( k => typeof k === 'string' && k.startsWith(key), data => { return 'value-' + data.replace(key, '') }, false ) mutationAllResults.push(...res) }} /> { const res = await mutate( k => typeof k === 'string' && k.includes('first'), () => 'value-first-g0', false ) mutationOneResults.push(...res) }} />

first:{data1}

second:{data2}

) } renderWithConfig() screen.getByText('first:') screen.getByText('second:') await nextTick() // filter and mutate `first` and `second` fireEvent.click(screen.getByTestId('mutator-filter-all')) await nextTick() await screen.findByText('first:value-first') await screen.findByText('second:value-second') expect(mutationAllResults).toEqual(['value-first', 'value-second']) // only filter and mutate `first` fireEvent.click(screen.getByTestId('mutator-filter-one')) await nextTick() await screen.findByText('first:value-first-g0') await screen.findByText('second:value-second') expect(mutationOneResults).toEqual(['value-first-g0']) }) it('should remove all key value pairs when clear cache through key filter', async () => { const key = createKey() const mutationOneResults = [] function Page() { const { data: data1 } = useSWR(key + 'first') const { data: data2 } = useSWR(key + 'second') const { mutate } = useSWRConfig() return (
{ const promises = ['first', 'second'].map(async name => { await mutate(key + name, `value-${name}`, false) }) await Promise.all(promises) }} /> { const res = await mutate(() => true, undefined, false) mutationOneResults.push(...res) }} />

first:{data1}

second:{data2}

) } renderWithConfig() // add and mutate `first` and `second` fireEvent.click(screen.getByTestId('mutator-filter-all')) await nextTick() await screen.findByText('first:value-first') await screen.findByText('second:value-second') // reset all keys to undefined fireEvent.click(screen.getByTestId('clear-all')) await nextTick() await screen.findByText('first:') await screen.findByText('second:') expect(mutationOneResults).toEqual([undefined]) }) it('should pass the original key to the key filter', async () => { const key = createKey() const keys = [] function Page() { useSWR([key, 'first']) useSWR([key, 'second']) useSWR(key) const { mutate } = useSWRConfig() return ( { mutate( k => { keys.push(k) return false }, undefined, false ) }} /> ) } renderWithConfig() // add and mutate `first` and `second` fireEvent.click(screen.getByTestId('mutator-filter-all')) await nextTick() expect(keys).toEqual([[key, 'first'], [key, 'second'], key]) }) it('should skip speicla useSWRInfinite keys', async () => { const key = createKey() const keys = [] function Page() { useSWR([key, 'first']) useSWR([key, 'second']) useSWR(key) useSWRInfinite( i => [key, 'inf', i], k => k, { initialSize: 2 } ) const { mutate } = useSWRConfig() return ( { mutate( k => { keys.push(k) return false }, undefined, false ) }} /> ) } renderWithConfig() await nextTick() // add and mutate `first` and `second` fireEvent.click(screen.getByTestId('mutator-filter-all')) expect(keys).toEqual([ [key, 'first'], [key, 'second'], key, [key, 'inf', 0], [key, 'inf', 1] ]) }) it('should support revalidate as a function', async () => { let value = 0, mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => value++) return
data: {data}
} renderWithConfig() screen.getByText('data:') // mount await screen.findByText('data: 0') act(() => { // value 0 -> 0 mutate(key, 100, { revalidate: () => false }) }) await screen.findByText('data: 100') act(() => { // value 0 -> 1 mutate(key, 200, { revalidate: () => true }) }) await screen.findByText('data: 200') await screen.findByText('data: 1') }) it('the function-style relivadate option receives the key and current data', async () => { let value = 0, mutate const key = createKey() function Page() { mutate = useSWRConfig().mutate const { data } = useSWR(key, () => value++) return
data: {data}
} renderWithConfig() screen.getByText('data:') // mount await screen.findByText('data: 0') act(() => { // value 0 -> 0 mutate(key, 100, { revalidate: (d, k) => k === key && d === 200 }) // revalidate = false }) await screen.findByText('data: 100') act(() => { // value 0 -> 1 mutate(key, 200, { revalidate: (d, k) => k === key && d === 200 }) // revalidate = true }) await screen.findByText('data: 200') await screen.findByText('data: 1') }) it('the function-style relivadate option works with mutate filter', async () => { const key1 = createKey() const key2 = createKey() const key3 = createKey() let mockData = { [key1]: 'page1', [key2]: 'page2', [key3]: 'page3' } function Page() { const mutate = useSWRConfig().mutate const { data: data1 } = useSWR(key1, () => mockData[key1]) const { data: data2 } = useSWR(key2, () => mockData[key2]) const { data: data3 } = useSWR(key3, () => mockData[key3]) return ( <>
data1: {data1}
data2: {data2}
data3: {data3}
) } renderWithConfig() // mount await screen.findByText('data1: page1') await screen.findByText('data2: page2') await screen.findByText('data3: page3') mockData = { [key1]: '', [key2]: '', [key3]: '' } fireEvent.click(screen.getByText('click')) await screen.findByText('data1: page1') await screen.findByText('data2: updated') await screen.findByText('data3: ') }) }) ================================================ FILE: test/use-swr-middlewares.test.tsx ================================================ import { screen } from '@testing-library/react' import { useState, useEffect, useRef, act } from 'react' import type { Middleware } from 'swr' import useSWR, { SWRConfig } from 'swr' import { withMiddleware } from 'swr/_internal' import { createResponse, sleep, createKey, nextTick, renderWithConfig } from './utils' describe('useSWR - middleware', () => { it('should use middleware', async () => { const key = createKey() const mockConsoleLog = jest.fn(s => s) const loggerMiddleware: Middleware = useSWRNext => (k, fn, config) => { mockConsoleLog(k) return useSWRNext(k, fn, config) } function Page() { const { data } = useSWR(key, () => createResponse('data'), { use: [loggerMiddleware] }) return
hello, {data}
} renderWithConfig() screen.getByText('hello,') await screen.findByText('hello, data') expect(mockConsoleLog.mock.calls[0][0]).toBe(key) // Initial render and data ready. expect(mockConsoleLog.mock.calls.length).toBe(2) }) it('should pass original keys to middleware', async () => { const key = createKey() const mockConsoleLog = jest.fn(s => s) const loggerMiddleware: Middleware = useSWRNext => (k, fn, config) => { mockConsoleLog(k) return useSWRNext(k, fn, config) } function Page() { const { data } = useSWR([key, 1, 2, 3], () => createResponse('data'), { use: [loggerMiddleware] }) return
hello, {data}
} renderWithConfig() screen.getByText('hello,') await screen.findByText('hello, data') expect(mockConsoleLog.mock.calls[0][0]).toEqual([key, 1, 2, 3]) // Initial render and data ready. expect(mockConsoleLog.mock.calls.length).toBe(2) }) it('should pass null fetcher to middleware', () => { const key = createKey() const mockConsoleLog = jest.fn(s => s) const loggerMiddleware: Middleware = useSWRNext => (k, fn, config) => { mockConsoleLog(fn) return useSWRNext(k, fn, config) } function Page() { const { data } = useSWR(key, null, { use: [loggerMiddleware] }) return
hello, {data}
} renderWithConfig() screen.getByText('hello,') expect(mockConsoleLog.mock.calls[0][0]).toEqual(null) }) it('should support `use` option in context', async () => { const key = createKey() const mockConsoleLog = jest.fn(s => s) const loggerMiddleware: Middleware = useSWRNext => (k, fn, config) => { mockConsoleLog(k) return useSWRNext(k, fn, config) } function Page() { const { data } = useSWR(key, () => createResponse('data')) return
hello, {data}
} renderWithConfig(, { use: [loggerMiddleware] }) screen.getByText('hello,') await screen.findByText('hello, data') expect(mockConsoleLog.mock.calls[0][0]).toBe(key) expect(mockConsoleLog.mock.calls.length).toBe(2) }) it('should support extending middleware via context and per-hook config', async () => { const key = createKey() const mockConsoleLog = jest.fn((_, s) => s) const createLoggerMiddleware = (id: number): Middleware => useSWRNext => (k, fn, config) => { mockConsoleLog(id, k) return useSWRNext(k, fn, config) } function Page() { const { data } = useSWR(key, () => createResponse('data'), { use: [createLoggerMiddleware(0)] }) return
hello, {data}
} renderWithConfig( ) screen.getByText('hello,') await screen.findByText('hello, data') expect(mockConsoleLog.mock.calls.map(call => call[0])).toEqual([ 2, 1, 0, 2, 1, 0 ]) }) it('should use the correct middleware order in `withMiddleware`', async () => { const key = createKey() const mockConsoleLog = jest.fn((_, s) => s) const createLoggerMiddleware = (id: number): Middleware => useSWRNext => (k, fn, config) => { mockConsoleLog(id + '-enter', k) const swr = useSWRNext(k, fn, config) mockConsoleLog(id + '-exit', k) return swr } const customSWRHook = withMiddleware(useSWR, useSWRNext => (...args) => { mockConsoleLog('0-enter', args[0]) const swr = useSWRNext(...args) mockConsoleLog('0-exit', args[0]) return swr }) function Page() { const { data } = customSWRHook(key, () => createResponse('data'), { use: [createLoggerMiddleware(1)] }) return
hello, {data}
} renderWithConfig(, { use: [createLoggerMiddleware(2)] }) screen.getByText('hello,') await screen.findByText('hello, data') expect(mockConsoleLog.mock.calls.map(call => call[0])).toEqual([ '2-enter', '1-enter', '0-enter', '0-exit', '1-exit', '2-exit', '2-enter', '1-enter', '0-enter', '0-exit', '1-exit', '2-exit' ]) }) it('should support react hooks inside middleware', async () => { const key = createKey() const lazyMiddleware: Middleware = useSWRNext => (k, fn, config) => { const dataRef = useRef(undefined) const res = useSWRNext(k, fn, config) if (res.data) { dataRef.current = res.data return res } else { return { ...res, data: dataRef.current } } } function Page() { const [mounted, setMounted] = useState(false) const { data } = useSWR(`${key}-${mounted ? '1' : '0'}`, k => createResponse(k, { delay: 100 }) ) useEffect(() => { setTimeout(() => setMounted(true), 200) }, []) return
data:{data}
} renderWithConfig(, { use: [lazyMiddleware] }) screen.getByText('data:') // undefined, time=0 await act(() => sleep(150)) screen.getByText(`data:${key}-0`) // 0, time=150 await act(() => sleep(100)) screen.getByText(`data:${key}-0`) // still holding the previous value, even if the key has changed await act(() => sleep(100)) screen.getByText(`data:${key}-1`) // 1, time=350 }) it('should pass modified keys to the next middleware and useSWR', async () => { const key = createKey() const createDecoratingKeyMiddleware = (c: string): Middleware => useSWRNext => (k, fn, config) => { return useSWRNext(`${c}${k}${c}`, fn, config) } function Page() { const { data } = useSWR(key, k => createResponse(k), { use: [ createDecoratingKeyMiddleware('!'), createDecoratingKeyMiddleware('#') ] }) return
hello, {data}
} renderWithConfig() screen.getByText('hello,') await screen.findByText(`hello, #!${key}!#`) }) it('should send the non-serialized key to the middleware', async () => { const key = createKey() const logger = jest.fn() const m: Middleware = useSWRNext => (k, fn, config) => { logger(Array.isArray(k)) return useSWRNext(JSON.stringify(k), _k => fn(...JSON.parse(_k)), config) } function Page() { const { data } = useSWR( [key, { hello: 'world' }], (_, o) => { return o.hello }, { use: [m] } ) return
hello, {data || ''}
} renderWithConfig() screen.getByText('hello,') await nextTick() expect(logger).toHaveBeenCalledWith(true) screen.getByText('hello, world') }) }) ================================================ FILE: test/use-swr-node-env.test.tsx ================================================ /** * @jest-environment node */ // Do not lint the return value destruction for `renderToString` /* eslint-disable testing-library/render-result-naming-convention */ import { renderToString } from 'react-dom/server' import useSWR from 'swr' import useSWRImmutable from 'swr/immutable' import { IS_SERVER } from 'swr/_internal' import { createKey } from './utils' describe('useSWR', () => { it('env IS_SERVER is true in node env', () => { expect(IS_SERVER).toBe(true) }) it('should render fallback if provided on server side', async () => { const key = createKey() const useData = () => useSWR(key, k => k, { fallbackData: 'fallback' }) function Page() { const { data } = useData() return

{data}

} const html = renderToString() expect(html).toContain('fallback') }) it('should not revalidate useSWRImmutable on server side', async () => { const key = createKey() const useData = () => useSWRImmutable(key, k => k) function Page() { const { data } = useData() return

{data || 'empty'}

} const html = renderToString() expect(html).toContain('empty') }) }) ================================================ FILE: test/use-swr-offline.test.tsx ================================================ import { screen } from '@testing-library/react' import { act } from 'react' import useSWR from 'swr' import { nextTick as waitForNextTick, focusOn, createKey, renderWithConfig } from './utils' const focusWindow = () => focusOn(window) const dispatchWindowEvent = event => act(async () => { window.dispatchEvent(new Event(event)) }) describe('useSWR - offline', () => { it('should not revalidate when offline', async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') // simulate offline await waitForNextTick() await dispatchWindowEvent('offline') // trigger focus revalidation await focusWindow() // should not be revalidated screen.getByText('data: 0') }) it('should revalidate immediately when becoming online', async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') // simulate online await waitForNextTick() await dispatchWindowEvent('online') // should be revalidated await screen.findByText('data: 1') }) }) ================================================ FILE: test/use-swr-preload.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import { Suspense, useEffect, useState, Profiler, act } from 'react' import useSWR, { preload, useSWRConfig } from 'swr' import { createKey, createResponse, itShouldSkipForReactCanary, renderWithGlobalCache, sleep } from './utils' describe('useSWR - preload', () => { it('preload the fetcher function', async () => { const key = createKey() const fetcher = jest.fn(() => createResponse('foo')) function Page() { const { data } = useSWR(key, fetcher) return
data:{data}
} preload(key, fetcher) expect(fetcher).toHaveBeenCalledTimes(1) renderWithGlobalCache() await screen.findByText('data:foo') expect(fetcher).toHaveBeenCalledTimes(1) }) it('should avoid preloading the resource multiple times', async () => { const key = createKey() const fetcher = jest.fn(() => createResponse('foo')) function Page() { const { data } = useSWR(key, fetcher) return
data:{data}
} preload(key, fetcher) preload(key, fetcher) preload(key, fetcher) expect(fetcher).toHaveBeenCalledTimes(1) renderWithGlobalCache() await screen.findByText('data:foo') expect(fetcher).toHaveBeenCalledTimes(1) }) it('should be able to prealod resources in effects', async () => { const key = createKey() const fetcher = jest.fn(() => createResponse('foo')) function Comp() { const { data } = useSWR(key, fetcher) return
data:{data}
} function Page() { const [show, setShow] = useState(false) useEffect(() => { preload(key, fetcher) }, []) return show ? ( ) : ( ) } renderWithGlobalCache() expect(fetcher).toHaveBeenCalledTimes(1) fireEvent.click(screen.getByText('click')) await screen.findByText('data:foo') expect(fetcher).toHaveBeenCalledTimes(1) }) itShouldSkipForReactCanary( 'preload the fetcher function with the suspense mode', async () => { const key = createKey() const fetcher = jest.fn(() => createResponse('foo')) const onRender = jest.fn() function Page() { const { data } = useSWR(key, fetcher, { suspense: true }) return
data:{data}
} preload(key, fetcher) expect(fetcher).toHaveBeenCalledTimes(1) renderWithGlobalCache( loading } > ) await screen.findByText('data:foo') expect(onRender).toHaveBeenCalledTimes(1) expect(fetcher).toHaveBeenCalledTimes(1) } ) itShouldSkipForReactCanary( 'avoid suspense waterfall by prefetching the resources', async () => { const key1 = createKey() const key2 = createKey() const response1 = createResponse('foo', { delay: 50 }) const response2 = createResponse('bar', { delay: 50 }) const fetcher1 = () => response1 const fetcher2 = () => response2 function Page() { const { data: data1 } = useSWR(key1, fetcher1, { suspense: true }) const { data: data2 } = useSWR(key2, fetcher2, { suspense: true }) return (
data:{data1}:{data2}
) } preload(key1, fetcher1) preload(key2, fetcher2) renderWithGlobalCache( ) screen.getByText('loading') // Should avoid waterfall(50ms + 50ms) await act(() => sleep(80)) screen.getByText('data:foo:bar') } ) it('reset the preload result when the preload function gets an error', async () => { const key = createKey() let count = 0 const fetcher = () => { ++count const res = count === 1 ? new Error('err') : 'foo' return createResponse(res) } let mutate function Page() { mutate = useSWRConfig().mutate const { data, error } = useSWR(key, fetcher) if (error) { return
error:{error.message}
} return
data:{data}
} try { // error await preload(key, fetcher) } catch (e) { // noop } renderWithGlobalCache() screen.getByText('data:') // use the preloaded result await screen.findByText('error:err') expect(count).toBe(1) // revalidate await act(() => mutate(key)) // should not use the preload data await screen.findByText('data:foo') }) it('dedupe requests during preloading', async () => { const key = createKey() const fetcher = jest.fn(() => createResponse('foo', { delay: 50 }) ) const onRender = jest.fn() function Page() { const { data } = useSWR(key, fetcher, { dedupingInterval: 0 }) return ( data:{data} ) } preload(key, fetcher) expect(fetcher).toHaveBeenCalledTimes(1) const { rerender } = renderWithGlobalCache() expect(onRender).toHaveBeenCalledTimes(1) // rerender when the preloading is in-flight, and the deduping interval is over await act(() => sleep(10)) rerender() expect(onRender).toHaveBeenCalledTimes(2) await screen.findByText('data:foo') expect(fetcher).toHaveBeenCalledTimes(1) expect(onRender).toHaveBeenCalledTimes(3) }) it('should pass serialize key to fetcher', async () => { const key = createKey() let calledWith: string const fetcher = (args: string) => { calledWith = args } preload(() => key, fetcher) expect(calledWith).toBe(key) }) }) ================================================ FILE: test/use-swr-promise.test.tsx ================================================ import { screen } from '@testing-library/react' import useSWR, { SWRConfig } from 'swr' import { createKey, createResponse, itShouldSkipForReactCanary, renderWithConfig, sleep } from './utils' import { Suspense, act } from 'react' import { ErrorBoundary } from 'react-error-boundary' describe('useSWR - promise', () => { itShouldSkipForReactCanary( 'should allow passing promises as fallback', async () => { const key = createKey() const firstRender = [false, undefined] as [boolean, string | undefined] function Page() { const { data } = useSWR(key, () => { return createResponse('new data', { delay: 100 }) }) if (!firstRender[0]) { firstRender[0] = true firstRender[1] = data } return
data:{data}
} const fetchData = createResponse('initial data', { delay: 100 }) renderWithConfig( ) await screen.findByText('data:initial data') await act(() => sleep(100)) // wait 100ms until the request inside finishes await screen.findByText('data:new data') expect(firstRender[1]).toEqual('initial data') } ) itShouldSkipForReactCanary( 'should allow passing promises as fallbackData', async () => { const key = createKey() const fetchData = createResponse('initial data', { delay: 100 }) const firstRender = [false, undefined] as [boolean, string | undefined] function Page() { const { data } = useSWR( key, () => { return createResponse('new data', { delay: 100 }) }, { fallbackData: fetchData } ) if (!firstRender[0]) { firstRender[0] = true firstRender[1] = data } return
data:{data}
} renderWithConfig() await screen.findByText('data:initial data') await act(() => sleep(100)) // wait 100ms until the request inside finishes await screen.findByText('data:new data') expect(firstRender[1]).toEqual('initial data') } ) itShouldSkipForReactCanary( 'should suspend when resolving the fallback promise', async () => { const key = createKey() const firstRender = [false, undefined] as [boolean, string | undefined] function Page() { const { data } = useSWR(key, () => { return createResponse('new data', { delay: 100 }) }) if (!firstRender[0]) { firstRender[0] = true firstRender[1] = data } return
data:{data}
} const fetchData = createResponse('initial data', { delay: 100 }) renderWithConfig( loading
}> ) await screen.findByText('loading') await screen.findByText('data:initial data') await act(() => sleep(100)) // wait 100ms until the request inside finishes await screen.findByText('data:new data') expect(firstRender[1]).toEqual('initial data') } ) itShouldSkipForReactCanary( 'should handle errors with fallback promises', async () => { jest.spyOn(console, 'error').mockImplementation(() => {}) const key = createKey() function Page() { const { data } = useSWR(key) return
data:{data}
} const fetchDataError = createResponse(new Error('error'), { delay: 100 }) renderWithConfig( error boundary}> loading}> ) await screen.findByText('loading') await act(() => sleep(100)) // wait 100ms until the request inside throws await screen.findByText('error boundary') } ) itShouldSkipForReactCanary( 'should handle same fallback promise that is already pending', async () => { const key = createKey() function Comp() { const { data } = useSWR(key) return <>data:{data}, } const fetchDataError = createResponse('value', { delay: 100 }) renderWithConfig( loading}> ) await screen.findByText('loading') await act(() => sleep(100)) // wait 100ms until the request inside resolves await screen.findByText('data:value,data:value,') } ) }) ================================================ FILE: test/use-swr-reconnect.test.tsx ================================================ import { screen, fireEvent, createEvent } from '@testing-library/react' import useSWR from 'swr' import { nextTick as waitForNextTick, renderWithConfig, createKey, mockVisibilityHidden } from './utils' describe('useSWR - reconnect', () => { it('should revalidate on reconnect by default', async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0 }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await waitForNextTick() // trigger reconnect fireEvent(window, createEvent('offline', window)) fireEvent(window, createEvent('online', window)) await screen.findByText('data: 1') }) it("shouldn't revalidate on reconnect when revalidateOnReconnect is false", async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0, revalidateOnReconnect: false }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await waitForNextTick() // trigger reconnect fireEvent(window, createEvent('offline', window)) fireEvent(window, createEvent('online', window)) // should not be revalidated screen.getByText('data: 0') }) it("shouldn't revalidate on reconnect when isOnline is returning false", async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0, isOnline: () => false }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await waitForNextTick() // trigger reconnect fireEvent(window, createEvent('offline', window)) fireEvent(window, createEvent('online', window)) // should not be revalidated screen.getByText('data: 0') }) it("shouldn't revalidate on reconnect if invisible", async () => { let value = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => value++, { dedupingInterval: 0, isOnline: () => false }) return
data: {data}
} renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') await waitForNextTick() const resetVisibility = mockVisibilityHidden() // trigger reconnect fireEvent(window, createEvent('offline', window)) fireEvent(window, createEvent('online', window)) // should not be revalidated screen.getByText('data: 0') resetVisibility() }) }) ================================================ FILE: test/use-swr-refresh.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import React, { useState, act } from 'react' import useSWR, { SWRConfig, useSWRConfig } from 'swr' import { createKey, renderWithConfig, sleep } from './utils' // This has to be an async function to wait for a microtask to flush updates const advanceTimers = async (ms: number) => jest.advanceTimersByTime(ms) as any // This test heavily depends on setInterval/setTimeout timers, which makes tests slower and flaky. // So we use Jest's fake timers describe('useSWR - refresh', () => { beforeAll(() => { jest.useFakeTimers() }) afterAll(() => { jest.useRealTimers() }) it('should rerender automatically on interval', async () => { let count = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => count++, { refreshInterval: 200, dedupingInterval: 100 }) return
count: {data}
} renderWithConfig() // hydration screen.getByText('count:') // mount await screen.findByText('count: 0') await act(() => advanceTimers(200)) // update screen.getByText('count: 1') await act(() => advanceTimers(50)) // no update screen.getByText('count: 1') await act(() => advanceTimers(150)) // update screen.getByText('count: 2') }) it('should dedupe requests combined with intervals', async () => { let count = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => count++, { refreshInterval: 100, dedupingInterval: 500 }) return
count: {data}
} renderWithConfig() // hydration screen.getByText('count:') // mount await screen.findByText('count: 0') await act(() => advanceTimers(100)) // no update (deduped) screen.getByText('count: 0') await act(() => advanceTimers(400)) // reach dudupingInterval await act(() => advanceTimers(100)) // update screen.getByText('count: 1') await act(() => advanceTimers(100)) // no update (deduped) screen.getByText('count: 1') await act(() => advanceTimers(400)) // reach dudupingInterval await act(() => advanceTimers(100)) // update screen.getByText('count: 2') }) it('should update data upon interval changes', async () => { let count = 0 const key = createKey() function Page() { const [int, setInt] = React.useState(200) const { data } = useSWR(key, () => count++, { refreshInterval: int, dedupingInterval: 50 }) return (
setInt(num => (num < 300 ? num + 50 : 0))}> count: {data}
) } renderWithConfig() screen.getByText('count:') // mount await screen.findByText('count: 0') await act(() => advanceTimers(200)) screen.getByText('count: 1') await act(() => advanceTimers(50)) screen.getByText('count: 1') await act(() => advanceTimers(200)) screen.getByText('count: 2') fireEvent.click(screen.getByText('count: 2')) await act(() => advanceTimers(50)) screen.getByText('count: 2') await act(() => advanceTimers(200)) screen.getByText('count: 3') await act(() => advanceTimers(250)) screen.getByText('count: 4') fireEvent.click(screen.getByText('count: 4')) await act(() => { // it will clear the 250ms timer and set up a new 300ms timer return advanceTimers(150) }) screen.getByText('count: 4') await act(() => advanceTimers(150)) screen.getByText('count: 5') fireEvent.click(screen.getByText('count: 5')) await act(() => { // it will clear the 200ms timer and stop return advanceTimers(50) }) screen.getByText('count: 5') await act(() => advanceTimers(300)) screen.getByText('count: 5') }) it('should update data upon interval changes -- changes happened during revalidate', async () => { let count = 0 const STOP_POLLING_THRESHOLD = 2 const key = createKey() function Page() { const [flag, setFlag] = useState(0) const shouldPoll = flag < STOP_POLLING_THRESHOLD const { data } = useSWR(key, () => count++, { refreshInterval: shouldPoll ? 200 : 0, dedupingInterval: 50, onSuccess() { setFlag(value => value + 1) } }) return (
setFlag(0)}> count: {data} {flag}
) } renderWithConfig() screen.getByText('count: 0') await screen.findByText('count: 0 1') await act(() => advanceTimers(200)) screen.getByText('count: 1 2') await act(() => advanceTimers(200)) screen.getByText('count: 1 2') await act(() => advanceTimers(200)) screen.getByText('count: 1 2') await act(() => advanceTimers(100)) screen.getByText('count: 1 2') fireEvent.click(screen.getByText('count: 1 2')) await act(() => { // it will set up a new 200ms timer return advanceTimers(50) }) screen.getByText('count: 1 0') await act(() => advanceTimers(150)) screen.getByText('count: 2 1') await act(() => advanceTimers(200)) screen.getByText('count: 3 2') await act(() => advanceTimers(200)) screen.getByText('count: 3 2') await act(() => advanceTimers(200)) screen.getByText('count: 3 2') }) it('should allow use custom compare method', async () => { let count = 0 const key = createKey() const fetcher = jest.fn(() => ({ timestamp: ++count, version: '1.0' })) function Page() { const { data, mutate: change } = useSWR(key, fetcher, { compare: function compare(a, b) { if (a === b) { return true } if (!a || !b) { return false } return a.version === b.version } }) if (!data) { return
loading
} return } let customCache function App() { return ( { return (customCache = new Map()) } }} > ) } renderWithConfig() screen.getByText('loading') await screen.findByText('1') expect(fetcher).toHaveBeenCalledTimes(1) expect(fetcher).toHaveReturnedWith({ timestamp: 1, version: '1.0' }) fireEvent.click(screen.getByText('1')) await act(() => advanceTimers(1)) expect(fetcher).toHaveBeenCalledTimes(2) expect(fetcher).toHaveReturnedWith({ timestamp: 2, version: '1.0' }) const cachedData = customCache.get(key)?.data expect(cachedData.timestamp.toString()).toEqual('1') screen.getByText('1') }) it('custom compare should only be used for comparing data', async () => { let count = 0 const key = createKey() const compareParams = [] const fetcher = jest.fn(() => ({ timestamp: ++count, version: '1.0' })) function Page() { const config = useSWRConfig() const { data, mutate: change } = useSWR(key, fetcher, { compare: function (a, b) { compareParams.push([a, b]) return config.compare(a, b) }, dedupingInterval: 0 }) if (!data) { return
loading
} return ( <>
{data.timestamp}
) } renderWithConfig() await screen.findByText('1') expect(compareParams).toMatchInlineSnapshot(` [ [ undefined, undefined, ], [ undefined, { "timestamp": 1, "version": "1.0", }, ], [ undefined, { "timestamp": 1, "version": "1.0", }, ], [ undefined, { "timestamp": 1, "version": "1.0", }, ], [ { "timestamp": 1, "version": "1.0", }, undefined, ], [ { "timestamp": 1, "version": "1.0", }, { "timestamp": 1, "version": "1.0", }, ], [ { "timestamp": 1, "version": "1.0", }, { "timestamp": 1, "version": "1.0", }, ], [ { "timestamp": 1, "version": "1.0", }, { "timestamp": 1, "version": "1.0", }, ], ] `) fireEvent.click(screen.getByText('change')) await screen.findByText('2') expect(compareParams).toMatchInlineSnapshot(` [ [ undefined, undefined, ], [ undefined, { "timestamp": 1, "version": "1.0", }, ], [ undefined, { "timestamp": 1, "version": "1.0", }, ], [ undefined, { "timestamp": 1, "version": "1.0", }, ], [ { "timestamp": 1, "version": "1.0", }, undefined, ], [ { "timestamp": 1, "version": "1.0", }, { "timestamp": 1, "version": "1.0", }, ], [ { "timestamp": 1, "version": "1.0", }, { "timestamp": 1, "version": "1.0", }, ], [ { "timestamp": 1, "version": "1.0", }, { "timestamp": 1, "version": "1.0", }, ], [ { "timestamp": 1, "version": "1.0", }, { "timestamp": 1, "version": "1.0", }, ], [ { "timestamp": 1, "version": "1.0", }, { "timestamp": 2, "version": "1.0", }, ], [ { "timestamp": 1, "version": "1.0", }, { "timestamp": 2, "version": "1.0", }, ], [ { "timestamp": 2, "version": "1.0", }, { "timestamp": 1, "version": "1.0", }, ], [ { "timestamp": 2, "version": "1.0", }, { "timestamp": 2, "version": "1.0", }, ], [ { "timestamp": 2, "version": "1.0", }, { "timestamp": 2, "version": "1.0", }, ], [ { "timestamp": 2, "version": "1.0", }, { "timestamp": 2, "version": "1.0", }, ], ] `) }) it('should not let the previous interval timer to set new timer if key changes too fast', async () => { const key = createKey() const fetcherWithToken = jest.fn(async token => { await sleep(200) return token }) function Page() { const [count, setCount] = useState(0) const { data } = useSWR(`${key}-${count}`, fetcherWithToken, { refreshInterval: 100, dedupingInterval: 50 }) return ( ) } renderWithConfig() // initial revalidate await act(() => advanceTimers(200)) expect(fetcherWithToken).toHaveBeenCalledTimes(1) // first refresh await act(() => advanceTimers(100)) expect(fetcherWithToken).toHaveBeenCalledTimes(2) expect(fetcherWithToken).toHaveBeenLastCalledWith(`${key}-0`) await act(() => advanceTimers(200)) // second refresh start await act(() => advanceTimers(100)) expect(fetcherWithToken).toHaveBeenCalledTimes(3) expect(fetcherWithToken).toHaveBeenLastCalledWith(`${key}-0`) // change the key during revalidation // The second refresh will not start a new timer fireEvent.click(screen.getByText(`click me ${key}-0`)) // first, refresh with new key 1 await act(() => advanceTimers(100)) expect(fetcherWithToken).toHaveBeenCalledTimes(4) expect(fetcherWithToken).toHaveBeenLastCalledWith(`${key}-1`) await act(() => advanceTimers(200)) // second refresh with new key 1 await act(() => advanceTimers(100)) expect(fetcherWithToken).toHaveBeenCalledTimes(5) expect(fetcherWithToken).toHaveBeenLastCalledWith(`${key}-1`) }) it('should not call onSuccess from the previous interval if key has changed', async () => { const fetcherWithToken = jest.fn(async token => { await sleep(100) return token }) const onSuccess = jest.fn((data, key) => { return `${data} ${key}` }) const key = createKey() function Page() { const [count, setCount] = useState(0) const { data } = useSWR(`${count.toString()}-${key}`, fetcherWithToken, { refreshInterval: 50, dedupingInterval: 25, onSuccess }) return ( ) } renderWithConfig() // initial revalidate await act(() => advanceTimers(100)) expect(fetcherWithToken).toHaveBeenCalledTimes(1) expect(onSuccess).toHaveBeenCalledTimes(1) expect(onSuccess).toHaveLastReturnedWith(`0-${key} 0-${key}`) // first refresh await act(() => advanceTimers(50)) expect(fetcherWithToken).toHaveBeenCalledTimes(2) expect(fetcherWithToken).toHaveBeenLastCalledWith(`0-${key}`) await act(() => advanceTimers(100)) expect(onSuccess).toHaveBeenCalledTimes(2) expect(onSuccess).toHaveLastReturnedWith(`0-${key} 0-${key}`) // second refresh start await act(() => advanceTimers(50)) expect(fetcherWithToken).toHaveBeenCalledTimes(3) expect(fetcherWithToken).toHaveBeenLastCalledWith(`0-${key}`) // change the key during revalidation // The second refresh will not start a new timer fireEvent.click(screen.getByText(`click me 0-${key}`)) // first, refresh with new key 1 await act(() => advanceTimers(50)) expect(fetcherWithToken).toHaveBeenCalledTimes(4) expect(fetcherWithToken).toHaveBeenLastCalledWith(`1-${key}`) await act(() => advanceTimers(100)) expect(onSuccess).toHaveBeenCalledTimes(3) expect(onSuccess).toHaveLastReturnedWith(`1-${key} 1-${key}`) // second refresh with new key 1 await act(() => advanceTimers(50)) expect(fetcherWithToken).toHaveBeenCalledTimes(5) expect(fetcherWithToken).toHaveBeenLastCalledWith(`1-${key}`) }) it('should allow using function as an interval', async () => { let count = 0 const key = createKey() function Page() { const { data } = useSWR(key, () => count++, { refreshInterval: () => 200, dedupingInterval: 100 }) return
count: {data}
} renderWithConfig() // hydration screen.getByText('count:') // mount await screen.findByText('count: 0') await act(() => advanceTimers(200)) // update screen.getByText('count: 1') await act(() => advanceTimers(50)) // no update screen.getByText('count: 1') await act(() => advanceTimers(150)) // update screen.getByText('count: 2') }) it('should pass updated data to refreshInterval', async () => { let count = 1 const key = createKey() function Page() { const { data } = useSWR(key, () => count++, { refreshInterval: updatedCount => updatedCount * 1000, dedupingInterval: 100 }) return
count: {data}
} renderWithConfig() // hydration screen.getByText('count:') // mount await screen.findByText('count: 1') await act(() => advanceTimers(1000)) // updated after 1s screen.getByText('count: 2') await act(() => advanceTimers(1000)) // no update screen.getByText('count: 2') await act(() => advanceTimers(1000)) // updated after 2s screen.getByText('count: 3') await act(() => advanceTimers(2000)) // no update screen.getByText('count: 3') await act(() => advanceTimers(1000)) // updated after 3s screen.getByText('count: 4') }) it('should pass updated data to refreshInterval, when refreshInterval is constant function', async () => { let count = 1 // constant function const refreshInterval = jest.fn(updatedCount => { return updatedCount > 5 ? 0 : 1000 }) const key = createKey() function Page() { // constant function // const refreshInterval = useCallback((updatedCount) => { // return updatedCount > 5 ? 0 : 1000 // }, []) const { data } = useSWR(key, () => count++, { refreshInterval, dedupingInterval: 100 }) return
count: {data}
} renderWithConfig() // hydration screen.getByText('count:') // mount await screen.findByText('count: 1') await act(() => advanceTimers(1000)) screen.getByText('count: 2') expect(refreshInterval).toHaveBeenLastCalledWith(2) await act(() => advanceTimers(1000)) screen.getByText('count: 3') expect(refreshInterval).toHaveBeenLastCalledWith(3) await act(() => advanceTimers(1000)) screen.getByText('count: 4') expect(refreshInterval).toHaveBeenLastCalledWith(4) }) it('should disable refresh if function returns 0', async () => { let count = 1 const key = createKey() function Page() { const { data } = useSWR(key, () => count++, { refreshInterval: () => 0, dedupingInterval: 100 }) return
count: {data}
} renderWithConfig() // hydration screen.getByText('count:') // mount await screen.findByText('count: 1') await act(() => advanceTimers(9999)) // no update screen.getByText('count: 1') }) }) ================================================ FILE: test/use-swr-remote-mutation.test.tsx ================================================ import { fireEvent, render, screen } from '@testing-library/react' import React, { useState, act } from 'react' import useSWR from 'swr' import useSWRMutation from 'swr/mutation' import { createKey, sleep, nextTick, createResponse } from './utils' const waitForNextTick = () => act(() => sleep(1)) describe('useSWR - remote mutation', () => { it('should return data after triggering', async () => { const key = createKey() function Page() { const { data, trigger } = useSWRMutation(key, () => 'data') return } render() // mount await screen.findByText('pending') fireEvent.click(screen.getByText('pending')) await waitForNextTick() screen.getByText('data') }) it('should return data from `trigger`', async () => { const key = createKey() function Page() { const [data, setData] = React.useState(null) const { trigger } = useSWRMutation(key, () => 'data') return ( ) } render() // mount await screen.findByText('pending') fireEvent.click(screen.getByText('pending')) await waitForNextTick() screen.getByText('data') }) it('should trigger request with the correct argument signature', async () => { const key = createKey() const fetcher = jest.fn((_, __: { arg: string }) => 'data') function Page() { const { data, trigger } = useSWRMutation([key, 'arg0'], fetcher) return ( ) } render() // mount await screen.findByText('pending') expect(fetcher).not.toHaveBeenCalled() fireEvent.click(screen.getByText('pending')) await waitForNextTick() screen.getByText('data') expect(fetcher).toHaveBeenCalled() expect(fetcher.mock.calls.length).toBe(1) expect(fetcher.mock.calls[0]).toEqual([[key, 'arg0'], { arg: 'arg1' }]) }) it('should call `onSuccess` event', async () => { const key = createKey() const onSuccess = jest.fn() function Page() { const { data, trigger } = useSWRMutation(key, () => 'data', { onSuccess }) return } render() // mount await screen.findByText('pending') fireEvent.click(screen.getByText('pending')) await waitForNextTick() screen.getByText('data') expect(onSuccess).toHaveBeenCalled() }) it('should support configuring `onSuccess` with trigger', async () => { const key = createKey() const onSuccess = jest.fn() function Page() { const { data, trigger } = useSWRMutation(key, () => 'data') return ( ) } render() // mount await screen.findByText('pending') fireEvent.click(screen.getByText('pending')) await waitForNextTick() screen.getByText('data') expect(onSuccess).toHaveBeenCalled() }) it('should call `onError` event and throw', async () => { const key = createKey() const onError = jest.fn() const onInplaceError = jest.fn() function Page() { const { data, error, trigger } = useSWRMutation( key, async () => { await sleep(10) throw new Error('error!') }, { onError } ) return ( ) } render() // mount await screen.findByText('pending') fireEvent.click(screen.getByText('pending')) await screen.findByText('error!') expect(onError).toHaveBeenCalled() expect(onInplaceError).toHaveBeenCalled() }) it('should call `onError` event and skip throwing the error when `throwOnError` is disabled', async () => { const key = createKey() const onError = jest.fn() const onInplaceError = jest.fn() function Page() { const { data, error, trigger } = useSWRMutation( key, async () => { await sleep(10) throw new Error('error!') }, { onError, throwOnError: false } ) return ( ) } render() // mount await screen.findByText('pending') fireEvent.click(screen.getByText('pending')) await screen.findByText('error!') expect(onError).toHaveBeenCalled() expect(onInplaceError).not.toHaveBeenCalled() }) it('should return `isMutating` state correctly', async () => { const key = createKey() function Page() { const { data, trigger, isMutating } = useSWRMutation(key, async () => { await sleep(10) return 'data' }) return ( ) } render() // mount await screen.findByText('state:') fireEvent.click(screen.getByText('state:')) await screen.findByText('state:pending') await screen.findByText('state:data') }) it('should send `onError` and `onSuccess` events', async () => { const key = createKey() const onSuccess = jest.fn() const onError = jest.fn() let arg = false function Page() { const { data, error, trigger } = useSWRMutation( key, async (_, { arg: shouldReturnValue }: { arg: boolean }) => { await sleep(10) if (shouldReturnValue) return 'data' throw new Error('error') }, { onSuccess, onError } ) return ( ) } render() // mount await screen.findByText('pending') fireEvent.click(screen.getByText('pending')) await screen.findByText('error') expect(onError).toHaveBeenCalled() expect(onSuccess).not.toHaveBeenCalled() arg = true fireEvent.click(screen.getByText('error')) await screen.findByText('data') expect(onSuccess).toHaveBeenCalled() }) it('should not dedupe trigger requests', async () => { const key = createKey() const fn = jest.fn() function Page() { const { trigger } = useSWRMutation(key, async () => { fn() await sleep(10) return 'data' }) return } render() // mount await screen.findByText('trigger') expect(fn).not.toHaveBeenCalled() fireEvent.click(screen.getByText('trigger')) expect(fn).toHaveBeenCalledTimes(1) fireEvent.click(screen.getByText('trigger')) fireEvent.click(screen.getByText('trigger')) fireEvent.click(screen.getByText('trigger')) expect(fn).toHaveBeenCalledTimes(4) }) it('should share the cache with `useSWR` when `populateCache` is enabled', async () => { const key = createKey() function Page() { const { data } = useSWR(key) const { trigger } = useSWRMutation(key, async () => { await sleep(10) return 'data' }) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:none') fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:data') }) it('should not read the cache from `useSWR`', async () => { const key = createKey() function Page() { useSWR(key, () => 'data') const { data } = useSWRMutation(key, () => 'wrong!') return
data:{data || 'none'}
} render() // mount await screen.findByText('data:none') }) it('should be able to populate the cache for `useSWR`', async () => { const key = createKey() function Page() { const { data } = useSWR(key, () => 'data') const { trigger } = useSWRMutation( key, (_, { arg }: { arg: string }) => arg ) return (
trigger('updated!', { populateCache: true })}> data:{data || 'none'}
) } render() await screen.findByText('data:none') // mount await screen.findByText('data:data') // mutate fireEvent.click(screen.getByText('data:data')) await screen.findByText('data:updated!') }) it('should be able to populate the cache with a transformer', async () => { const key = createKey() function Page() { const { data } = useSWR(key, () => 'data') const { trigger } = useSWRMutation( key, (_, { arg }: { arg: string }) => arg ) return (
trigger('updated!', { populateCache: (v, current) => v + ':' + current }) } > data:{data || 'none'}
) } render() await screen.findByText('data:none') // mount await screen.findByText('data:data') // mutate fireEvent.click(screen.getByText('data:data')) await screen.findByText('data:updated!:data') }) it('should not trigger request when mutating from shared hooks', async () => { const key = createKey() const fn = jest.fn(() => 'data') function Page() { useSWRMutation(key, fn) const { mutate } = useSWR(key) return (
) } render() // mount await screen.findByText('mutate') fireEvent.click(screen.getByText('mutate')) await act(() => sleep(50)) expect(fn).not.toHaveBeenCalled() }) it('should not trigger request when key changes', async () => { const key = createKey() const fn = jest.fn(() => 'data') function Page() { const [k, setK] = React.useState(key) useSWRMutation(k, fn) return (
) } render() // mount await screen.findByText('update key') fireEvent.click(screen.getByText('update key')) await act(() => sleep(50)) expect(fn).not.toHaveBeenCalled() }) it('should prevent race conditions with `useSWR`', async () => { const key = createKey() const logger = jest.fn() function Page() { const { data } = useSWR(key, async () => { await sleep(10) return 'foo' }) const { trigger } = useSWRMutation(key, async () => { await sleep(20) return 'bar' }) logger(data) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:none') fireEvent.click(screen.getByText('trigger')) await act(() => sleep(50)) await screen.findByText('data:bar') // It should never render `foo`. expect(logger).not.toHaveBeenCalledWith('foo') }) it('should revalidate after mutating by default', async () => { const key = createKey() const logger = jest.fn() function Page() { const { data } = useSWR( key, async () => { await sleep(10) return 'foo' }, { revalidateOnMount: false } ) const { trigger } = useSWRMutation(key, async () => { await sleep(20) return 'bar' }) logger(data) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:none') fireEvent.click(screen.getByText('trigger')) await act(() => sleep(50)) // It triggers revalidation await screen.findByText('data:foo') // It should never render `bar` since we never populate the cache. expect(logger).not.toHaveBeenCalledWith('bar') }) it('should revalidate the SWR request that starts during the mutation', async () => { const key = createKey() function Page() { const [triggered, setTriggered] = React.useState(false) const { data } = useSWR( triggered ? key : null, async () => { await sleep(10) return 'foo' }, { revalidateOnMount: false } ) const { trigger } = useSWRMutation(key, async () => { await sleep(20) return 'bar' }) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:none') fireEvent.click(screen.getByText('trigger')) await act(() => sleep(50)) // The SWR request that starts during the mutation should be revalidated. await screen.findByText('data:foo') }) it('should revalidate after populating the cache', async () => { const key = createKey() const logger = jest.fn() function Page() { const { data } = useSWR( key, async () => { await sleep(20) return 'foo' }, { revalidateOnMount: false } ) const { trigger } = useSWRMutation(key, async () => { await sleep(20) return 'bar' }) logger(data) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:none') fireEvent.click(screen.getByText('trigger')) // Cache is updated await screen.findByText('data:bar') // A revalidation is triggered await screen.findByText('data:foo') }) it('should be able to turn off auto revalidation', async () => { const key = createKey() const logger = jest.fn() function Page() { const { data } = useSWR( key, async () => { await sleep(10) return 'foo' }, { revalidateOnMount: false } ) const { trigger } = useSWRMutation( key, async () => { await sleep(20) return 'bar' }, { revalidate: false, populateCache: true } ) logger(data) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:none') fireEvent.click(screen.getByText('trigger')) await act(() => sleep(50)) // It should not trigger revalidation await screen.findByText('data:bar') // It should never render `foo`. expect(logger).not.toHaveBeenCalledWith('foo') }) it('should be able to configure auto revalidation from trigger', async () => { const key = createKey() const logger = jest.fn() function Page() { const { data } = useSWR( key, async () => { await sleep(10) return 'foo' }, { revalidateOnMount: false } ) const { trigger } = useSWRMutation( key, async () => { await sleep(20) return 'bar' }, { populateCache: true } ) logger(data) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:none') fireEvent.click(screen.getByText('trigger1')) await act(() => sleep(50)) // It should not trigger revalidation await screen.findByText('data:bar') // It should never render `foo`. expect(logger).not.toHaveBeenCalledWith('foo') fireEvent.click(screen.getByText('trigger2')) await act(() => sleep(50)) // It should trigger revalidation await screen.findByText('data:foo') }) it('should be able to reset the state', async () => { const key = createKey() function Page() { const { data, trigger, reset } = useSWRMutation(key, async () => { return 'data' }) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:none') fireEvent.click(screen.getByText('trigger')) // Cache is updated await screen.findByText('data:data') // reset fireEvent.click(screen.getByText('reset')) await screen.findByText('data:none') }) it('should prevent race condition if reset the state', async () => { const key = createKey() const onSuccess = jest.fn() function Page() { const { data, trigger, reset } = useSWRMutation(key, async () => { await sleep(10) return 'data' }) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:none') // start mutation fireEvent.click(screen.getByText('trigger')) // reset, before it ends fireEvent.click(screen.getByText('reset')) await act(() => sleep(30)) await screen.findByText('data:none') }) it('should prevent race condition if triggered multiple times', async () => { const key = createKey() const logger = [] let id = 0 function Page() { const { data, trigger } = useSWRMutation(key, async () => { await sleep(10) return id++ }) logger.push(data) return } render() // Mount await screen.findByText('trigger') // Start mutation multiple times, to break the previous one fireEvent.click(screen.getByText('trigger')) // 0 await act(() => sleep(5)) fireEvent.click(screen.getByText('trigger')) // 1 await act(() => sleep(5)) fireEvent.click(screen.getByText('trigger')) // 2 await act(() => sleep(20)) // Shouldn't have intermediate states expect(logger).toEqual([undefined, 2]) }) it('should error if no mutator is given', async () => { const key = createKey() const catchError = jest.fn() function Page() { const { trigger } = useSWRMutation(key, null) return (
) } render() fireEvent.click(screen.getByText('trigger')) await nextTick() expect(catchError).toHaveBeenCalled() }) it('should support optimistic updates', async () => { const key = createKey() function Page() { const { data } = useSWR(key, async () => { await sleep(10) return ['foo'] }) const { trigger } = useSWRMutation( key, async (_, { arg }: { arg: string }) => { await sleep(20) return arg.toUpperCase() } ) return (
data:{JSON.stringify(data)}
) } render() // mount await screen.findByText('data:["foo"]') // optimistic update fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:["foo","bar"]') await act(() => sleep(50)) await screen.findByText('data:["foo","BAR"]') // 2nd check fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:["foo","BAR","bar"]') await act(() => sleep(50)) await screen.findByText('data:["foo","BAR","BAR"]') }) it('should clear error after successful trigger', async () => { const key = createKey() let arg = false function Page() { const { error, trigger } = useSWRMutation( key, async (_, { arg: shouldReturnValue }: { arg: boolean }) => { await sleep(10) if (shouldReturnValue) return ['foo'] throw new Error('error') } ) return (
Error: {error ? error.message : 'none'}
) } render() fireEvent.click(screen.getByText('trigger')) await screen.findByText('Error: error') arg = true fireEvent.click(screen.getByText('trigger')) await screen.findByText('Error: none') }) it('should always use the latest fetcher', async () => { const key = createKey() function Page() { const [count, setCount] = useState(0) const { data, trigger } = useSWRMutation(key, () => count) return (
data:{data},count:{count}
) } render() await screen.findByText('data:,count:0') fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:0,count:0') fireEvent.click(screen.getByText('++')) await screen.findByText('data:0,count:1') fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:1,count:1') }) it('should always use the latest config', async () => { const key = createKey() const logs = [] function Page() { const [count, setCount] = useState(0) const { data, trigger } = useSWRMutation(key, async () => count, { onSuccess() { logs.push(count) } }) return (
data:{data},count:{count}
) } render() await screen.findByText('data:,count:0') expect(logs).toEqual([]) fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:0,count:0') expect(logs).toEqual([0]) fireEvent.click(screen.getByText('++')) await screen.findByText('data:0,count:1') expect(logs).toEqual([0]) fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:1,count:1') expect(logs).toEqual([0, 1]) }) it('should support revalidate as a function', async () => { const key = createKey() let value = 0 function Page() { const { data } = useSWR(key, () => createResponse(++value)) const { trigger } = useSWRMutation(key, () => { value += 10 return createResponse(value) }) return (
data:{data || 'none'}
) } render() // mount await screen.findByText('data:1') fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:12') fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:23') fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:33') // stop revalidation because value > 30 fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:43') fireEvent.click(screen.getByText('trigger')) await screen.findByText('data:53') }) it('should error when triggering an empty key', async () => { let error = null function Page() { const { trigger } = useSWRMutation(null, () => {}) return ( ) } render() // mount await screen.findByText('pending') fireEvent.click(screen.getByText('pending')) await waitForNextTick() expect(error.message).toBe('Can’t trigger the mutation: missing key.') }) it('should call `onError` and `onRejected` but do not call `onSuccess` if value an error is cast to false', async () => { const key = createKey() const onSuccess = jest.fn() const onError = jest.fn() const onRejected = jest.fn() const fetcher = () => { return new Promise((_, reject) => reject('')) } function Page() { const { trigger } = useSWRMutation(key, fetcher, { onError, onSuccess }) return ( ) } render() await screen.findByText('trigger') fireEvent.click(screen.getByText('trigger')) await nextTick() expect(onSuccess).not.toHaveBeenCalled() expect(onError).toHaveBeenCalled() expect(onRejected).toHaveBeenCalled() }) }) ================================================ FILE: test/use-swr-revalidate.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import { useState, act } from 'react' import useSWR, { useSWRConfig } from 'swr' import { createResponse, sleep, nextTick as waitForNextTick, createKey, renderWithConfig, nextTick } from './utils' describe('useSWR - revalidate', () => { it('should rerender after triggering revalidation', async () => { let value = 0 const key = createKey() function Page() { const { data, mutate } = useSWR(key, () => value++) return } renderWithConfig() // hydration screen.getByText('data:') // mount await screen.findByText('data: 0') fireEvent.click(screen.getByText('data: 0')) await waitForNextTick() screen.getByText('data: 1') }) it('should revalidate all the hooks with the same key', async () => { let value = 0 const key = createKey() function Page() { const { data: v1, mutate } = useSWR(key, () => value++) const { data: v2 } = useSWR(key, () => value++) return ( ) } renderWithConfig() // hydration screen.getByText(',') // mount await screen.findByText('0, 0') fireEvent.click(screen.getByText('0, 0')) await waitForNextTick() screen.getByText('1, 1') }) it('should respect sequences of revalidation calls (cope with race condition)', async () => { let faster = false const key = createKey() function Page() { const { data, mutate } = useSWR(key, () => createResponse(faster ? 1 : 0, { delay: faster ? 50 : 100 }) ) return } renderWithConfig() // hydration screen.getByText('data:') // trigger the slower revalidation faster = false fireEvent.click(screen.getByText('data:')) await waitForNextTick() // trigger the faster revalidation faster = true fireEvent.click(screen.getByText('data:')) await act(() => sleep(150)) screen.getByText('data: 1') }) it('should keep isValidating be true when there are two concurrent requests', async () => { const key = createKey() function Page() { const { isValidating, mutate } = useSWR( key, () => createResponse(null, { delay: 100 }), { revalidateOnMount: false } ) return ( ) } renderWithConfig() screen.getByText('false') // trigger the first revalidation fireEvent.click(screen.getByText('false')) await act(() => sleep(50)) screen.getByText('true') fireEvent.click(screen.getByText('true')) await act(() => sleep(70)) // the first revalidation is over, the second revalidation is still in progress screen.getByText('true') await act(() => sleep(70)) screen.getByText('false') }) it('should respect sequences of revalidation calls although in dedupingInterval', async () => { let count = 0 const key = createKey() function Page() { const { data, mutate } = useSWR( key, () => { const currCount = ++count return createResponse(currCount, { delay: currCount === 1 ? 50 : 0 }) }, { dedupingInterval: 30 } ) return
mutate()}>count: {data}
} renderWithConfig() await waitForNextTick() fireEvent.click(screen.getByText('count:')) await act(() => sleep(70)) screen.getByText('count: 2') }) it('should set initial isValidating be false when config.isPaused returns true', async () => { function Page() { const { isValidating } = useSWR( 'set isValidating for config.isPaused', () => '123', { isPaused: () => true } ) return
{isValidating ? 'true' : 'false'}
} renderWithConfig() screen.getByText('false') }) it('should mark the key as invalidated and clear deduping with `mutate`, even if there is no mounted hook', async () => { const key = createKey() let cnt = 0 function Foo() { const { data } = useSWR(key, () => 'data: ' + cnt++, { dedupingInterval: 1000 }) return <>{data} } function Page() { const [showFoo, setShowFoo] = useState(true) const { mutate } = useSWRConfig() return ( <> {showFoo ? : null} ) } renderWithConfig() await nextTick() screen.getByText('data: 0') fireEvent.click(screen.getByText('toggle')) await nextTick() fireEvent.click(screen.getByText('mutate')) await nextTick() fireEvent.click(screen.getByText('toggle')) await act(() => sleep(20)) screen.getByText('data: 1') }) }) ================================================ FILE: test/use-swr-server.test.tsx ================================================ // This test case covers special environments such as React <= 17 and SSR. import { screen, render } from '@testing-library/react' import { Suspense } from 'react' import { ErrorBoundary } from 'react-error-boundary' // https://github.com/jestjs/jest/issues/11471 jest.mock('react', () => jest.requireActual('react')) async function withServer(runner: () => Promise) { await jest.isolateModulesAsync(async () => { await runner() }) } describe('useSWR - SSR', () => { describe('preload on server', () => { beforeAll(() => { // @ts-expect-error global.window.Deno = '1' }) afterAll(() => { // @ts-expect-error delete global.window.Deno }) it('should be a no-op on the server', async () => { await withServer(async () => { const { preload } = await import('swr') const fetcher = jest.fn(() => 'data') const result = preload('test-key', fetcher) // preload should return undefined on the server expect(result).toBeUndefined() // fetcher should not be called on the server expect(fetcher).not.toHaveBeenCalled() }) }) }) describe('IS_SERVER flag', () => { beforeAll(() => { // Store the original window object // @ts-expect-error global.window.Deno = '1' // Mock window to undefined // delete global.window; }) afterAll(() => { // Restore window back to its original value // @ts-expect-error delete global.window.Deno }) it('should enable the IS_SERVER flag - suspense on server without fallback', async () => { await withServer(async () => { jest.spyOn(console, 'error').mockImplementation(() => {}) const useSWR = (await import('swr')).default const key = Math.random().toString() const Page = () => { const { data } = useSWR(key, () => 'SWR', { suspense: true }) return
{data || 'empty'}
} render( { console.error(error) return
{error.message}
}} > ) await screen.findByText( 'Fallback data is required when using Suspense in SSR.' ) }) }) }) describe('strictServerPrefetchWarning', () => { it('should show console warning on when strictServerPrefetchWarning is enabled', async () => { await withServer(async () => { const warnings: string[] = [] const warnSpy = jest.spyOn(console, 'warn').mockImplementation(msg => { warnings.push(msg as string) }) const { default: useSWR, SWRConfig } = await import('swr') let resolve: (() => void) | null = null const promise = new Promise(r => { resolve = r }) const Page = () => { useSWR('ssr:1', () => 'SWR') useSWR('ssr:2', () => 'SWR') useSWR('ssr:3', () => 'SWR', { strictServerPrefetchWarning: false }) useSWR('ssr:4', () => 'SWR', { fallbackData: 'SWR' }) useSWR('ssr:5', () => 'SWR') resolve!() return null } render( , { hydrate: true } ) await promise expect(warnings).toMatchInlineSnapshot(` [ "Missing pre-initiated data for serialized key "ssr:1" 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.", "Missing pre-initiated data for serialized key "ssr:2" 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.", ] `) warnSpy.mockClear() }) }) }) }) ================================================ FILE: test/use-swr-streaming-ssr.test.tsx ================================================ import { Suspense, act } from 'react' import useSWR from 'swr' import { createKey, createResponse, renderWithConfig, hydrateWithConfig, mockConsoleForHydrationErrors, sleep } from './utils' describe('useSWR - streaming', () => { afterEach(() => { jest.clearAllMocks() jest.restoreAllMocks() }) it('should match ssr result when hydrating', async () => { const ensureAndUnmock = mockConsoleForHydrationErrors() const key = createKey() // A block fetches the data and updates the cache. function Block() { const { data } = useSWR(key, () => createResponse('SWR', { delay: 10 })) return
{data || 'undefined'}
} const container = document.createElement('div') container.innerHTML = '
undefined
' await hydrateWithConfig(, container) ensureAndUnmock() }) // NOTE: this test is failing because it's not possible to test this behavior // in JSDOM. We need to test this in a real browser. it.failing( 'should match the ssr result when streaming and partially hydrating', async () => { const key = createKey() const dataDuringHydration = {} // A block fetches the data and updates the cache. function Block({ suspense, delay, id }) { const { data } = useSWR(key, () => createResponse('SWR', { delay }), { suspense }) // The first render is always hydration in our case. if (!dataDuringHydration[id]) { dataDuringHydration[id] = data || 'undefined' } return
{data || 'undefined'}
} // In this example, a will be hydrated first and b will still be streamed. // When a is hydrated, it will update the client cache to SWR, and when // b is being hydrated, it should NOT read that cache. renderWithConfig( <> ) // The SSR result will always be 2 undefined values because data fetching won't // happen on the server: //
undefined
//
undefined
// Wait for streaming to finish. await act(() => sleep(50)) expect(dataDuringHydration).toEqual({ a: 'undefined', b: 'undefined' }) } ) }) ================================================ FILE: test/use-swr-subscription.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import { sleep, renderWithConfig, createKey } from './utils' import useSWRSubscription from 'swr/subscription' import useSWR from 'swr' import { useEffect, useState, act } from 'react' import { ErrorBoundary } from 'react-error-boundary' describe('useSWRSubscription', () => { it('should update the state', async () => { const swrKey = createKey() let intervalId let res = 0 function subscribe(key, { next }) { intervalId = setInterval(() => { if (res === 3) { const err = new Error(key) next(err) } else { next(undefined, key + res) } res++ }, 100) return () => {} } function Page() { const { data, error } = useSWRSubscription(swrKey, subscribe, { fallbackData: 'fallback' }) return ( <>
{'data:' + data}
{'error:' + (error ? error.message : '')}
) } renderWithConfig() await act(() => sleep(10)) screen.getByText(`data:fallback`) screen.getByText('error:') await act(() => sleep(100)) screen.getByText(`data:${swrKey}0`) screen.getByText('error:') await act(() => sleep(100)) screen.getByText(`data:${swrKey}1`) screen.getByText('error:') await act(() => sleep(100)) screen.getByText(`data:${swrKey}2`) screen.getByText('error:') await act(() => sleep(100)) // error occurred, error arrives instead of data 3 screen.getByText(`data:${swrKey}2`) screen.getByText(`error:${swrKey}`) await act(() => sleep(100)) screen.getByText(`data:${swrKey}4`) screen.getByText('error:') clearInterval(intervalId) await sleep(100) screen.getByText(`error:`) }) it('should pass the origin keys', async () => { const swrKey = createKey() let intervalId let res = 0 function subscribe(key, { next }) { intervalId = setInterval(() => { if (res === 3) { const err = new Error(key) next(err) } else { next(undefined, key[0] + res) } res++ }, 100) return () => {} } function Page() { const { data, error } = useSWRSubscription(() => [swrKey], subscribe, { fallbackData: 'fallback' }) return ( <>
{'data:' + data}
{'error:' + (error ? error.message : '')}
) } renderWithConfig() await act(() => sleep(10)) screen.getByText(`data:fallback`) screen.getByText('error:') await act(() => sleep(100)) screen.getByText(`data:${swrKey}0`) screen.getByText('error:') await act(() => sleep(100)) screen.getByText(`data:${swrKey}1`) screen.getByText('error:') await act(() => sleep(100)) screen.getByText(`data:${swrKey}2`) screen.getByText('error:') await act(() => sleep(100)) // error occurred, error arrives instead of data 3 screen.getByText(`data:${swrKey}2`) screen.getByText(`error:${swrKey}`) await act(() => sleep(100)) screen.getByText(`data:${swrKey}4`) screen.getByText('error:') clearInterval(intervalId) await sleep(100) screen.getByText(`error:`) }) it('should support updating keys', async () => { const swrKey = createKey() const subscriptions: string[] = [] function subscribe(key, { next }) { subscriptions.push(key) next(undefined, key) return () => {} } function Page() { const [key, setKey] = useState(undefined) const { data } = useSWRSubscription(key, subscribe, { fallbackData: 'fallback' }) useEffect(() => { const timeout = setTimeout(() => { setKey(swrKey) }, 100) return () => clearTimeout(timeout) }, []) return
{'data:' + data}
} renderWithConfig() await screen.findByText(`data:fallback`) await act(() => sleep(100)) await screen.findByText(`data:` + swrKey) // `undefined` should not trigger a subscription. expect(subscriptions).toEqual([swrKey]) }) it('should deduplicate subscriptions', async () => { const swrKey = createKey() let subscriptionCount = 0 function subscribe(key, { next }) { ++subscriptionCount let res = 0 const intervalId = setInterval(() => { if (res === 3) { const err = new Error(key + 'error') next(err) } else { next(undefined, key + res) } res++ }, 100) return () => { clearInterval(intervalId) } } function Page() { const { data, error } = useSWRSubscription(swrKey, subscribe, { fallbackData: 'fallback' }) useSWRSubscription(swrKey, subscribe) useSWRSubscription(swrKey, subscribe) return
{error ? error.message : data}
} renderWithConfig() await act(() => sleep(10)) screen.getByText(`fallback`) await act(() => sleep(100)) screen.getByText(`${swrKey}0`) await act(() => sleep(100)) screen.getByText(`${swrKey}1`) await act(() => sleep(100)) screen.getByText(`${swrKey}2`) expect(subscriptionCount).toBe(1) }) it('should not conflict with useSWR state', async () => { const swrKey = createKey() function subscribe(key, { next }) { let res = 0 const intervalId = setInterval(() => { if (res === 3) { const err = new Error(key + 'error') next(err) } else { next(undefined, key + res) } res++ }, 100) return () => { clearInterval(intervalId) } } function Page() { const { data, error } = useSWRSubscription(swrKey, subscribe, { fallbackData: 'fallback' }) const { data: swrData } = useSWR(swrKey, () => 'swr') return (
{swrData}:{error ? error.message : data}
) } renderWithConfig() await act(() => sleep(10)) screen.getByText(`swr:fallback`) await act(() => sleep(100)) screen.getByText(`swr:${swrKey}0`) await act(() => sleep(100)) screen.getByText(`swr:${swrKey}1`) await act(() => sleep(100)) screen.getByText(`swr:${swrKey}2`) }) it('should support singleton subscription', async () => { const placeholderFn: (data: number) => void = () => {} let callback: (data: number) => void = placeholderFn const sub = (fn: (data: number) => void) => { callback = fn return () => { callback = placeholderFn } } const emit = (data: number) => { callback(data) } const useSubData = (key: number) => useSWRSubscription(key.toString(), (_, { next }) => sub(data => next(null, data + key)) ) const App = () => { const [key, setKey] = useState(0) const { data } = useSubData(key) useEffect(() => { callback(1) }, []) return (

key: {key}

data: {data}

) } renderWithConfig() await screen.findByText(`key: 0`) await screen.findByText(`data: 1`) fireEvent.click(screen.getByText('add')) await act(() => sleep(100)) await screen.findByText(`key: 1`) await screen.findByText(`data: 3`) }) it('should require a dispose function', async () => { jest.spyOn(console, 'error').mockImplementation(() => {}) const swrKey = createKey() function subscribe() { return 'no-dispose' } function Page() { useSWRSubscription(swrKey, subscribe) return null } renderWithConfig( { return
{error.message}
}} > ) await screen.findByText( 'The `subscribe` function must return a function to unsubscribe.' ) }) }) ================================================ FILE: test/use-swr-suspense.test.tsx ================================================ import { fireEvent, screen } from '@testing-library/react' import { Profiler, act } from 'react' import { Suspense, useReducer, useState } from 'react' import useSWR, { mutate } from 'swr' import { createKey, createResponse, itShouldSkipForReactCanary, renderWithConfig, renderWithGlobalCache, sleep } from './utils' import { ErrorBoundary } from 'react-error-boundary' describe('useSWR - suspense', () => { afterEach(() => { jest.clearAllMocks() jest.restoreAllMocks() }) itShouldSkipForReactCanary('should render fallback', async () => { const key = createKey() function Section() { const { data } = useSWR(key, () => createResponse('SWR'), { suspense: true }) return
{data}
} renderWithConfig( fallback}>
) // hydration screen.getByText('fallback') await screen.findByText('SWR') }) itShouldSkipForReactCanary( 'should render multiple SWR fallbacks', async () => { const key = createKey() function Section() { const { data: v1 } = useSWR( key, () => createResponse(1, { delay: 50 }), { suspense: true } ) const { data: v2 } = useSWR( 'suspense-3', () => createResponse(2, { delay: 50 }), { suspense: true } ) return
{v1 + v2}
} renderWithConfig( fallback}>
) // hydration screen.getByText('fallback') await act(() => sleep(70)) screen.getByText('fallback') await act(() => sleep(70)) screen.getByText('3') } ) itShouldSkipForReactCanary('should work for non-promises', async () => { const key = createKey() function Section() { const { data } = useSWR(key, () => 'hello', { suspense: true }) return
{data}
} renderWithConfig( fallback}>
) await screen.findByText('hello') }) itShouldSkipForReactCanary('should throw errors', async () => { jest.spyOn(console, 'error').mockImplementation(() => {}) const key = createKey() function Section() { const { data } = useSWR( key, () => createResponse(new Error('error')), { suspense: true } ) return
{data}
} // https://reactjs.org/docs/concurrent-mode-suspense.html#handling-errors renderWithConfig( error boundary}> fallback}>
) // hydration screen.getByText('fallback') await screen.findByText('error boundary') }) itShouldSkipForReactCanary( 'should render cached data with error', async () => { const key = createKey() mutate(key, 'hello') function Section() { const { data, error } = useSWR( // this value is cached key, () => createResponse(new Error('error')), { suspense: true } ) return (
{data}, {error ? error.message : null}
) } renderWithGlobalCache( fallback}>
) screen.getByText('hello,') // directly from cache await screen.findByText('hello, error') // get the error with cache } ) itShouldSkipForReactCanary( 'should not fetch when cached data is present and `revalidateIfStale` is false', async () => { const key = createKey() mutate(key, 'cached') let fetchCount = 0 function Section() { const { data } = useSWR(key, () => createResponse(++fetchCount), { suspense: true, revalidateIfStale: false }) return
{data}
} renderWithGlobalCache( fallback}>
) screen.getByText('cached') await act(() => sleep(50)) // Wait to confirm fetch is not triggered expect(fetchCount).toBe(0) } ) itShouldSkipForReactCanary('should pause when key changes', async () => { // fixes https://github.com/vercel/swr/issues/57 // initialKey' -> undefined -> updatedKey const initialKey = createKey() const updatedKey = createKey() const onRender = jest.fn() function Section() { const [key, setKey] = useState(initialKey) const { data } = useSWR(key, k => createResponse(k), { suspense: true }) return ( <>
data: {data}
) } renderWithConfig(
fallback
} >
) await screen.findByText('fallback') await screen.findByText(`data: ${initialKey}`) fireEvent.click(screen.getByText('change')) await screen.findByText('fallback') await screen.findByText(`data: ${updatedKey}`) expect(onRender).toHaveBeenCalledTimes(2) }) itShouldSkipForReactCanary( 'should render correctly when key changes (but with same response data)', async () => { // https://github.com/vercel/swr/issues/1056 const renderedResults = [] const baseKey = createKey() function Section() { const [key, setKey] = useState(1) const { data } = useSWR( `${baseKey}-${key}`, () => createResponse('123'), { suspense: true } ) if (`${data},${key}` !== renderedResults[renderedResults.length - 1]) { renderedResults.push(`${data},${key}`) } return
setKey(v => v + 1)}>{`${data},${key}`}
} renderWithConfig( fallback}>
) await screen.findByText('123,1') fireEvent.click(screen.getByText('123,1')) await screen.findByText('123,2') expect(renderedResults).toEqual(['123,1', '123,2']) } ) itShouldSkipForReactCanary( 'should render correctly when key changes (from null to valid key)', async () => { // https://github.com/vercel/swr/issues/1836 const renderedResults = [] const baseKey = createKey() let setData: any = () => {} const Result = ({ query }: { query: string }) => { const { data } = useSWR( query ? `${baseKey}-${query}` : null, key => createResponse(key, { delay: 200 }), { suspense: true } ) if (`${data}` !== renderedResults[renderedResults.length - 1]) { if (data === undefined) { renderedResults.push(`${baseKey}-nodata`) } else { renderedResults.push(`${data}`) } } return
{data ? data : `${baseKey}-nodata`}
} const App = () => { const [query, setQuery] = useState('123') if (setData !== setQuery) { setData = setQuery } return ( <>

) } renderWithConfig() await screen.findByText(`${baseKey}-123`) act(() => setData('')) await screen.findByText(`${baseKey}-nodata`) act(() => setData('456')) await screen.findByText(`${baseKey}-456`) expect(renderedResults).toEqual([ `${baseKey}-123`, `${baseKey}-nodata`, `${baseKey}-456` ]) } ) itShouldSkipForReactCanary('should render initial data if set', async () => { const fetcher = jest.fn(() => 'SWR') const key = createKey() function Page() { const { data } = useSWR(key, fetcher, { fallbackData: 'Initial', suspense: true }) return
hello, {data}
} renderWithConfig( fallback}> ) expect(fetcher).not.toHaveBeenCalled() screen.getByText('hello, Initial') }) itShouldSkipForReactCanary( 'should avoid unnecessary re-renders', async () => { let renderCount = 0 let startRenderCount = 0 const key = createKey() function Section() { ++startRenderCount const { data } = useSWR(key, () => createResponse('SWR'), { suspense: true }) ++renderCount return
{data}
} renderWithConfig( fallback}>
) // hydration screen.getByText('fallback') await screen.findByText('SWR') await act(() => sleep(50)) // wait a moment to observe unnecessary renders expect(startRenderCount).toBe(2) // fallback + data expect(renderCount).toBe(1) // data } ) itShouldSkipForReactCanary( 'should return `undefined` data for falsy key', async () => { const key = createKey() const Section = ({ trigger }: { trigger: boolean }) => { const { data } = useSWR( trigger ? key : null, () => createResponse('SWR'), { suspense: true } ) return
{data || 'empty'}
} const App = () => { const [trigger, toggle] = useReducer(x => !x, false) return (
fallback
}>
) } renderWithConfig() await screen.findByText('empty') fireEvent.click(screen.getByRole('button')) screen.getByText('fallback') await screen.findByText('SWR') } ) itShouldSkipForReactCanary( 'should only render fallback once when `keepPreviousData` is set to true', async () => { const originKey = createKey() const newKey = createKey() const onRender = jest.fn() const Result = ({ query }: { query: string }) => { const { data } = useSWR(query, q => createResponse(q, { delay: 200 }), { suspense: true, keepPreviousData: true }) return
data: {data}
} const App = () => { const [query, setQuery] = useState(originKey) return ( <>
loading
} > ) } renderWithConfig() await act(() => sleep(200)) await screen.findByText(`data: ${originKey}`) fireEvent.click(screen.getByText('change')) await act(() => sleep(200)) await screen.findByText(`data: ${newKey}`) expect(onRender).toHaveBeenCalledTimes(1) } ) }) ================================================ FILE: test/utils.tsx ================================================ import { act, fireEvent, render } from '@testing-library/react' import { SWRConfig } from 'swr' export function sleep(time: number) { return new Promise(resolve => setTimeout(resolve, time)) } export const createResponse = ( response: T, { delay } = { delay: 10 } ): Promise => new Promise((resolve, reject) => setTimeout(() => { if (response instanceof Error) { reject(response) } else { resolve(response) } }, delay) ) export const nextTick = () => act(() => sleep(1)) export const focusOn = (element: any) => act(async () => { fireEvent.focus(element) }) export const createKey = () => 'swr-key-' + ~~(Math.random() * 1e7) const _renderWithConfig = ( element: React.ReactElement, config: Parameters[0]['value'] ): ReturnType => { const TestSWRConfig = ({ children }: { children: React.ReactNode }) => ( {children} ) return render(element, { wrapper: TestSWRConfig }) } export const renderWithConfig = ( element: React.ReactElement, config?: Parameters[1] ): ReturnType => { const provider = () => new Map() return _renderWithConfig(element, { provider, ...config }) } export const renderWithGlobalCache = ( element: React.ReactElement, config?: Parameters[1] ): ReturnType => { return _renderWithConfig(element, { ...config }) } export const hydrateWithConfig = ( element: React.ReactElement, container: HTMLElement, config?: Parameters[1] ): ReturnType => { const provider = () => new Map() const TestSWRConfig = ({ children }: { children: React.ReactNode }) => ( {children} ) return render(element, { container, wrapper: TestSWRConfig, hydrate: true, legacyRoot: process.env.TEST_REACT_LEGACY === '1' }) } export const mockVisibilityHidden = () => { const mockVisibilityState = jest.spyOn(document, 'visibilityState', 'get') mockVisibilityState.mockImplementation(() => 'hidden') return () => mockVisibilityState.mockRestore() } // Using `act()` will cause React 18 to batch updates. // https://github.com/reactwg/react-18/discussions/102 export async function executeWithoutBatching(fn: () => any) { const prev = global.IS_REACT_ACT_ENVIRONMENT global.IS_REACT_ACT_ENVIRONMENT = false await fn() global.IS_REACT_ACT_ENVIRONMENT = prev } export const mockConsoleForHydrationErrors = () => { jest.spyOn(console, 'error').mockImplementation(() => {}) return () => { // It should not have any hydration warnings. expect( // @ts-expect-error console.error.mock.calls.find(([err]) => { return ( err?.message?.includes( 'Text content does not match server-rendered HTML.' ) || err?.message?.includes( 'Hydration failed because the initial UI does not match what was rendered on the server.' ) ) }) ).toBeFalsy() // @ts-expect-error console.error.mockRestore() } } export const itShouldSkipForReactCanary = (...args: Parameters) => { if (process.env.TEST_REACT_CANARY === '1') { return it.skip(...args) } else { return it(...args) } } ================================================ FILE: tsconfig.json ================================================ { "compilerOptions": { "declaration": true, "esModuleInterop": true, "jsx": "react", "lib": ["esnext", "dom"], "module": "NodeNext", "moduleResolution": "nodenext", "noFallthroughCasesInSwitch": true, "noImplicitReturns": false, "noUnusedLocals": true, "noUnusedParameters": true, "strictBindCallApply": true, "outDir": "./dist", "rootDir": "./", "strict": true, "target": "ES2018", "noEmitOnError": true, "incremental": true }, "include": ["./src/**/*", "env.d.ts", "eslint.config.mjs", "jest.config.js"], "exclude": ["./**/dist", "examples"], "watchOptions": { "watchFile": "useFsEvents", "watchDirectory": "useFsEvents", "fallbackPolling": "dynamicPriority" } }