Skip to content

Commit 8a9139a

Browse files
dipiashdipiash
committed
Add TanStack DB + TanStack Query (React) example
0 parents  commit 8a9139a

20 files changed

+7143
-0
lines changed

‎.editorconfig‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Editor configuration, see http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
end_of_line = lf
11+
12+
[*.md]
13+
max_line_length = off
14+
trim_trailing_whitespace = false

‎.gitignore‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
### Node ###
2+
# Logs
3+
logs
4+
*.log
5+
npm-debug.log*
6+
yarn-debug.log*
7+
yarn-error.log*
8+
lerna-debug.log*
9+
.pnpm-debug.log*
10+
11+
# Diagnostic reports (https://nodejs.org/api/report.html)
12+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
13+
14+
# Runtime data
15+
pids
16+
*.pid
17+
*.seed
18+
*.pid.lock
19+
20+
# Directory for instrumented libs generated by jscoverage/JSCover
21+
lib-cov
22+
23+
# Coverage directory used by tools like istanbul
24+
coverage
25+
*.lcov
26+
27+
# nyc test coverage
28+
.nyc_output
29+
30+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
31+
.grunt
32+
33+
# Bower dependency directory (https://bower.io/)
34+
bower_components
35+
36+
# node-waf configuration
37+
.lock-wscript
38+
39+
# Compiled binary addons (https://nodejs.org/api/addons.html)
40+
build/Release
41+
42+
# Dependency directories
43+
node_modules/
44+
jspm_packages/
45+
46+
# Snowpack dependency directory (https://snowpack.dev/)
47+
web_modules/
48+
49+
# TypeScript cache
50+
*.tsbuildinfo
51+
52+
# Optional npm cache directory
53+
.npm
54+
55+
# Optional eslint cache
56+
.eslintcache
57+
58+
# Optional stylelint cache
59+
.stylelintcache
60+
61+
# Microbundle cache
62+
.rpt2_cache/
63+
.rts2_cache_cjs/
64+
.rts2_cache_es/
65+
.rts2_cache_umd/
66+
67+
# Optional REPL history
68+
.node_repl_history
69+
70+
# Output of 'npm pack'
71+
*.tgz
72+
73+
# Yarn Integrity file
74+
.yarn-integrity
75+
76+
# dotenv environment variable files
77+
.env
78+
.env.development.local
79+
.env.test.local
80+
.env.production.local
81+
.env.local
82+
83+
# parcel-bundler cache (https://parceljs.org/)
84+
.cache
85+
.parcel-cache
86+
87+
# Next.js build output
88+
.next
89+
out
90+
91+
# Nuxt.js build / generate output
92+
.nuxt
93+
dist
94+
assets
95+
96+
# Gatsby files
97+
.cache/
98+
# Comment in the public line in if your project uses Gatsby and not Next.js
99+
# https://nextjs.org/blog/next-9-1#public-directory-support
100+
# public
101+
102+
# vuepress build output
103+
.vuepress/dist
104+
105+
# vuepress v2.x temp and cache directory
106+
.temp
107+
108+
# Docusaurus cache and generated files
109+
.docusaurus
110+
111+
# Serverless directories
112+
.serverless/
113+
114+
# FuseBox cache
115+
.fusebox/
116+
117+
# DynamoDB Local files
118+
.dynamodb/
119+
120+
# TernJS port file
121+
.tern-port
122+
123+
# Stores VSCode versions used for testing VSCode extensions
124+
.vscode-test
125+
126+
# yarn v2
127+
.yarn/cache
128+
.yarn/unplugged
129+
.yarn/build-state.yml
130+
.yarn/install-state.gz
131+
.pnp.*
132+
133+
### Node Patch ###
134+
# Serverless Webpack directories
135+
.webpack/
136+
137+
# Optional stylelint cache
138+
139+
# SvelteKit build / generate output
140+
.svelte-kit
141+
142+
# Idea
143+
.idea

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
legacy-peer-deps=true

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
24.8.0

‎.prettierrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"singleQuote": true,
3+
"printWidth": 150,
4+
"useTabs": false,
5+
"tabWidth": 2,
6+
"trailingComma": "all",
7+
"semi": false
8+
}

‎README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# tanstack-db-react-query-template
2+
3+
## Overview
4+
This Vite-powered template pairs TanStack React Query with TanStack DB layer to showcase optimistic updates and live queries in app.
5+
It bootstraps a mock-backed users table, wiring collection sync, optimistic mutations and client-side pagination so you can explore the data workflows before pointing at a real API.
6+
7+
## Prerequisites
8+
- Node.js 24+
9+
10+
## Getting Started
11+
1. Install dependencies: `npm install`
12+
2. Launch the dev server with hot reload: `npm run dev`
13+
3. Visit the printed URL (default `http://localhost:5173`) to interact with the demo
14+
4. Build assets when ready to deploy or share: `npm run build`
15+
5. Optionally preview the built bundle locally: `npm run preview`
16+
17+
## Project Structure
18+
```text
19+
.
20+
├─ dist/ # Generated Vite build output (ignored in source control)
21+
├─ src/
22+
│ ├─ api/
23+
│ │ ├─ client/ # Shared QueryClient instance
24+
│ │ ├─ handlers/ # Mock REST handlers simulating backend behavior
25+
│ │ └─ types/ # TypeScript DTOs for API payloads
26+
│ ├─ db/ # TanStack DB collections and sync helpers
27+
│ ├─ hooks/ # Reusable hooks for data fetching and mutations
28+
│ ├─ App.tsx # Users table UI and pagination logic
29+
│ └─ index.tsx # React entry point and root render
30+
├─ eslint.config.mjs # Project-wide ESLint configuration (Nimbus Clean preset)
31+
├─ package.json # Scripts, dependencies, and metadata
32+
├─ tsconfig.json # TypeScript compiler options
33+
└─ vite.config.ts # Vite build and dev server configuration
34+
```
35+
36+
## Available Commands
37+
- `npm run dev` — start the Vite dev server with hot module replacement
38+
- `npm run build` — type-check with project references, then emit a production bundle to `dist/`
39+
- `npm run preview` — serve the latest build output for manual smoke testing
40+
- `npm run lint` — run ESLint on all `.ts`/`.tsx` sources using the configured presets
41+
- `npm run lint:fix` — apply ESLint auto-fixes where possible
42+
- `npm run typecheck` — run TypeScript in no-emit mode to surface typing regressions
43+
44+
## Development Notes
45+
The demo uses mock user data from `src/api/handlers/users.mock.ts`.
46+
Replace these handlers with real API calls as you integrate a backend.
47+
Collections in `src/db` must be ready (`ensureUsersCollectionIsReady`) before mutating to keep TanStack DB and React Query in sync.

‎eslint.config.mjs‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import nimbusCleanPlugin from 'eslint-plugin-nimbus-clean'
2+
import globals from 'globals'
3+
import tsLint from 'typescript-eslint'
4+
5+
export default tsLint.config(
6+
...nimbusCleanPlugin.configs.recommended,
7+
{ ignores: ['dist'] },
8+
{
9+
files: ['**/*.{ts,tsx}'],
10+
languageOptions: {
11+
ecmaVersion: 2020,
12+
globals: globals.browser,
13+
},
14+
},
15+
{
16+
settings: {
17+
'import/resolver': {
18+
node: true,
19+
typescript: true,
20+
},
21+
},
22+
},
23+
)

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>TanStack DB + React Query + Vite</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/index.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)