{"id":31722856,"url":"https://github.com/dipiash/tanstack-db-react-query-template","last_synced_at":"2025-10-09T04:20:51.222Z","repository":{"id":316929350,"uuid":"1065374581","full_name":"dipiash/tanstack-db-react-query-template","owner":"dipiash","description":"TanStack DB + TanStack Query: how to manage lists and optimistic updates","archived":false,"fork":false,"pushed_at":"2025-09-27T16:38:22.000Z","size":269,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-27T17:42:15.210Z","etag":null,"topics":["react","tanstack-db","tanstack-query","tanstack-react-query","typescript","vite"],"latest_commit_sha":null,"homepage":"https://dipiash.github.io/tanstack-db-react-query-template/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dipiash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-27T15:43:39.000Z","updated_at":"2025-09-27T16:38:26.000Z","dependencies_parsed_at":"2025-09-27T17:42:26.909Z","dependency_job_id":null,"html_url":"https://github.com/dipiash/tanstack-db-react-query-template","commit_stats":null,"previous_names":["dipiash/tanstack-db-react-query-template"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/dipiash/tanstack-db-react-query-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dipiash%2Ftanstack-db-react-query-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dipiash%2Ftanstack-db-react-query-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dipiash%2Ftanstack-db-react-query-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dipiash%2Ftanstack-db-react-query-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dipiash","download_url":"https://codeload.github.com/dipiash/tanstack-db-react-query-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dipiash%2Ftanstack-db-react-query-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000757,"owners_count":26082921,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","tanstack-db","tanstack-query","tanstack-react-query","typescript","vite"],"created_at":"2025-10-09T04:20:50.086Z","updated_at":"2025-10-09T04:20:51.216Z","avatar_url":"https://github.com/dipiash.png","language":"TypeScript","readme":"# tanstack-db-react-query-template\n\nRead 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)\n\n## Overview\nThis Vite-powered template pairs TanStack React Query with TanStack DB layer to showcase optimistic updates and live queries in app.\nIt 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.\n\n## Prerequisites\n- Node.js 24+\n\n## Getting Started\n1. Install dependencies: `npm install`\n2. Launch the dev server with hot reload: `npm run dev`\n3. Visit the printed URL (default `http://localhost:5173`) to interact with the demo\n4. Build assets when ready to deploy or share: `npm run build`\n5. Optionally preview the built bundle locally: `npm run preview`\n\n## Project Structure\n```text\n.\n├─ dist/                      # Generated Vite build output (ignored in source control)\n├─ src/\n│  ├─ api/\n│  │  ├─ client/              # Shared QueryClient instance\n│  │  ├─ handlers/            # Mock REST handlers simulating backend behavior\n│  │  └─ types/               # TypeScript DTOs for API payloads\n│  ├─ db/                     # TanStack DB collections and sync helpers\n│  ├─ hooks/                  # Reusable hooks for data fetching and mutations\n│  ├─ App.tsx                 # Users table UI and pagination logic\n│  └─ index.tsx               # React entry point and root render\n├─ eslint.config.mjs          # Project-wide ESLint configuration (Nimbus Clean preset)\n├─ package.json               # Scripts, dependencies, and metadata\n├─ tsconfig.json              # TypeScript compiler options\n└─ vite.config.ts             # Vite build and dev server configuration\n```\n\n## Available Commands\n- `npm run dev` — start the Vite dev server with hot module replacement\n- `npm run build` — type-check with project references, then emit a production bundle to `dist/`\n- `npm run preview` — serve the latest build output for manual smoke testing\n- `npm run lint` — run ESLint on all `.ts`/`.tsx` sources using the configured presets\n- `npm run lint:fix` — apply ESLint auto-fixes where possible\n- `npm run typecheck` — run TypeScript in no-emit mode to surface typing regressions\n\n## Development Notes\nThe demo uses mock user data from `src/api/handlers/users.mock.ts`.\nReplace these handlers with real API calls as you integrate a backend.\nCollections in `src/db` must be ready (`ensureUsersCollectionIsReady`) before mutating to keep TanStack DB and React Query in sync.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdipiash%2Ftanstack-db-react-query-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdipiash%2Ftanstack-db-react-query-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdipiash%2Ftanstack-db-react-query-template/lists"}