https://github.com/dipiash/tanstack-db-react-query-template
TanStack DB + TanStack Query: how to manage lists and optimistic updates
https://github.com/dipiash/tanstack-db-react-query-template
react tanstack-db tanstack-query tanstack-react-query typescript vite
Last synced: 4 months ago
JSON representation
TanStack DB + TanStack Query: how to manage lists and optimistic updates
- Host: GitHub
- URL: https://github.com/dipiash/tanstack-db-react-query-template
- Owner: dipiash
- Created: 2025-09-27T15:43:39.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-09-27T16:38:22.000Z (5 months ago)
- Last Synced: 2025-09-27T17:42:15.210Z (5 months ago)
- Topics: react, tanstack-db, tanstack-query, tanstack-react-query, typescript, vite
- Language: TypeScript
- Homepage: https://dipiash.github.io/tanstack-db-react-query-template/
- Size: 263 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tanstack-db-react-query-template
Read more in article: [TanStack DB + TanStack Query: Step-by-step guide to combining parameter-based loading and normalized storage](https://medium.com/@dipiash/tanstack-db-query-step-by-step-guide-to-combining-parameter-based-loading-and-normalized-storage-f1e7eb3ff55e)
## Overview
This Vite-powered template pairs TanStack React Query with TanStack DB layer to showcase optimistic updates and live queries in app.
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.
## Prerequisites
- Node.js 24+
## Getting Started
1. Install dependencies: `npm install`
2. Launch the dev server with hot reload: `npm run dev`
3. Visit the printed URL (default `http://localhost:5173`) to interact with the demo
4. Build assets when ready to deploy or share: `npm run build`
5. Optionally preview the built bundle locally: `npm run preview`
## Project Structure
```text
.
├─ dist/ # Generated Vite build output (ignored in source control)
├─ src/
│ ├─ api/
│ │ ├─ client/ # Shared QueryClient instance
│ │ ├─ handlers/ # Mock REST handlers simulating backend behavior
│ │ └─ types/ # TypeScript DTOs for API payloads
│ ├─ db/ # TanStack DB collections and sync helpers
│ ├─ hooks/ # Reusable hooks for data fetching and mutations
│ ├─ App.tsx # Users table UI and pagination logic
│ └─ index.tsx # React entry point and root render
├─ eslint.config.mjs # Project-wide ESLint configuration (Nimbus Clean preset)
├─ package.json # Scripts, dependencies, and metadata
├─ tsconfig.json # TypeScript compiler options
└─ vite.config.ts # Vite build and dev server configuration
```
## Available Commands
- `npm run dev` — start the Vite dev server with hot module replacement
- `npm run build` — type-check with project references, then emit a production bundle to `dist/`
- `npm run preview` — serve the latest build output for manual smoke testing
- `npm run lint` — run ESLint on all `.ts`/`.tsx` sources using the configured presets
- `npm run lint:fix` — apply ESLint auto-fixes where possible
- `npm run typecheck` — run TypeScript in no-emit mode to surface typing regressions
## Development Notes
The demo uses mock user data from `src/api/handlers/users.mock.ts`.
Replace these handlers with real API calls as you integrate a backend.
Collections in `src/db` must be ready (`ensureUsersCollectionIsReady`) before mutating to keep TanStack DB and React Query in sync.