Skip to content

Commit 6a971b8

Browse files
markeriksonmarkerikson
committed
Add RTKQ infinite query example app (#4744)
* Add blank RTK app * Nuke initial examples * Add react-router * Basic routing * Add msw * Configure MSW * Set up MSW * Use RTK CSB CI build * Add baseApi * Add pagination example * Add react-intersection-observer * Add infinite scroll example * Add max-pages example * Drop local example lockfile * Drop back to Vite 5 to fix TS issue * Align Vite versions to fix test TS error
1 parent cd236eb commit 6a971b8

31 files changed

+1912
-29
lines changed

‎examples/query/react/infinite-queries/.eslintrc.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"extends": [
3+
"eslint:recommended",
4+
"react-app",
5+
"plugin:react/jsx-runtime",
6+
"prettier"
7+
],
8+
"parser": "@typescript-eslint/parser",
9+
"parserOptions": { "project": true, "tsconfigRootDir": "./" },
10+
"plugins": ["@typescript-eslint"],
11+
"root": true,
12+
"ignorePatterns": ["dist"],
13+
"rules": {
14+
"@typescript-eslint/consistent-type-imports": [
15+
2,
16+
{ "fixStyle": "separate-type-imports" }
17+
],
18+
"@typescript-eslint/no-restricted-imports": [
19+
2,
20+
{
21+
"paths": [
22+
{
23+
"name": "react-redux",
24+
"importNames": ["useSelector", "useStore", "useDispatch"],
25+
"message": "Please use pre-typed versions from `src/app/hooks.ts` instead."
26+
}
27+
]
28+
}
29+
]
30+
},
31+
"overrides": [
32+
{ "files": ["*.{c,m,}{t,j}s", "*.{t,j}sx"] },
33+
{ "files": ["*{test,spec}.{t,j}s?(x)"], "env": { "jest": true } }
34+
]
35+
}

‎examples/query/react/infinite-queries/.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
typesversions
27+
.cache
28+
.yarnrc
29+
.yarn/*
30+
!.yarn/patches
31+
!.yarn/releases
32+
!.yarn/plugins
33+
!.yarn/sdks
34+
!.yarn/versions
35+
.pnp.*
36+
*.tgz

‎examples/query/react/infinite-queries/.prettierrc.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"semi": false,
3+
"arrowParens": "avoid"
4+
}

‎examples/query/react/infinite-queries/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# vite-template-redux
2+
3+
Uses [Vite](https://vitejs.dev/), [Vitest](https://vitest.dev/), and [React Testing Library](https://github.com/testing-library/react-testing-library) to create a modern [React](https://react.dev/) app compatible with [Create React App](https://create-react-app.dev/)
4+
5+
```sh
6+
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
7+
```
8+
9+
## Goals
10+
11+
- Easy migration from Create React App or Vite
12+
- As beginner friendly as Create React App
13+
- Optimized performance compared to Create React App
14+
- Customizable without ejecting
15+
16+
## Scripts
17+
18+
- `dev`/`start` - start dev server and open browser
19+
- `build` - build for production
20+
- `preview` - locally preview production build
21+
- `test` - launch test runner
22+
23+
## Inspiration
24+
25+
- [Create React App](https://github.com/facebook/create-react-app/tree/main/packages/cra-template)
26+
- [Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react)
27+
- [Vitest](https://github.com/vitest-dev/vitest/tree/main/examples/react-testing-lib)

‎examples/query/react/infinite-queries/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>React Redux App</title>
8+
</head>
9+
<body>
10+
<noscript>You need to enable JavaScript to run this app.</noscript>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

‎examples/query/react/infinite-queries/package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "vite-template-redux",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"start": "vite",
9+
"build": "tsc && vite build",
10+
"preview": "vite preview",
11+
"test": "vitest run",
12+
"format": "prettier --write .",
13+
"lint": "eslint .",
14+
"lint:fix": "eslint --fix .",
15+
"type-check": "tsc --noEmit"
16+
},
17+
"dependencies": {
18+
"@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/aa419c22/@reduxjs/toolkit/_pkg.tgz",
19+
"react": "^18.2.0",
20+
"react-dom": "^18.2.0",
21+
"react-intersection-observer": "^9.13.1",
22+
"react-redux": "^9.1.0",
23+
"react-router": "^7.0.1"
24+
},
25+
"devDependencies": {
26+
"@testing-library/dom": "^9.3.4",
27+
"@testing-library/jest-dom": "^6.2.0",
28+
"@testing-library/react": "^14.1.2",
29+
"@testing-library/user-event": "^14.5.2",
30+
"@types/react": "^18.2.47",
31+
"@types/react-dom": "^18.2.18",
32+
"@vitejs/plugin-react": "^4.2.1",
33+
"jsdom": "^23.2.0",
34+
"msw": "^2.6.6",
35+
"prettier": "^3.2.1",
36+
"typescript": "^5.3.3",
37+
"vite": "^5.0.0",
38+
"vitest": "^1.2.0"
39+
},
40+
"msw": {
41+
"workerDirectory": [
42+
"public"
43+
]
44+
}
45+
}

0 commit comments

Comments
 (0)