Skip to content

Commit 23cb8bd

Browse files
committed
[update] enhance TanStack Query tutorial with server data storage details
1 parent 9a113b8 commit 23cb8bd

2 files changed

Lines changed: 7 additions & 1 deletion

File tree

docs/integrations/react/state/tanstack-query.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ description: 'Learn how to manage Gantt server state with TanStack Query, wire m
88

99
This tutorial will guide you through creating a React TypeScript application with Vite, integrating the DHTMLX React Gantt component, and managing server state with TanStack Query. A small Zustand store handles local UI state - undo/redo history and zoom configuration.
1010

11+
The focus of this tutorial is the **client-side integration**: how TanStack Query fetches data, how mutations wire up to the Gantt's `data.save` callback, and how the query cache is used as the single source of truth for Gantt data. The backend included in the demo is intentionally minimal - it uses a local JSON file as storage instead of a real database. This is enough to demonstrate a working REST API without adding unrelated infrastructure. In a production application you would replace it with any persistent storage solution of your choice.
12+
1113
## Prerequisites
1214

1315
- Basic knowledge of React, TypeScript, Vite, and TanStack Query
@@ -238,6 +240,10 @@ Also create `src/seed/data.json` with the initial tasks and links that the backe
238240

239241
## Building the Backend Server
240242

243+
:::note
244+
The server below is a demo convenience, not a production recommendation. It stores all data in a single JSON file so you can run the full tutorial without setting up a database. Replace it with any real persistence layer - PostgreSQL, MongoDB, a cloud API, etc. - when building a production application. The client-side TanStack Query integration remains the same regardless of what the backend uses.
245+
:::
246+
241247
Create `src/server.ts`. This is a lightweight Express server that reads and writes a JSON file to simulate a real REST API:
242248

243249
```ts

sidebars.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,12 @@ module.exports = {
8080
"integrations/react/state/state-management-basics",
8181
"integrations/react/state/redux-toolkit",
8282
"integrations/react/state/zustand",
83+
"integrations/react/state/tanstack-query",
8384
"integrations/react/state/mobx",
8485
"integrations/react/state/xstate",
8586
"integrations/react/state/jotai",
8687
"integrations/react/state/valtio",
8788
"integrations/react/firebase-integration",
88-
"integrations/react/state/tanstack-query",
8989
],
9090
},
9191
// Frameworks

0 commit comments

Comments
 (0)